CODEWITHSUNDEEP
javascriptprototype-programmingprototype-chainprototype-pattern
Roljhon
Roljhon

Reputation: 1339

How `this` works from a Classical Method of Prototyping in Javascript

I'm on my journey to learn Object-Oriented Programming in Javascript. I got this video lession from here http://www.objectplayground.com/ which I understood quite a bit the prototypal method over classical method.

While watching the lession, I was paused by the example shown for the classical method to work with subclasses which is the below:

//superclass
function Answer(value){
     this._val = value;
}

//define prototype property 'get' for the superclass
Answer.prototype.get = function fn1(){
    return this._val;
}

//subclass
function FirmAnswer(value){
    Answer.call(this,value);
}

FirmAnswer.prototype = Object.create(Answer.prototype);
FirmAnswer.prototype.constructor = FirmAnswer;

//define prototype property 'get' for subclass
FirmAnswer.prototype.get = function fn2(){
   return Answer.prototype.get.call(this);
}


var luckAnswer = new FirmAnswer(7);
luckAnswer.get(); //7

Question:

From my understanding of call function, it will set the this to the current context which is for example from this line Answer.call(this,value) from the FirmAnswer function, so the _val from Answer will be set for the FirmAnswer and not for the Answer (please correct me if I'm wrong).

So it leads me to my confusion if the above analyzation is correct, as to why the get property of the FirmAnswer.prototype returns Answer.prototype.get.call(this) and not just Answer.prototype.get() alone since the this is already set to FirmAnswer when calling new FirmAsnwer(7)?

Please shed me some light as I'm pretty confused as of the moment. I'm pretty sure I understand well the prototypal method but the classical method confuses me quite a bit.

Thank you in advance!

Upvotes: 8

Views: 125

Answers (3)

tfidelis
tfidelis

Reputation: 453

Now that you edit the code, there is no need to have this:

//define prototype property 'get' for subclass
FirmAnswer.prototype.get = function fn2(){
   return Answer.prototype.get.call(this);
}

because FirmAnswer.prototype already has get function when you do this:

FirmAnswer.prototype = Object.create(Answer.prototype);

it copies the get function from Answer.prototype to FirmAnswer.prototype

so, you can delete it:

//superclass
function Answer(value){
     this._val = value;
}

//define prototype property 'get' for the superclass
Answer.prototype.get = function fn1(){
    return this._val;
}

//subclass
function FirmAnswer(value){
    Answer.call(this,value);
}

FirmAnswer.prototype = Object.create(Answer.prototype);
FirmAnswer.prototype.constructor = FirmAnswer;

var luckAnswer = new FirmAnswer(7);
luckAnswer.get(); //7

Upvotes: 0

lonesomeday
lonesomeday

Reputation: 238115

Irrelevant since edit to question

This is weird code and contains one mistake and something else that's inexplicable.

The mistake is this line:

FirmAnswer.prototype.get = Object.create(Answer.prototype);

This is obviously nonsense code, particularly as FirmAnswer.prototype.get gets set to something far more sensible two lines later. I'm fairly sure it's meant to be:

FirmAnswer.prototype = Object.create(Answer.prototype);

That's the normal way of doing prototypal inheritance in pre-ES6 Javascript.

End irrelevance

I don't understand why FirmAnswer.prototype.get gets set to another method, when the call would be delegated to Answer.prototype.get in any case once the above error is fixed.

You asked a specific question, however: why is this line necessary:

return Answer.prototype.get.call(this);

Why can't we just do Answer.prototype.get()? When we did Answer.call(this,value);, it set the context (this value) for that call only. It only affected the constructor function. If you did Answer.prototype.get(), the context for the function call would actually be Answer.prototype, which doesn't have a _val property.

This is all irrelevant, however, because that method is not actually needed. Here's the code in a more sensible form:

//superclass
function Answer(value){
     this._val = value;
}

//define prototype property 'get' for the superclass
Answer.prototype.get = function fn1(){
    return this._val;
}

//subclass
function FirmAnswer(value){
    Answer.call(this,value);
}

FirmAnswer.prototype = Object.create(Answer.prototype);
FirmAnswer.prototype.constructor = FirmAnswer;

var luckAnswer = new FirmAnswer(7);
console.log(luckAnswer.get()); //7

Upvotes: 1

JellyKid
JellyKid

Reputation: 302

The function FirmAnswers constructor is passing it's this to function Answer, where Answer is setting this._val. So if you were to look at luckanswer in the console FirmAnswer { _val: 7 }

It is a FirmAnswer type object with a _val of 7

When you set FirmAnswer.prototype.get to a named anon function which returns a call to Answer.prototype.get you again are passing the FirmAnswers this to the prototype which is basically making a copy of the protoype.

Upvotes: 0

Related Questions