ES6 常用特性(三)

類 & 繼承

類也是 ES6 一個不可忽視的新特性,雖然只是句法上的語法糖,但是相對于 ES5撮躁,學(xué)習(xí) ES6 的類之后對原型鏈會有更加清晰的認(rèn)識。

特性

1买雾、本質(zhì)為對原型鏈的二次包裝
2把曼、類沒有提升
3、不能使用字面量定義屬性
4漓穿、動態(tài)繼承類的構(gòu)造方法中 super 優(yōu)先 this

類的定義
/* 類不會被提升 */
let puppy = new Animal('puppy'); // => ReferenceError

class Animal {
    constructor(name) {
        this.name = name;
    }

    sleep() {
        console.log(`The ${this.name} is sleeping...`);
    }

    static type() {
        console.log('This is an Animal class.');
    }
}

let puppy = new Animal('puppy');

puppy.sleep();    // => The puppy is sleeping...

/* 實例化后無法訪問靜態(tài)方法 */
puppy.type();     // => TypeError

Animal.type();    // => This is an Animal class.

/* 實例化前無法訪問動態(tài)方法 */
Animal.sleep();   // => TypeError

/* 類不能重復(fù)定義 */
class Animal() {} // => SyntaxError

以上我們使用 class 關(guān)鍵字聲明了一個名為 Animal 的類嗤军。

雖然類的定義中并未要求類名的大小寫,但鑒于代碼規(guī)范晃危,推薦類名的首字母大寫叙赚。

兩點注意事項:
在類的定義中有一個特殊方法 constructor(),該方法名固定山害,表示該類的構(gòu)造函數(shù)(方法)纠俭,在類的實例化過程中會被調(diào)用(new Animal('puppy'));
類中無法像對象一樣使用 prop: value 或者 prop = value 的形式定義一個類的屬性浪慌,我們只能在類的構(gòu)造方法或其他方法中使用 this.prop = value 的形式為類添加屬性冤荆。

最后對比一下我們之前是怎樣寫類的:

function Animal(name) {
    this.name = name;
}

Animal.prototype = {
    sleep: function(){
        console.log('The ' + this.name + 'is sleeping...');
    }
};

Animal.type = function() {
    console.log('This is an Animal class.');
}

//class 關(guān)鍵字真真讓這一切變得清晰易懂了~類的繼承
class Programmer extends Animal {
    constructor(name) {
        /* 在 super 方法之前 this 不可用 */
        console.log(this); // => ReferenceError
        super(name);
        console.log(this); // Right!
    }
    
    program() {
        console.log("I'm coding...");
    }

    sleep() {
        console.log('Save all files.');
        console.log('Get into bed.');
        super.sleep();
    }
}

let coder = new Programmer('coder');
coder.program(); // => I'm coding...
coder.sleep();   // => Save all files. => Get into bed. => The coder is sleeping.

這里我們使用 class 定義了一個類 Programmer,使用 extends 關(guān)鍵字讓該類繼承于另一個類 Animal权纤。

如果子類有構(gòu)造方法钓简,那么在子類構(gòu)造方法中使用 this 對象之前必須使用 super() 方法運行父類的構(gòu)造方法以對父類進(jìn)行初始化。

在子類方法中我們也可以使用 super 對象來調(diào)用父類上的方法汹想。如示例代碼中子類的 sleep() 方法:在這里我們重寫了父類中的 sleep() 方法外邓,添加了兩條語句,并在方法末尾使用 super 對象調(diào)用了父類上的 sleep() 方法古掏。

俗話講:沒有對比就沒有傷害 (*゜ー゜*)损话,我們最后來看一下以前我們是怎么來寫繼承的:

function Programmer(name) {
    Animal.call(this, name);
}

Programmer.prototype = Object.create(Animal.prototype, {
    program: {
        value: function() {
            console.log("I'm coding...");
        }
    },
    sleep: {
        value: function() {
            console.log('Save all files.');
            console.log('Get into bed.');
            Animal.prototype.sleep.apply(this, arguments);
        }
    }
});

