国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

ES6的class本質(zhì)和react中需要使用bind(this)的原因

AlphaGooo / 1209人閱讀

摘要:語法糖可以說是廣泛存在于各種計算機代碼中,包括語言中的其實就是的語法糖。在執(zhí)行的時候,如果執(zhí)行了,那么從中獲取的函數(shù),其對象已經(jīng)被綁定到了的即上。

ES6的class

我們知道ES6新出一個規(guī)范是使用class關(guān)鍵字來定義一個類,這在以前是沒有的
在以前,需要在javascript里實現(xiàn)面向?qū)ο螅托枰褂胮rototype

什么是面向?qū)ο螅?/b>

面向?qū)ο笥腥缦聨讉€基本特征,通常認為,只要實現(xiàn)了這幾個特性,就認為是實現(xiàn)了面向?qū)ο螅?br>1.封裝
2.繼承
3.多態(tài)
這里不對三個基本特征的做詳細展開。只需要知道,javascript實現(xiàn)繼承和多態(tài)都需要用到prototype
而ES6的class,本質(zhì)上還是ES5的prototype的語法糖

什么是語法糖?

語法糖就是提供了一種全新的方式書寫代碼,但是其實現(xiàn)原理與之前的寫法相同。
語法糖可以說是廣泛存在于各種計算機代碼中,包括C語言中的a[i]其實就是*a+i的語法糖。而今天對于我們來說,a[i]其實已經(jīng)很普遍和常用了,所以也沒有人提這是語法糖這回事了。因為終極來說,所有語言都是匯編語言的語法糖:)

class foo{
    constructor(){
    }
    a(){}
    b(){}
}

// 等價于
function foo(){};
foo.prototype = {
    constructor(){},
    a(){},
    b(){},
}
ES6的class跟ES5的定義方式用幾個不同

1.沒有變量提升
2.this指向不同

先來看1:

test(); // 輸出"test"
function test(){
    console.log("test");
}

我們知道即便在定義test函數(shù)之前執(zhí)行test(),也是會得到結(jié)果的。這是因為解析javascript代碼的時候會把所有的function test(){}這類代碼(即正常定義函數(shù))都提升到最上方去定義。

但是這么執(zhí)行不行:

let a = new test(); // 報錯
class test(){} 

再看2:

class Animal {
    printName () {
      this.print("Hello animal");
    }
    print(name) {
      console.log(name);
    }
}
const animal = new Animal();
animal.printName(); // 輸出"Hello animal"
const { printName } = animal;
printName(); // 報錯: Cannot read property "print" of undefined

如果執(zhí)行了bind

class Animal {
    constructor(){
        this.printName = this.printName.bind(this);
    }
    printName () {
      this.print("Hello animal");
    }
    print(name) {
      console.log(name);
    }
}
const animal = new Animal();
animal.printName(); // 輸出"Hello animal"
const { printName } = animal;
printName(); // 輸出"Hello animal"
發(fā)生了什么?

animal中的printName函數(shù)的this原本指向的是執(zhí)行環(huán)境,如果不執(zhí)行bind,那么printName函數(shù)的this指向window。
在執(zhí)行new Animal()的時候,如果執(zhí)行了bind,那么從animal中獲取的printName函數(shù),其this對象已經(jīng)被綁定到了constructor的this,即animal上。
以下是this的指向

那么我們?yōu)槭裁葱枰趓eact里bind(this)呢?

簡單來說,就是react在調(diào)用render方法的時候,會先把render里的方法賦值給一個變量(比如變量foo),然后再執(zhí)行foo()。
具體來說,以典型的綁定點擊事件為例

react構(gòu)建虛擬DOM的時候,會把this.clickHandler先賦值給一個變量。我們假設(shè)是變量clickFunc = this.clickHandler;
然后,把虛擬DOM渲染成真實DOM的時候,會把onClick屬性值替換成onclick,并給onclick賦值clickFunc

