資訊專(zhuān)欄INFORMATION COLUMN
摘要：語(yǔ)法糖可以說(shuō)是廣泛存在于各種計(jì)算機(jī)代碼中，包括語(yǔ)言中的其實(shí)就是的語(yǔ)法糖。在執(zhí)行的時(shí)候，如果執(zhí)行了，那么從中獲取的函數(shù)，其對(duì)象已經(jīng)被綁定到了的即上。
ES6的class
我們知道ES6新出一個(gè)規(guī)范是使用class關(guān)鍵字來(lái)定義一個(gè)類(lèi)，這在以前是沒(méi)有的
在以前，需要在javascript里實(shí)現(xiàn)面向?qū)ο螅托枰褂胮rototype
面向?qū)ο笥腥缦聨讉€(gè)基本特征，通常認(rèn)為，只要實(shí)現(xiàn)了這幾個(gè)特性，就認(rèn)為是實(shí)現(xiàn)了面向?qū)ο螅?br>1.封裝
2.繼承
3.多態(tài)
這里不對(duì)三個(gè)基本特征的做詳細(xì)展開(kāi)。只需要知道，javascript實(shí)現(xiàn)繼承和多態(tài)都需要用到prototype
而ES6的class，本質(zhì)上還是ES5的prototype的語(yǔ)法糖
什么是語(yǔ)法糖？語(yǔ)法糖就是提供了一種全新的方式書(shū)寫(xiě)代碼，但是其實(shí)現(xiàn)原理與之前的寫(xiě)法相同。
語(yǔ)法糖可以說(shuō)是廣泛存在于各種計(jì)算機(jī)代碼中，包括C語(yǔ)言中的a[i]其實(shí)就是*a+i的語(yǔ)法糖。而今天對(duì)于我們來(lái)說(shuō)，a[i]其實(shí)已經(jīng)很普遍和常用了，所以也沒(méi)有人提這是語(yǔ)法糖這回事了。因?yàn)榻K極來(lái)說(shuō)，所有語(yǔ)言都是匯編語(yǔ)言的語(yǔ)法糖：）
class foo{
constructor(){
}
a(){}
b(){}
}
// 等價(jià)于
function foo(){};
foo.prototype = {
constructor(){},
a(){},
b(){},
}
ES6的class跟ES5的定義方式用幾個(gè)不同
1.沒(méi)有變量提升
2.this指向不同
先來(lái)看1：
test(); // 輸出"test"
function test(){
console.log("test");
}
我們知道即便在定義test函數(shù)之前執(zhí)行test()，也是會(huì)得到結(jié)果的。這是因?yàn)榻馕鰆avascript代碼的時(shí)候會(huì)把所有的function test(){}這類(lèi)代碼（即正常定義函數(shù)）都提升到最上方去定義。
但是這么執(zhí)行不行：
let a = new test(); // 報(bào)錯(cuò)
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(); // 報(bào)錯(cuò): 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()的時(shí)候，如果執(zhí)行了bind，那么從animal中獲取的printName函數(shù)，其this對(duì)象已經(jīng)被綁定到了constructor的this,即animal上。
以下是this的指向
簡(jiǎn)單來(lái)說(shuō)，就是react在調(diào)用render方法的時(shí)候，會(huì)先把render里的方法賦值給一個(gè)變量（比如變量foo），然后再執(zhí)行foo()。
具體來(lái)說(shuō)，以典型的綁定點(diǎn)擊事件為例
react構(gòu)建虛擬DOM的時(shí)候，會(huì)把this.clickHandler先賦值給一個(gè)變量。我們假設(shè)是變量clickFunc = this.clickHandler;
然后，把虛擬DOM渲染成真實(shí)DOM的時(shí)候，會(huì)把onClick屬性值替換成onclick，并給onclick賦值clickFunc
在復(fù)雜的情況中，可能存在多次傳遞，如果不進(jìn)行bind，那么this的指向是一定會(huì)丟失的。
為什么react不自己集成bind到生命周期里？1是，沒(méi)有特別合適集成bind的地方
2是，并不是所有的函數(shù)都需要bind
3是，隨意集成bind可能導(dǎo)致效率低下
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/104208.html
摘要：本質(zhì)上是一個(gè)工廠函數(shù)，的方式更加接近最新的規(guī)范的寫(xiě)法。兩種方式在語(yǔ)法上的差別主要體現(xiàn)在方法的定義和靜態(tài)屬性的聲明上。和的區(qū)別主要在于語(yǔ)法區(qū)別和狀態(tài)的區(qū)別區(qū)別語(yǔ)法區(qū)別后一種方法使用的語(yǔ)法，用構(gòu)造器來(lái)構(gòu)造默認(rèn)的屬性和狀態(tài)。 createClass本質(zhì)上是一個(gè)工廠函數(shù)，extends的方式更加接近最新的ES6規(guī)范的class寫(xiě)法。兩種方式在語(yǔ)法上的差別主要體現(xiàn)在方法的定義和靜態(tài)屬性的聲明上。...
摘要：用這種方式創(chuàng)建組件時(shí)，并沒(méi)有對(duì)內(nèi)部的函數(shù)，進(jìn)行綁定，所以如果你想讓函數(shù)在回調(diào)中保持正確的，就要手動(dòng)對(duì)需要的函數(shù)進(jìn)行綁定，如上面的，在構(gòu)造函數(shù)中對(duì)進(jìn)行了綁定。 當(dāng)我們談起React的時(shí)候，多半會(huì)將注意力集中在組件之上，思考如何將頁(yè)面劃分成一個(gè)個(gè)組件，以及如何編寫(xiě)可復(fù)用的組件。但對(duì)于接觸React不久，還沒(méi)有真正用它做一個(gè)完整項(xiàng)目的人來(lái)說(shuō)，理解如何創(chuàng)建一個(gè)組件也并不那么簡(jiǎn)單。在最開(kāi)始的時(shí)候...
摘要：在中必須調(diào)用方法，因?yàn)樽宇?lèi)沒(méi)有自己的對(duì)象，而是繼承父類(lèi)的對(duì)象，然后對(duì)其進(jìn)行加工而就代表了父類(lèi)的構(gòu)造函數(shù)。雖然代表了父類(lèi)的構(gòu)造函數(shù)，但是返回的是子類(lèi)的實(shí)例，即內(nèi)部的指的是，因此在這里相當(dāng)于。要求，子類(lèi)的構(gòu)造函數(shù)必須執(zhí)行一次函數(shù)，否則會(huì)報(bào)錯(cuò)。 1.class ES6 提供了更接近傳統(tǒng)語(yǔ)言的寫(xiě)法，引入了 Class（類(lèi)）這個(gè)概念，作為對(duì)象的模板。通過(guò)class關(guān)鍵字，可以定義類(lèi)?；旧希珽S...
摘要：在中必須調(diào)用方法，因?yàn)樽宇?lèi)沒(méi)有自己的對(duì)象，而是繼承父類(lèi)的對(duì)象，然后對(duì)其進(jìn)行加工而就代表了父類(lèi)的構(gòu)造函數(shù)。雖然代表了父類(lèi)的構(gòu)造函數(shù)，但是返回的是子類(lèi)的實(shí)例，即內(nèi)部的指的是，因此在這里相當(dāng)于。要求，子類(lèi)的構(gòu)造函數(shù)必須執(zhí)行一次函數(shù)，否則會(huì)報(bào)錯(cuò)。 1.class ES6 提供了更接近傳統(tǒng)語(yǔ)言的寫(xiě)法，引入了 Class（類(lèi)）這個(gè)概念，作為對(duì)象的模板。通過(guò)class關(guān)鍵字，可以定義類(lèi)?；旧?，ES...
摘要：使用箭頭函數(shù)和構(gòu)造函數(shù)當(dāng)方法被調(diào)用時(shí)，會(huì)保留上下文。我們能使用這個(gè)特征用下面的方法在構(gòu)造函數(shù)中重定義函數(shù)。在調(diào)用方法的方使用函數(shù)綁定語(yǔ)法你也可以直接在非構(gòu)造函數(shù)里面的里面直接使用函數(shù)綁定。 這是React和ECMAScript6／ECMAScript7結(jié)合使用系列文章的第三篇。 下面是所有系列文章章節(jié)的鏈接： React 、 ES6 - 介紹（第一部分） React類(lèi)、ES7屬性初始...
閱讀 3905·2021-11-22 13:52
閱讀 3758·2019-12-27 12:20
閱讀 2480·2019-08-30 15:55
閱讀 2243·2019-08-30 15:44
閱讀 2334·2019-08-30 13:16
閱讀 657·2019-08-28 18:19
閱讀 1988·2019-08-26 11:58
閱讀 3539·2019-08-26 11:47
