Detailed explanation of JavaScript this pointer sample code

The meaning of this in JavaScript is very rich. It can be the global object, the current object or any object, depending on how the function is called. Functions can be called in the following ways: as an object method, as a function, as a constructor, apply or call.

Object method call

When called as an object method, this will be bound to the object.

var point = { 
 x : 0, 
 y : 0, 
 moveTo : function(x, y) { 
     this.x = this.x + x; 
     this.y = this.y + y; 
     } 
 }; 

 point.moveTo(1, 1)//this 绑定到当前对象，即 point 对象

I want to emphasize one thing here, that is, this gets the corresponding value when the function is executed, not when the function is defined. Even if it is an object method call, if the function attribute of the method is passed into another scope in the form of a function name, the pointer of this will be changed. Let me give you an example:

var a = {
	aa : 0,
	bb : 0,
	fun : function(x,y){
		this.aa = this.aa + x;
		this.bb = this.bb + y;
	}
};
var aa = 1;
var b = {
	aa:0,
	bb:0,
	fun : function(){return this.aa;}
}	
a.fun(3,2);
document.write(a.aa);//3，this指向对象本身
document.write(b.fun());//0,this指向对象本身
(function(aa){//注意传入的是函数，而不是函数执行的结果
	var c = aa();
	document.write(c);//1 , 由于fun在该处执行，导致this不再指向对象本身，而是这里的window
})(b.fun);

So you can understand. This can be a confusing place.

Function call

The function can also be called directly. At this time, this is bound to the global object.

　var x = 1;
　　function test(){
　　　　this.x = 0;
　　}
　　test();
　　alert(x); //0

But this will cause some problems, that is, for functions defined inside the function, this will also point to the global world, which is exactly the opposite of what we want. The code is as follows:

var point = { 
 x : 0, 
 y : 0, 
 moveTo : function(x, y) { 
     // 内部函数
     var moveX = function(x) { 
     this.x = x;//this 绑定到了全局
    }; 
    // 内部函数
    var moveY = function(y) { 
    this.y = y;//this 绑定到了全局
    }; 

    moveX(x); 
    moveY(y); 
    } 
 }; 
 point.moveTo(1, 1); 
 point.x; //==>0 
 point.y; //==>0 
 x; //==>1 
 y; //==>1

We will find that not only the movement effect we want is not completed, but there will be two more global variables. So how to solve it? Just save this to a variable when entering a function within a function, and then use the variable. The code is as follows:

var point = { 
 x : 0, 
 y : 0, 
 moveTo : function(x, y) { 
      var that = this; 
     // 内部函数
     var moveX = function(x) { 
     that.x = x; 
     }; 
     // 内部函数
     var moveY = function(y) { 
     that.y = y; 
     } 
     moveX(x); 
     moveY(y); 
     } 
 }; 
 point.moveTo(1, 1); 
 point.x; //==>1 
 point.y; //==>1

Constructor call

When you create your own constructor in JavaScript, you can use this to point to the newly created object. This will prevent this in the function from pointing to the global world.

　var x = 2;
　　function test(){
　　　　this.x = 1;
　　}
　　var o = new test();
　　alert(x); //2

apply or call

These two methods can switch the context of function execution, that is, change the object bound to this. Apply and call are similar. The difference is that when passing in parameters, one requirement is an array and the other requirement is that they are passed in separately. So we take apply as an example:

<pre name="code" class="html">var name = "window";

var someone = {
    name: "Bob",
    showName: function(){
        alert(this.name);
    }
};

var other = {
    name: "Tom"
};   

someone.showName();		//Bob
someone.showName.apply();    //window
someone.showName.apply(other);    //Tom

You can see that when accessing the method in the object normally, this points to the object. After using apply, when apply has no parameters, the current object of this is the global object. When apply has parameters, the current object of this is the parameter.

Arrow function call

Something needs to be added here, that is, the arrow function in the next generation javascript standard ES6 this is always Points to this when the function is defined, not when it is executed. Let's understand through an example:

var o = {
    x : 1,
    func : function() { console.log(this.x) },
    test : function() {
        setTimeout(function() {
            this.func();
        }, 100);
    }
};

o.test(); // TypeError : this.func is not a function

The above code will cause an error because the pointer of this changes from o to the global. We need to modify the above code as follows:

var o = {
    x : 1,
    func : function() { console.log(this.x) },
    test : function() {
        var _this = this;
        setTimeout(function() {
            _this.func(); 
        }, 100);
    }
};

o.test();

Just use this externally saved in advance. Arrow functions can be used here. As we just said, the this of the arrow function always points to the this# when the function is defined. ##, rather than execution time . So we modify the above code as follows:

var o = {
    x : 1,
    func : function() { console.log(this.x) },
    test : function() {
        setTimeout(() => { this.func() }, 100);
    }
};

o.test();

This time this will point to o. What we also need to pay attention to is that this will not change the object pointed to. We know that call and apply can change this. Pointing, but is invalid in arrow functions.

var x = 1,
    o = {
        x : 10,
        test : () => this.x
    };

o.test(); // 1
o.test.call(o); // 依然是1

In this way, you can understand the difference between this binding object in various situations.

The above is the detailed content of Detailed explanation of JavaScript this pointer sample code. For more information, please follow other related articles on the PHP Chinese website!