Detailed explanation of the this pointing problem of JavaScript prototype objects

1. this points to

This in the constructor refers to the instance object. So what does the prototype object this point to?

as follows:

function Student(age,name){
            this.age = age;
            this.name = name;
        }
        var that;
        Student.prototype.score = function(){
            console.log('The children all have good grades!');
            that = this;
        }
        var xl = new Student(18,'Little Bear');
        xl.score();
        console.log(that === xl);

Define a global variable that, assign a value to it in the score function, let it point to this in the function, call the score method of the instance object, and determine whether that and the instance object are consistent. If they are consistent, it means that the prototype object this points to the instance.

The print result is:

That is, the prototype object contains the method, and this in the method refers to the caller of the method, that is, the instance object.

2. Modify this point

1. call() method

Write a simple function to add two numbers.

 function fn(a,b){
           console.log(a+b);
            console.log(this);
		 }
 fn(1,2)

Print this inside the function, call the function, and see where its this points to.

It can be seen that this points to the window object. If we want this to point to a newly created object, how do we do it?

First define an object.

o = {};

Then modify this point through call() to point to the newly created object o

 o = {
            name: 'xl'
        };
        fn.call(o,1,2);

The print result is:

Now this points to the newly created object o, which means the modification is successful.

2. apply() method

The apply() and call() methods are basically the same, so I won’t go into details here. Let’s go straight to the code:

 function fn(a,b){
           console.log(a+b);
            console.log(this);
        }
        o = {
            name: 'xl'
        };
        fn.apply(o,[1,2]);

It can be found that there are still differences between these two methods, namely: the parameters accepted by call() must be continuous parameters, while the parameters received by the apply() method are in the form of array parameters.

Summarize

This article ends here. I hope it can be helpful to you. I also hope you can pay more attention to more content on 123WORDPRESS.COM!