JavaScript通常函數中 "this" 的判斷

JavaScript中this值很讓人頭疼, 今天總結下幾個方法快速判斷this的指定.

---

先說結論(傳統語法):

1. 函數在new(new綁定)中調用: this綁定的是新建立的對象:

   var bar = new foo(); //this 指向bar.

2. 函數經過call / apply(顯式綁定)　或者硬綁定調用, this指向括號內的對象:

   var bar = foo.call(obj2);  // this 指向 obj2

3. 函數在某個上下文對象中調用(隱式綁定), this綁定該上下文對象:

   var bar = obj1.foo();     //this 綁定 obj1

4. 若是上述三種都不是, 使用默認綁定. 在嚴格模式下 綁定到undefined, 不然綁定到全局對象:

   var bar = foo(); //非嚴格模式下,this指向全局對象;

---

---

重點: ES6中 this詞法

• ES6中引入了箭頭函數, 解決了this的複雜性.

• 箭頭函數不是使用function關鍵字定義的, 而是使用"=>"操做符定義的.

• 箭頭函數不使用上文的四種標準規則, 而是根據外層(函數或全局)的做用域來決定this.

function foo(){
    //返回一個箭頭函數
    return (a) => {
        //this繼承自 foo()
        console.log(this.a);
    };
}

var obj1 = {
    a:2
};

var obj2 = {
    a:3
};

var bar = foo.call( obj1 );
bar.call( obj2 );    //2, 不是3

foo()內部建立的箭頭函數會捕獲調用foo()時的this.

因爲foo()的this被綁定到obj1, bar(引用箭頭函數) 的this也會綁定到 obj1;

箭頭函數的綁定沒法被修改(new也不行).

箭頭函數最經常使用於回調函數中, 例如事件處理器或定時器:

function foo(){
        setTimeout() => {
            //這裏的this 在詞法上繼承自foo()
            console.log( this.a );
        }, 100 );
    };
    
    foo.call( obj ); //2

---

function foo(){   //等價於上述代碼
        var self = this;    //ES6以前的模式 , self綁定外層函數.
        setTimeout( function(){
            console.log( self.a ); //此時self的指向已經固定.
        }, 100 );
    }
    var obj = {
        a = 2;
    };
    foo.call(obj); //2

具體來講,箭頭函數會繼承外層函數調用的this綁定(不管this綁定到什麼).

---

最近纔開始學ES6和MVVM框架，的確晚了一步．以前一直認爲打好基礎最重要，死磕ES5, 得不償失. 面對舊技術的漏洞就像泥潭, 最好的方法是繞開, 而不是自不量力想要克服它.

(The End)