幾種js中this函數的呼叫方式

javascript中的this意義非常豐富，它可以是全域對象，目前物件或是任意對象，這都取決於函數的呼叫方式。函數有以下幾種呼叫方式：作為物件方法呼叫、作為函數呼叫、作為建構函式呼叫、apply或call呼叫。

物件方法呼叫

作為物件方法呼叫的時候，this會被綁定到該物件。

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 对象

這裡我想強調一點內容，就是this是在函數執行的時候去取得對應的值，而不是函數定義時。即使是物件方法調用，如果該方法的函數屬性以函數名稱的形式傳入別的作用域，也會改變this的指向。我舉一個例子：

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);

這樣就明白了吧。這是一個容易混淆的地方。

函數調用

函數也可以直接被調用，這個時候this被綁定到了全域物件。

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

但這樣就會出現一些問題，就是在函數內部定義的函數，其this也會指向全局，而和我們希望的恰恰相反。程式碼如下：

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

我們會發現不但我們希望的移動呢效果沒有完成，反而會多出兩個全域變數。那麼如何解決呢？只要要進入函數中的函數時將this儲存到一個變數中，再運用該變數即可。程式碼如下：

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

建構子呼叫

#在javascript中自己建立建構函式時可以利用this來指向新建立的物件上。這樣就可以避免函數中的this指向全域了

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

#apply或call呼叫

這兩個方法可以切換函數執行的上下文環境，也就是改變this綁定的物件。 apply和call比較類似，差別在於傳入參數時一個要求是數組，一個要求是分開傳入。所以我們以apply為例：

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

可以看到，正常存取物件中方法時，this指向物件。使用了apply後，apply無參數時，this的目前物件是全域，apply有參數時，this的目前物件就是該參數。

箭頭函數呼叫

這裡需要補充一點內容，就是在下一代javascript標準ES6中的箭頭函數的 this始終指向函數定義時的 this，而非執行時。我們透過一個例子來理解

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

上面的程式碼會出現錯誤，因為this的指向從o變成全域。我們需要修改上面的程式碼如下：

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绑定对象的区别了。

以上是幾種js中this函數的呼叫方式的詳細內容。更多資訊請關注PHP中文網其他相關文章！