在復(fù)雜的情況中,可能存在多次傳遞,如果不進行bind,那么this的指向是一定會丟失的。

為什么react不自己集成bind到生命周期里?

1是,沒有特別合適集成bind的地方
2是,并不是所有的函數(shù)都需要bind
3是,隨意集成bind可能導(dǎo)致效率低下

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

轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/104208.html

相關(guān)文章

  • React.createClassextends Component區(qū)別

    摘要:本質(zhì)上是一個工廠函數(shù),的方式更加接近最新的規(guī)范的寫法。兩種方式在語法上的差別主要體現(xiàn)在方法的定義和靜態(tài)屬性的聲明上。和的區(qū)別主要在于語法區(qū)別和狀態(tài)的區(qū)別區(qū)別語法區(qū)別后一種方法使用的語法,用構(gòu)造器來構(gòu)造默認的屬性和狀態(tài)。 createClass本質(zhì)上是一個工廠函數(shù),extends的方式更加接近最新的ES6規(guī)范的class寫法。兩種方式在語法上的差別主要體現(xiàn)在方法的定義和靜態(tài)屬性的聲明上。...

    hlcc 評論0 收藏0
  • React&ES6

    摘要:在中必須調(diào)用方法,因為子類沒有自己的對象,而是繼承父類的對象,然后對其進行加工而就代表了父類的構(gòu)造函數(shù)。雖然代表了父類的構(gòu)造函數(shù),但是返回的是子類的實例,即內(nèi)部的指的是,因此在這里相當(dāng)于。要求,子類的構(gòu)造函數(shù)必須執(zhí)行一次函數(shù),否則會報錯。 1.class ES6 提供了更接近傳統(tǒng)語言的寫法,引入了 Class(類)這個概念,作為對象的模板。通過class關(guān)鍵字,可以定義類。基本上,ES...

    jeffrey_up 評論0 收藏0
  • React&ES6

    摘要:在中必須調(diào)用方法,因為子類沒有自己的對象,而是繼承父類的對象,然后對其進行加工而就代表了父類的構(gòu)造函數(shù)。雖然代表了父類的構(gòu)造函數(shù),但是返回的是子類的實例,即內(nèi)部的指的是,因此在這里相當(dāng)于。要求,子類的構(gòu)造函數(shù)必須執(zhí)行一次函數(shù),否則會報錯。 1.class ES6 提供了更接近傳統(tǒng)語言的寫法,引入了 Class(類)這個概念,作為對象的模板。通過class關(guān)鍵字,可以定義類。基本上,ES...

    mist14 評論0 收藏0
  • 談一談創(chuàng)建React Component幾種方式

    摘要:用這種方式創(chuàng)建組件時,并沒有對內(nèi)部的函數(shù),進行綁定,所以如果你想讓函數(shù)在回調(diào)中保持正確的,就要手動對需要的函數(shù)進行綁定,如上面的,在構(gòu)造函數(shù)中對進行了綁定。 當(dāng)我們談起React的時候,多半會將注意力集中在組件之上,思考如何將頁面劃分成一個個組件,以及如何編寫可復(fù)用的組件。但對于接觸React不久,還沒有真正用它做一個完整項目的人來說,理解如何創(chuàng)建一個組件也并不那么簡單。在最開始的時候...

    mylxsw 評論0 收藏0
  • React類,方法綁定(第三部分)

    摘要:使用箭頭函數(shù)和構(gòu)造函數(shù)當(dāng)方法被調(diào)用時,會保留上下文。我們能使用這個特征用下面的方法在構(gòu)造函數(shù)中重定義函數(shù)。在調(diào)用方法的方使用函數(shù)綁定語法你也可以直接在非構(gòu)造函數(shù)里面的里面直接使用函數(shù)綁定。 這是React和ECMAScript6/ECMAScript7結(jié)合使用系列文章的第三篇。 下面是所有系列文章章節(jié)的鏈接: React 、 ES6 - 介紹(第一部分) React類、ES7屬性初始...

    livem 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<