Several ways to call this function in js

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.

1. 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 point here, that is, this is to obtain 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:

1. 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’ll 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.

1. 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:

1. 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:

1. 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 a constructor in JavaScript, you can use this to point to the newly created object. This way you can avoid this in the function pointing to the global

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

apply or call call

These two methods can switch the context of function execution Environment, that is, changing 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:

1. <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 use an example to understand

1. 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:

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

通过使用外部事先保存的this就行了。这里就可以利用到箭头函数了，我们刚才说过，箭头函数的 this始终指向函数定义时的 this，而非执行时。所以我们将上面的代码修改如下：

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

这回this就指向o了，我们还需要注意一点的就是这个this是不会改变指向对象的，我们知道call和apply可以改变this的指向，但是在箭头函数中是无效的。

1. var x = 1,  
       o = {  
           x : 10,  
           test : () => this.x  
       };  
     
   o.test(); // 1  
   o.test.call(o); // 依然是1

这样就可以明白各种情况下this绑定对象的区别了。

The above is the detailed content of Several ways to call this function in js. For more information, please follow other related articles on the PHP Chinese website!