JavaScript 的This綁定方式導(dǎo)圖

lbool 發(fā)布于2019-08-20 18:05 / 886人閱讀

摘要：本文是對加深對的理解一文的導(dǎo)圖版翻譯中的是一個捉摸不透的東西，它很喜歡變化，很詭異。寫在后面的幾種綁定規(guī)則，歸根結(jié)底，的套路就是關(guān)于幾種模式的等價變換形式，知乎上面有大神解答，猛戳這最后是全圖附上思維導(dǎo)圖的下載鏈接去有道云筆記下載

本文是對《加深對 JavaScript This 的理解》一文的導(dǎo)圖版翻譯

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

首先上張滑稽的圖

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

上下文對象

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

參見此鏈接

關(guān)于This的綁定4種規(guī)則 1. 默認綁定

2. 隱式綁定

3. 顯式綁定

4. new綁定

此外，在ES6中引入的箭頭函數(shù)，需要注意：

    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"

上述代碼的運行結(jié)果原因在于，setTimeout里面的回調(diào)函數(shù)執(zhí)行時，屬于默認綁定規(guī)則，因此在非嚴格模式下，this指向window,this.a也即window.a，window.a就是全局變量var a = "scope"

箭頭函數(shù)的出現(xiàn)，打破了這種規(guī)則：

    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生成的函數(shù)會定義一個自己的this，而箭頭函數(shù)沒有自己的this，而是會和上一層的作用域共享this。箭頭函數(shù)讓this重新回到靜態(tài)作用域規(guī)則的懷抱。

寫在后面 last but not least!!!

this的幾種綁定規(guī)則，歸根結(jié)底，的套路就是：
關(guān)于幾種模式的等價變換形式，知乎上面有大神解答，猛戳這

最后是全圖

附上思維導(dǎo)圖的下載鏈接

去有道云筆記下載