參考文檔?ECMAScript 6 入門。
? ? ? 1、對于class Es6的用法可能我們平常用的比較熟悉骂租,但是真正的Es6 class本質(zhì),可能不是太了解斑司,沒有具體的去深究它的實(shí)現(xiàn)方式渗饮。
????????這樣是Es6的基本寫法,這種寫法轉(zhuǎn)化成Es5 寫法之后宿刮,是如下代碼互站。
????????上面代碼定義了一個(gè)“類”,可以看到里面有一個(gè)constructor方法僵缺,這就是構(gòu)造方法云茸,而this關(guān)鍵字則代表實(shí)例對象。Es6定義的Demo類谤饭,添加方式時(shí)候直接寫方法即可标捺,Es5中會將this指向修改,babel會自動轉(zhuǎn)化揉抵。
2亡容、類的方法都定義在prototype對象上面,所以類的新方法可以添加在prototype對象上面冤今。Object.assign方法可以很方便地一次向類添加多個(gè)方法闺兢。
3、constructor方法是類的默認(rèn)方法戏罢,通過new命令生成對象實(shí)例時(shí)屋谭,自動調(diào)用該方法。一個(gè)類必須有constructor方法龟糕,如果沒有顯式定義桐磁,一個(gè)空的constructor方法會被默認(rèn)添加。這個(gè)constructor類似于我們一個(gè)class的初始化讲岁,定義的數(shù)據(jù)以及我們聲明的方法都是先走的constructor我擂,將class類初始化。
4缓艳、Class表達(dá)式和聲明方式校摩。
5阶淘、不存在變量提升
new Foo();? ? ? // ReferenceError // 變量提升沒有聲明
class Foo{}
????????上面的代碼不會報(bào)錯衙吩,因?yàn)锽ar繼承Foo的時(shí)候,F(xiàn)oo已經(jīng)有定義了溪窒。但是坤塞,如果存在class的提升冯勉,上面代碼就會報(bào)錯,因?yàn)閏lass會被提升到代碼頭部尺锚,而let命令是不提升的珠闰,所以導(dǎo)致Bar繼承Foo的時(shí)候惜浅,F(xiàn)oo還沒有定義瘫辩。
6、this 的指向
????????class 類的中的this的指向坛悉,使用不恰當(dāng)伐厌,this就會報(bào)錯。在react中最常見這種問題裸影。
????????解決方式有以下兩種:
7、Class 的 Generator 方法?
????????如果某個(gè)方法之前加上星號(*)轩猩,就表示該方法是一個(gè) Generator 函數(shù)卷扮。
????????上面代碼中,F(xiàn)oo類的Symbol.iterator方法前有一個(gè)星號均践,表示該方法是一個(gè) Generator 函數(shù)晤锹。Symbol.iterator方法返回一個(gè)Foo類的默認(rèn)遍歷器,for...of循環(huán)會自動調(diào)用這個(gè)遍歷器彤委。
8鞭铆、Class類的靜態(tài)方法
????????類相當(dāng)于實(shí)例的原型,所有在類中定義的方法焦影,都會被實(shí)例繼承车遂。如果在一個(gè)方法前,加上static關(guān)鍵字斯辰,就表示該方法不會被實(shí)例繼承舶担,而是直接通過類來調(diào)用,這就稱為“靜態(tài)方法”彬呻。
????????上面代碼中柄沮,F(xiàn)oo類的classMethod方法前有static關(guān)鍵字,表明該方法是一個(gè)靜態(tài)方法废岂,可以直接在Foo類上調(diào)用(Foo.classMethod())祖搓,而不是在Foo類的實(shí)例上調(diào)用。如果在實(shí)例上調(diào)用靜態(tài)方法湖苞,會拋出一個(gè)錯誤拯欧,表示不存在該方法。
? ? ? ? 個(gè)人提取在項(xiàng)目中自己常用的一些class類的方法财骨,只是個(gè)人理解使用镐作,如果有什么不對的對方藏姐,還望指正。