Es6 中class的理解

參考文檔?ECMAScript 6 入門


? ? ? 1、對于class Es6的用法可能我們平常用的比較熟悉骂租,但是真正的Es6 class本質(zhì),可能不是太了解斑司,沒有具體的去深究它的實(shí)現(xiàn)方式渗饮。

Es6 寫法

????????這樣是Es6的基本寫法,這種寫法轉(zhuǎn)化成Es5 寫法之后宿刮,是如下代碼互站。

Es5 實(shí)現(xiàn)Es6的寫法轉(zhuǎn)化之后

????????上面代碼定義了一個(gè)“類”,可以看到里面有一個(gè)constructor方法僵缺,這就是構(gòu)造方法云茸,而this關(guān)鍵字則代表實(shí)例對象。Es6定義的Demo類谤饭,添加方式時(shí)候直接寫方法即可标捺,Es5中會將this指向修改,babel會自動轉(zhuǎn)化揉抵。

2亡容、類的方法都定義在prototype對象上面,所以類的新方法可以添加在prototype對象上面冤今。Object.assign方法可以很方便地一次向類添加多個(gè)方法闺兢。

一個(gè)類方法定義多個(gè)方法function

3、constructor方法是類的默認(rèn)方法戏罢,通過new命令生成對象實(shí)例時(shí)屋谭,自動調(diào)用該方法。一個(gè)類必須有constructor方法龟糕,如果沒有顯式定義桐磁,一個(gè)空的constructor方法會被默認(rèn)添加。這個(gè)constructor類似于我們一個(gè)class的初始化讲岁,定義的數(shù)據(jù)以及我們聲明的方法都是先走的constructor我擂,將class類初始化。

constructor默認(rèn)方法是每個(gè)class類自帶的方法

4缓艳、Class表達(dá)式和聲明方式校摩。

聲明方式,以及表達(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中最常見這種問題裸影。

引用方式不當(dāng)挣轨,報(bào)錯this

????????解決方式有以下兩種:

解決this指向問題

7、Class 的 Generator 方法?

????????如果某個(gè)方法之前加上星號(*)轩猩,就表示該方法是一個(gè) Generator 函數(shù)卷扮。

Generator 在class中使用

????????上面代碼中,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)方法”彬呻。

static靜態(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è)人理解使用镐作,如果有什么不對的對方藏姐,還望指正。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末该贾,一起剝皮案震驚了整個(gè)濱河市羔杨,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌杨蛋,老刑警劉巖兜材,帶你破解...
    沈念sama閱讀 219,039評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異逞力,居然都是意外死亡曙寡,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,426評論 3 395
  • 文/潘曉璐 我一進(jìn)店門寇荧,熙熙樓的掌柜王于貴愁眉苦臉地迎上來举庶,“玉大人,你說我怎么就攤上這事揩抡』Ы模” “怎么了?”我有些...
    開封第一講書人閱讀 165,417評論 0 356
  • 文/不壞的土叔 我叫張陵峦嗤,是天一觀的道長蕊唐。 經(jīng)常有香客問我,道長寻仗,這世上最難降的妖魔是什么刃泌? 我笑而不...
    開封第一講書人閱讀 58,868評論 1 295
  • 正文 為了忘掉前任,我火速辦了婚禮署尤,結(jié)果婚禮上耙替,老公的妹妹穿的比我還像新娘。我一直安慰自己曹体,他們只是感情好俗扇,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,892評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著箕别,像睡著了一般铜幽。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上串稀,一...
    開封第一講書人閱讀 51,692評論 1 305
  • 那天除抛,我揣著相機(jī)與錄音,去河邊找鬼母截。 笑死到忽,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的清寇。 我是一名探鬼主播喘漏,決...
    沈念sama閱讀 40,416評論 3 419
  • 文/蒼蘭香墨 我猛地睜開眼护蝶,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了翩迈?” 一聲冷哼從身側(cè)響起持灰,我...
    開封第一講書人閱讀 39,326評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎负饲,沒想到半個(gè)月后堤魁,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,782評論 1 316
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡绽族,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,957評論 3 337
  • 正文 我和宋清朗相戀三年姨涡,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了衩藤。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片吧慢。...
    茶點(diǎn)故事閱讀 40,102評論 1 350
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖赏表,靈堂內(nèi)的尸體忽然破棺而出检诗,到底是詐尸還是另有隱情,我是刑警寧澤瓢剿,帶...
    沈念sama閱讀 35,790評論 5 346
  • 正文 年R本政府宣布逢慌,位于F島的核電站,受9級特大地震影響间狂,放射性物質(zhì)發(fā)生泄漏攻泼。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,442評論 3 331
  • 文/蒙蒙 一鉴象、第九天 我趴在偏房一處隱蔽的房頂上張望忙菠。 院中可真熱鬧,春花似錦纺弊、人聲如沸牛欢。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,996評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽傍睹。三九已至,卻和暖如春犹菱,著一層夾襖步出監(jiān)牢的瞬間拾稳,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,113評論 1 272
  • 我被黑心中介騙來泰國打工腊脱, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留访得,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 48,332評論 3 373
  • 正文 我出身青樓虑椎,卻偏偏與公主長得像震鹉,于是被迫代替她去往敵國和親俱笛。 傳聞我的和親對象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,044評論 2 355

推薦閱讀更多精彩內(nèi)容

  • class的基本用法 概述 JavaScript語言的傳統(tǒng)方法是通過構(gòu)造函數(shù)传趾,定義并生成新對象迎膜。下面是一個(gè)例子: ...
    呼呼哥閱讀 4,096評論 3 11
  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理,服務(wù)發(fā)現(xiàn)浆兰,斷路器磕仅,智...
    卡卡羅2017閱讀 134,662評論 18 139
  • Class 的基本語法 簡介 JavaScript 語言中,生成實(shí)例對象的傳統(tǒng)方法是通過構(gòu)造函數(shù)簸呈。下面是一個(gè)例子榕订。...
    huilegezai閱讀 522評論 0 0
  • 看來DC電影《小丑》已經(jīng)進(jìn)入了正式拍攝階段劫恒,而只要拍外景,就一定會有片場照或視頻傳出轿腺,而這一次两嘴,全都有。 談到杰昆...
    DC中文網(wǎng)閱讀 302評論 0 0
  • 青梅遠(yuǎn)去族壳,竹馬歸來(Top1)活動鏈接:梅涼出題憔辫,你寫詩(7.14-7.18)截至2017年7月19日1:18AM...
    梅涼閱讀 1,764評論 34 61