JavaScript 的This綁定方式導圖

本文是對《加深對 JavaScript This 的理解》一文的導圖版翻譯

JS中的this是一個捉摸不透的東西，它很喜歡變化，很詭異。擁抱變化，接收詭異，看清this的真面目，這篇來源於《加深對 JavaScript This 的理解》的導圖也許有些幫助

首先上張滑稽的圖

理解This的綁定方式，可能要先理解下上下文對象、做用域類型

做用域類型

上下文對象

上下文對象也叫運行時環境，是一個在代碼運行時的概念，推薦下面這篇文章

參見此連接

關於This的綁定4種規則

1. 默認綁定

2. 隱式綁定

3. 顯式綁定

4. new綁定

此外，在ES6中引入的箭頭函數，須要注意：

var a = 'scope';

    function ClassA(){
        this.a = 'ClassA';        
        this.do = function(){
            setTimeout(function(){
                console.log(this.a); // 期待的是輸出 'ClassA'
            });
        }
    }

    var ins = new ClassA();
    ins.do(); // 然而倒是 ： 'scope'

• 上述代碼的運行結果緣由在於，setTimeout裏面的回調函數執行時，屬於默認綁定規則，所以在非嚴格模式下，this指向window,this.a也即window.a，window.a就是全局變量var a = 'scope'

• 箭頭函數的出現，打破了這種規則：

var a = 'scope';

    function ClassA(){
        this.a = 'ClassA';        
        this.do = function(){
            setTimeout(() => {
                console.log(this.a); // 期待的是輸出 'ClassA'
            });
        }
    }

    var ins = new ClassA();
    ins.do(); // 輸出確實是 ： 'ClassA'

用function生成的函數會定義一個本身的this，而箭頭函數沒有本身的this，而是會和上一層的做用域共享this。箭頭函數讓this從新回到靜態做用域規則的懷抱。

寫在後面 last but not least!!!

this的幾種綁定規則，歸根結底，的套路就是：
關於幾種模式的等價變換形式，知乎上面有大神解答，猛戳這

最後是全圖

附上思惟導圖的下載連接

去有道雲筆記下載