This pointer for JavaScript

This pointer for JavaScript

This in javascript has rich meanings. It can be a global object, the current object or any object, depending on the function call method. A function can be called in the following ways: as an object method call, as a function call, as a constructor call, apply, or call.

Object method call

When called as an object method, this will be bound to this 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 is bound to the current object, that is, the point object.

Here I want to emphasize that this is used to obtain the corresponding value during function execution, rather than during function definition. Even if an object method is called, if the function attribute of this method is passed into another scope in the form of a function name, the point of this will be changed. Here is 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 points to the object itself
  
  
Document. write (B. fun (); // 0, this points to the object itself
  
  
(Function (aa) {// note that the passed function is not the result of function execution.
  
  
Var c = aa ();
  
  
Document. write (c); // 1. Because fun is executed here, this does not point to the object itself, but to the window
  
  
}) (B. fun );
 
 

In this case, you will understand. This is a confusing place.

Function call

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

 
 

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

But there will be some problems, that is, the function defined inside the function, its this will also point to the global, and it is exactly the opposite of what we want. The Code is as follows:

 
 

  
  
Var point = {
  
  
X: 0,
  
  
Y: 0,
  
  
MoveTo: function (x, y ){
  
  
// Internal functions
  
  
Var moveX = function (x ){
  
  
This. x = x; // this is bound to the global
  
  
};
  
  
// Internal functions
  
  
Var moveY = function (y ){
  
  
This. y = y; // this is bound to the global
  
  
};
  
  
 
  
  
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 we want is not completed, but there will be two more global variables. How can this problem be solved? You only need to save this to a variable when entering the function, and then use this variable. The Code is as follows:

 
 

  
  
Var point = {
  
  
X: 0,
  
  
Y: 0,
  
  
MoveTo: function (x, y ){
  
  
Var that = this;
  
  
// Internal functions
  
  
Var moveX = function (x ){
  
  
That. x = x;
  
  
};
  
  
// Internal functions
  
  
Var moveY = function (y ){
  
  
That. y = y;
  
  
}
  
  
MoveX (x );
  
  
MoveY (y );
  
  
}
  
  
};
  
  
Point. moveTo (1, 1 );
  
  
Point. x; // => 1
  
  
Point. y; // => 1
 
 

Constructor call

You can use this to point to the newly created object when creating a constructor in javascript. In this way, this in the function can be avoided pointing to the global.

 
 

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

Apply or call

The two methods can switch the Context Environment of the function execution, that is, change the object bound to this. The difference between apply and call is that an array is required when a parameter is input, and an application is passed in separately. So we use 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 
 
 

As you can see, this points to the object when the method in the normal access object is used. When the apply parameter is used and no parameter is set, the current object of this is global. When the apply parameter is set, the current object of this is this parameter.

Arrow function call

Here, we need to add that this of the arrow function in the Next Generation javascript standard ES6 always points to this when the function is defined, rather than when it is executed. Let's take an example to understand:

 
 

  
  
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 point of this is changed from o to 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(); 
 
 

You can save this by using an external file. The arrow function can be used here. As we have just said, this of the arrow function always points to this when the function is defined, rather than when it is executed. So we can 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 point points to o. We also need to note that this will not change to the object. We know that call and apply can change the point of this, however, it is invalid in the arrow function.

 
 

  
  
Var x = 1,
  
  
O = {
  
  
X: 10,
  
  
Test: () => this. x
  
  
};
  
  
 
  
  
O. test (); // 1
  
  
O. test. call (o); // still 1
 
 

In this way, you can understand the differences between this bound objects in various cases.