javascript - Issues with this and constructors in JS

Question

function People() {
}
People.prototype.say = function () {
    alert("hello");
}

function Student() {
}
Student.prototype = new People();
var superSay = Student.prototype.say;

Student.prototype.say = function () {
    superSay.call(this);            // 为什么会是"hello"?
    alert("stu-hello");
}
var s = new Student();
s.say();

As commented in the code, superSay.call(this)Why is the People.prototype.say function called? Who does this point to?

Answer 1

this points to the Student{} class. You can verify this by adding a line console.log(this) above superSay.call(this).

Then, let’s look at this code

Student.prototype = new People();

For the convenience of explanation later, I call the instance created by new People() here Instance X.
Because superSay = Student.prototype.say, because the above Student.prototype = new People();, so Student.prototype is instance X.
So actually superSay calls say of instance X, not People.prototype.say.

As for why you think you are calling People.prototype.say, it is mainly a problem with the prototype chain. Instance X is an instance of the People class, so all methods of Instance So Instance X.sayIf the say method is not overridden for Instance In addition, the call in superSay.call(this)just changes the context of this. However, since

superSay

is instance

Answer 2

This problem is often encountered in js

Answer 3

Personal opinion: Let’s first talk about the search sequence for finding the say method: s——student.prototype——people.prototype——Object. If found, it is ready and stop searching. Combined with your code, say will only find student.prototype. Here you can first change your code to look like this to make it clearer:

    People.prototype.say = function () {
        console.log(123);
    }
    People.prototype.jiao = function () {
        console.log(456);
    }
    Student.prototype.say = function () {
          console.log(321)
    }

Others remain unchanged. At this time, s.say() - outputs 321, s.jiao() - outputs 456. Then go back to your code, because you have overridden the sdudent.prototype.say method, so this code will be executed

    Student.prototype.say = function () {
        superSay.call(this);            // 为什么会是"hello"?
        alert("stu-hello");
    }

The first sentence superSay.call(this), first superSay is a variable, the variable type is function, you can add a piece of code console.log(typeof supperSay) after var superSay = Student.prototype.say, so you just Call this function, and this variable stores Student.prototype.say. Execute to var superSay = Student.prototype.say. In fact, the value assigned here is People.prototype.say. This point is similar on pages 166-167 of Elevation. Regarding this point, you can change these two sections of your code to this, leaving the rest unchanged.

    var superSay = Student.prototype.say;
    Student.prototype = new People();

An error will be reported when calling superSay at this time, because when var superSay = Student.prototype.say is executed; student.prototype has only one constructer attribute and no say method. Then go back to your code and People.prototype.say will be assigned to superSay

综上第一句代码会输出hello，而你的call根本没什么用
第二句就不用说了。
关于this其实我也不是特别清楚。我原来还认为console.log(this)会输出S，结果输出student,还需继续学习。

Answer 4

Bind this in the superSay constructor to Student.prototype.

Answer 5

Aren’t you afraid that the poster will be fooled by all the talk upstairs?

In his program, stuSay points to the anonymous function object function () {alert("hello");}. As long as you don't reassign stuSay, it will always point to this function object. No matter where you call it, it will always be like this. As a result, as for who this points to inside the function body, please read the Rhinoceros book...

The poster will not have these problems after reading the function part of the Rhinoceros book. As for the so much nonsense upstairs, don’t make the poster dizzy