How “this” works with the classic prototype method in Javascript

Question

I am in the know of learning object oriented programming in Javascript. I got this video from here http://www.objectplayground.com/ , which I understood quite a bit by the prototype method according to the classical method.

While viewing the abbreviation, I was stopped by the example shown for the classical method of working with subclasses, which is 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 the call function, he will set this to the current context, which, for example, from this line Answer.call(this,value) from the FirmAnswer function, so _val from Answer will be set for FirmAnswer , and not for Answer (please correct me , if I am wrong).

Thus, this leads me to my confusion if the above analysis is correct, why the get property for FirmAnswer.prototype returns Answer.prototype.get.call(this) , and not just Answer.prototype.get() , since this Already configured for FirmAnswer when calling new FirmAsnwer(7) ?

Please shed some light for me, as I'm rather confused. I am sure that I understand the prototype method well, but the classical method confuses me a bit.

Thank you in advance!

Answer 1

Unacceptable since editing the question

This is strange code and contains one error and something else inexplicable.

The error in this line is:

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

This is clearly pointless code, especially when FirmAnswer.prototype.get gets more than reasonable two lines later. I am sure this should be:

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

This is the normal way to do prototype inheritance in JavaScript before ES6.

Ultimate inappropriateness

I do not understand why FirmAnswer.prototype.get set in another way, when the call will be delegated to Answer.prototype.get in any case after fixing the specified error.

However, you asked a specific question: why is this line needed:

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

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

This all does not matter, because this method is not really needed. Here's the code in a more reasonable way:

 //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 

Answer 2

Now that you are editing 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 a 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 remove 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 

Answer 3

The FirmAnswers constructor function passes this to it in the Answer function, where Answer sets this._val. So if you looked at the nobleman in the FirmAnswer {{val: 7} console

This is an object of type FirmAnswer with _val of 7

When you install FirmAnswer.prototype.get on a named function anon that returns a call to Answer.prototype.get, you again pass FirmAnswers to this prototype, which basically makes a copy of protoype.