成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

lbool / 889人閱讀

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

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


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

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

上下文對(duì)象

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

參見此鏈接
關(guān)于This的綁定4種規(guī)則 1. 默認(rèn)綁定

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"

上述代碼的運(yùn)行結(jié)果原因在于，setTimeout里面的回調(diào)函數(shù)執(zhí)行時(shí)，屬于默認(rèn)綁定規(guī)則，因此在非嚴(yán)格模式下，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(); // 輸出確實(shí)是 ： "ClassA"

用function生成的函數(shù)會(huì)定義一個(gè)自己的this，而箭頭函數(shù)沒有自己的this，而是會(huì)和上一層的作用域共享this。箭頭函數(shù)讓this重新回到靜態(tài)作用域規(guī)則的懷抱。

寫在后面 last but not least!!!

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

最后是全圖

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

去有道云筆記下載

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/84079.html

相關(guān)文章

  • 這一次，我們換種姿勢(shì)學(xué)習(xí) javascript

    摘要：操作符或調(diào)用函數(shù)時(shí)傳入?yún)?shù)的操作都會(huì)導(dǎo)致關(guān)聯(lián)作用域的賦值操作。此外可以使用和來設(shè)置對(duì)象及其屬性的不可變性級(jí)別。忽視這一點(diǎn)會(huì)導(dǎo)致許多問題。使用調(diào)用函數(shù)時(shí)會(huì)把新對(duì)象的屬性關(guān)聯(lián)到其他對(duì)象。 前言 《你不知道的 javascript》是一個(gè)前端學(xué)習(xí)必讀的系列，讓不求甚解的JavaScript開發(fā)者迎難而上，深入語(yǔ)言內(nèi)部，弄清楚JavaScript每一個(gè)零部件的用途。本書介紹了該系列的兩個(gè)主題：...

    zone 評(píng)論0 收藏0

  • 十分鐘快速了解《你不知道的 JavaScript》（上卷）

    摘要：最近剛剛看完了你不知道的上卷，對(duì)有了更進(jìn)一步的了解。你不知道的上卷由兩部分組成，第一部分是作用域和閉包，第二部分是和對(duì)象原型。附錄詞法這一章并沒有說明機(jī)制，只是介紹了中的箭頭函數(shù)引入的行為詞法。第章混合對(duì)象類類理論類的機(jī)制類的繼承混入。 最近剛剛看完了《你不知道的 JavaScript》上卷，對(duì) JavaScript 有了更進(jìn)一步的了解。 《你不知道的 JavaScript》上卷由兩部...

    趙春朋 評(píng)論0 收藏0

  • Laravel思維導(dǎo)圖之Laravel核心概念

    摘要：的核心概念包括服務(wù)容器服務(wù)提供者門面契約。所有服務(wù)提供者都需要繼承類?？梢詾榉?wù)提供者的方法設(shè)置類型提示。方法將在所有其他服務(wù)提供者均已注冊(cè)之后調(diào)用。同樣會(huì)整理成思維導(dǎo)圖的形式以方便記憶與回顧。 showImg(https://segmentfault.com/img/remote/1460000010771201); Laravel 的核心概念包括：服務(wù)容器、服務(wù)提供者、門面（Fac...

    wthee 評(píng)論0 收藏0

  • 精讀《你不知道的javascript（中卷）》

    摘要：強(qiáng)制類型轉(zhuǎn)換本章介紹了的數(shù)據(jù)類型之間的轉(zhuǎn)換即強(qiáng)制類型轉(zhuǎn)換包括顯式和隱式。強(qiáng)制類型轉(zhuǎn)換常常為人詬病但實(shí)際上很多時(shí)候它們是非常有用的。隱式強(qiáng)制類型轉(zhuǎn)換則沒有那么明顯是其他操作的副作用。在處理強(qiáng)制類型轉(zhuǎn)換的時(shí)候要十分小心尤其是隱式強(qiáng)制類型轉(zhuǎn)換。 前言 《你不知道的 javascript》是一個(gè)前端學(xué)習(xí)必讀的系列，讓不求甚解的JavaScript開發(fā)者迎難而上，深入語(yǔ)言內(nèi)部，弄清楚JavaSc...

    李世贊 評(píng)論0 收藏0

  • Laravel思維導(dǎo)圖之Laravel HTTP路由、中間件、控制器

    摘要：又限于層的內(nèi)容太多，我在這篇中將整理路由中間件控制器部分內(nèi)容。前者定義頁(yè)面路由，默認(rèn)應(yīng)用中間件組后者定義無狀態(tài)路由，會(huì)應(yīng)用中間件組。命名路由可以為指定路由或者控制器方法命名，也可以為已命名的路由生成。 showImg(https://segmentfault.com/img/remote/1460000010882838); 上圖列出了 Laravel HTTP 層的相關(guān)知識(shí)大綱。由于...

    linkin 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<