CODEWITHSUNDEEP
javascript
egurb
egurb

Reputation: 1216

Using 'this' in a function prototype - JavaScript

I am trying to understand some prototypical concepts of JavaScript which I don't use quite often. Here I have two same methods one for Array another for Function. One works, another not. Could you please explain what is the difference here?

var arr = ['test'];
var string = 'test';

Array.prototype.print = function(){
        console.log(this);
}
Function.prototype.print = function () {
        console.log(this);
}

arr.print(); // logs the arr with value 'test'
string.print(); //logs string.print is not a function

Upvotes: 2

Views: 64

Answers (6)

Prabodh M
Prabodh M

Reputation: 2262

If you are trying to extend a function prototype and accessing the String prototype. You are misunderstanding the prototype inheritance concept

var arr = ['test'];
var string = 'test';
var someMethod = function(){ /* some code */ };

Array.prototype.print = function(){
        console.log(this);
}

String.prototype.print = function () {
        console.log(this);
}

//Extending the prototype of Function
Function.prototype.print = function () {
        console.log(this);
}


arr.print(); // logs the arr with value 'test'
string.print(); //logs string.print is not a function
someMethod.print(); // this will trigger the print method
// extended in Function Prototype.

Update

Very interesting point I realised due this post in Javascript. It is you can treat Function prototype as other prototoypes. Imagine you are extending the functions of a function itself ( seems like one of a kind inception ). So there are interesting methods like call, apply , bind. So we can extend the functionality of even a function. Correct me if I am wrong, Unlike in any other language I can think of, where extending function seems to be impossible. Given that we are not given privilege to touch the source code of that language. Very powerful feature in JS.

Upvotes: 1

Jonas Wilms
Jonas Wilms

Reputation: 138567

[Array,Function,String,Object].forEach(n=>n.prototype.print=function(){
console.log(this);
});

A shortform...

Upvotes: 1

SIMDD
SIMDD

Reputation: 645

string inherit String, you can add print method to String prototype like this:

String.prototype.print = function () {
        console.log(this);
}

Upvotes: 1

Racil Hilan
Racil Hilan

Reputation: 25371

The first one works because you did it right. You added print function to Array.

The second one doesn't work because you did it wrong. You need to add print function to String:

String.prototype.print = function () {
    console.log(this);
}

Upvotes: 1

Pranav C Balan
Pranav C Balan

Reputation: 115282

The error says the problem in your code, that you are not defined the print function on String prototype instead you did on Function which you are not using at all.

String.prototype.print = function () {
//^^^^^--
        console.log(this);
}


var arr = ['test'];
var string = 'test';

Array.prototype.print = function() {
  console.log(this);
}
String.prototype.print = function() {
  console.log(this);
}

arr.print(); // logs the arr with value 'test'
string.print(); //logs string.print is not a function

Upvotes: 2

Milanzor
Milanzor

Reputation: 1930

You are 'extending' the Function prototype but calling the print function on a String.

Change your code to:

String.prototype.print = function () {
        console.log(this);
}

And it'll work.

Upvotes: 3

Related Questions