es6-class


clss類

ES6提供了更接近傳統(tǒng)語言的寫法,引入了Class(類)這個概念帽氓,作為對象的模版,通過class關(guān)鍵字俩块,可以定義類黎休。基本上玉凯,ES6的class可以看作只是一個語法糖势腮,它的絕大部分功能,ES5都可以做到漫仆,新的class寫法只是讓對象原型的寫法更加清晰捎拯,更像香香對象編程的語法而已。

定義類

實際上盲厌,類是“特殊的函數(shù)”署照,就想你能夠定義的函數(shù)表達式和函數(shù)聲明一樣門類語法有兩個組成部分:類表達式和類聲明。

類聲明

定義類的一種方法是使用類聲明吗浩。要聲明一個類建芙,你可以使用帶有class關(guān)鍵字的類名(這里是“Phone”)。

class Phone {
            constructor(brand, price) {
                this.brand = brand;
                this.price = price;
            }
        }
提升

函數(shù)聲明類聲明之間的一個重要區(qū)別在于懂扼,函數(shù)聲明會提升禁荸,類聲明不會。你首先需要聲明你的類阀湿,然后再訪問它赶熟,否則類似以下的代碼將拋出錯誤(ReferenceError)。

let p = new Phone();  //  ReferenceError
class Phone{}
構(gòu)造函數(shù)

constructor方法是一個特殊的方法陷嘴,這種方法用于創(chuàng)建和初始化一個由class創(chuàng)建的對象映砖。一個類只能擁有一個名為“constructor”的特殊方法。如果類包含多個constructor的方法罩旋,則將拋出 一個SyntaxError啊央。

一個構(gòu)造函數(shù)可以使用 super 關(guān)鍵字來調(diào)用一個父類的構(gòu)造函數(shù)。

靜態(tài)方法

static關(guān)鍵字用來定義一個類的一個靜態(tài)方法涨醋。調(diào)用靜態(tài)方法不需要實例化該類瓜饥,但不能通過一個類實例調(diào)用靜態(tài)方法。靜態(tài)方法通常用于為一個應(yīng)用程序創(chuàng)建工具函數(shù)浴骂。

class Phone {
            // 靜態(tài)屬性 static屬于類 不屬于實例
            static name = '手機'
            static change() {
                console.log('我可以改變世界乓土!');
            }
        }
        let huawei = new Phone();
        console.log(huawei.name); // undefined
        console.log(Phone.name); // 手機
繼承 extends

extends 關(guān)鍵字用于類聲明或者[類表達式]中,以創(chuàng)建一個類,該類是另一個類的子類趣苏。
語法:class ChildClass extends ParentClass { ... }

class Phone {
            constructor(brand, price) {
                this.brand = brand;
                this.price = price;
            }

            // 父類的成員屬性
            call() {
                console.log('我可以打電話');
            }
        }

        class SmartPhone extends Phone {
            // 構(gòu)造方法
            constructor(brand, price, color, size) {
                // super 就是父類中的constructor
                super(brand, price);
                this.color = color;
                this.size = size;
            }
            photo() {
                console.log("拍照");
            }
            play() {
                console.log("玩");
            }
        }
 const huawei = new SmartPhone('華為', 199, '黑色', '6.6inch')
        huawei.call();  // 我可以打電話
        huawei.photo(); // 拍照
        huawei.play(); // 玩
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末狡相,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子食磕,更是在濱河造成了極大的恐慌尽棕,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,042評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件彬伦,死亡現(xiàn)場離奇詭異滔悉,居然都是意外死亡,警方通過查閱死者的電腦和手機单绑,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 89,996評論 2 384
  • 文/潘曉璐 我一進店門回官,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人搂橙,你說我怎么就攤上這事歉提。” “怎么了区转?”我有些...
    開封第一講書人閱讀 156,674評論 0 345
  • 文/不壞的土叔 我叫張陵苔巨,是天一觀的道長。 經(jīng)常有香客問我蜗帜,道長恋拷,這世上最難降的妖魔是什么资厉? 我笑而不...
    開封第一講書人閱讀 56,340評論 1 283
  • 正文 為了忘掉前任厅缺,我火速辦了婚禮,結(jié)果婚禮上宴偿,老公的妹妹穿的比我還像新娘湘捎。我一直安慰自己,他們只是感情好窄刘,可當我...
    茶點故事閱讀 65,404評論 5 384
  • 文/花漫 我一把揭開白布窥妇。 她就那樣靜靜地躺著,像睡著了一般娩践。 火紅的嫁衣襯著肌膚如雪活翩。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,749評論 1 289
  • 那天翻伺,我揣著相機與錄音材泄,去河邊找鬼。 笑死吨岭,一個胖子當著我的面吹牛拉宗,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 38,902評論 3 405
  • 文/蒼蘭香墨 我猛地睜開眼旦事,長吁一口氣:“原來是場噩夢啊……” “哼魁巩!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起姐浮,我...
    開封第一講書人閱讀 37,662評論 0 266
  • 序言:老撾萬榮一對情侶失蹤谷遂,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后卖鲤,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體埋凯,經(jīng)...
    沈念sama閱讀 44,110評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,451評論 2 325
  • 正文 我和宋清朗相戀三年扫尖,在試婚紗的時候發(fā)現(xiàn)自己被綠了白对。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,577評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡换怖,死狀恐怖甩恼,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情沉颂,我是刑警寧澤条摸,帶...
    沈念sama閱讀 34,258評論 4 328
  • 正文 年R本政府宣布,位于F島的核電站铸屉,受9級特大地震影響钉蒲,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜彻坛,卻給世界環(huán)境...
    茶點故事閱讀 39,848評論 3 312
  • 文/蒙蒙 一顷啼、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧昌屉,春花似錦钙蒙、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,726評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至竞帽,卻和暖如春扛施,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背屹篓。 一陣腳步聲響...
    開封第一講書人閱讀 31,952評論 1 264
  • 我被黑心中介騙來泰國打工疙渣, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人抱虐。 一個月前我還...
    沈念sama閱讀 46,271評論 2 360
  • 正文 我出身青樓昌阿,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子懦冰,可洞房花燭夜當晚...
    茶點故事閱讀 43,452評論 2 348

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

  • 取值函數(shù)和存值函數(shù); class MyClass{ constructon(){} get prop(){ ret...
    吳高亮閱讀 171評論 0 0
  • 1\class的簡介:ES6 的類灶轰,完全可以看作構(gòu)造函數(shù)的另一種寫法。 class Point {// ...} ...
    燕_夢閱讀 752評論 0 0
  • javascript的語言傳統(tǒng)方法是通過構(gòu)造函數(shù)刷钢,定義并生成新的對象: function point(x,y){ ...
    overflow_hidden閱讀 299評論 0 0
  • Class 的基本語法 ECMAScript 的原生構(gòu)造函數(shù)大致有下面這些: Boolean() Number()...
    zhulichao閱讀 223評論 0 0
  • (參考自秒味課堂的視頻講解) Class 1.ES5中的原型 const Miaov = function ( )...
    黑色的五葉草閱讀 287評論 0 0