Programmer.prototype.constructor = Programmer;
  如果前文類的定義中的前后對比不足為奇,那么這個。丧枪。光涂。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市拧烦,隨后出現(xiàn)的幾起案子忘闻,更是在濱河造成了極大的恐慌,老刑警劉巖恋博,帶你破解...
    沈念sama閱讀 222,183評論 6 516
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件齐佳,死亡現(xiàn)場離奇詭異,居然都是意外死亡债沮,警方通過查閱死者的電腦和手機(jī)炼吴,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,850評論 3 399
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來秦士,“玉大人缺厉,你說我怎么就攤上這事∷硗粒” “怎么了提针?”我有些...
    開封第一講書人閱讀 168,766評論 0 361
  • 文/不壞的土叔 我叫張陵,是天一觀的道長曹傀。 經(jīng)常有香客問我辐脖,道長,這世上最難降的妖魔是什么皆愉? 我笑而不...
    開封第一講書人閱讀 59,854評論 1 299
  • 正文 為了忘掉前任嗜价,我火速辦了婚禮,結(jié)果婚禮上幕庐,老公的妹妹穿的比我還像新娘久锥。我一直安慰自己,他們只是感情好异剥,可當(dāng)我...
    茶點故事閱讀 68,871評論 6 398
  • 文/花漫 我一把揭開白布瑟由。 她就那樣靜靜地躺著,像睡著了一般冤寿。 火紅的嫁衣襯著肌膚如雪歹苦。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,457評論 1 311
  • 那天督怜,我揣著相機(jī)與錄音殴瘦,去河邊找鬼。 笑死号杠,一個胖子當(dāng)著我的面吹牛蚪腋,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 40,999評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼屉凯,長吁一口氣:“原來是場噩夢啊……” “哼动遭!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起神得,我...
    開封第一講書人閱讀 39,914評論 0 277
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎偷仿,沒想到半個月后哩簿,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,465評論 1 319
  • 正文 獨居荒郊野嶺守林人離奇死亡酝静,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,543評論 3 342
  • 正文 我和宋清朗相戀三年节榜,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片别智。...
    茶點故事閱讀 40,675評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡宗苍,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出薄榛,到底是詐尸還是另有隱情讳窟,我是刑警寧澤,帶...
    沈念sama閱讀 36,354評論 5 351
  • 正文 年R本政府宣布敞恋,位于F島的核電站丽啡,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏硬猫。R本人自食惡果不足惜补箍,卻給世界環(huán)境...
    茶點故事閱讀 42,029評論 3 335
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望啸蜜。 院中可真熱鬧坑雅,春花似錦、人聲如沸衬横。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,514評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽冕香。三九已至蛹尝,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間悉尾,已是汗流浹背突那。 一陣腳步聲響...
    開封第一講書人閱讀 33,616評論 1 274
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留构眯,地道東北人愕难。 一個月前我還...
    沈念sama閱讀 49,091評論 3 378
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親猫缭。 傳聞我的和親對象是個殘疾皇子葱弟,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,685評論 2 360

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

  • 一、Iterator for...of與for...in的區(qū)別for...in只能獲取對象的鍵名猜丹,不能直接獲取鍵值...
    i騏駿閱讀 444評論 1 2
  • 20- 枚舉,枚舉原始值,枚舉相關(guān)值,switch提取枚舉關(guān)聯(lián)值 Swift枚舉: Swift中的枚舉比OC中的枚...
    iOS_恒仔閱讀 2,297評論 1 6
  • 1.import static是Java 5增加的功能,就是將Import類中的靜態(tài)方法芝加,可以作為本類的靜態(tài)方法來...
    XLsn0w閱讀 1,235評論 0 2
  • 面向?qū)ο笾饕槍γ嫦蜻^程。 面向過程的基本單元是函數(shù)射窒。 什么是對象:EVERYTHING IS OBJECT(萬物...
    sinpi閱讀 1,059評論 0 4
  • 很心疼藏杖,很心疼 可就是喜歡怎么辦? 不能打擾脉顿,卻染上一種非你不可的病翁授。固執(zhí)的喜歡和你同一種發(fā)型的男生匙握,可他們又不是...
    冰魅喜歡格子西裝閱讀 242評論 0 0