ES6-class

javascript的語言傳統(tǒng)方法是通過構(gòu)造函數(shù),定義并生成新的對象:

function point(x,y){

?this.x = x;

this.y = y;

}

point.prototype.toString = function(){

? return '('+this.x+this.y+')'

}

var ?p = ?new point(1,2);

p.toString();// (1,2)

es6提供了更接近傳統(tǒng)語言的寫法恕刘,引入了class(類)的概念,作為對象的模板温学。上面的代碼用es6可以改寫成如下方式:

class point {

constructor (x,y) {//構(gòu)造方法

//該方法是類默認(rèn)的方法,如果沒有顯示的聲明舷丹,一個空的構(gòu)造方法也會被默認(rèn)添加的葡幸。

? ?this.x = x;

? ?this.y = y;

}

toString () {

return '('+this.x+this.y+')'

}

toValue(){

}

}

point類除了構(gòu)造方法氓仲,還定義了一個toString方法。注意鳍烁,定義“類”的方法的時候叨襟,前面不需要加上function這個關(guān)鍵字,直接把函數(shù)定義放進(jìn)去了就可以了幔荒。另外糊闽,方法之間不需要逗號分隔梳玫,加了會報錯。

類的數(shù)據(jù)類型就是函數(shù)右犹,類本身就是指向構(gòu)造函數(shù)提澎。

使用的時候,也是直接對類使用new命令念链,跟構(gòu)造函數(shù)完全一致盼忌。

var m =new point(1,2);

m.toString();//(1,2)

構(gòu)造函數(shù)的prototype屬性,在es6的類上面繼續(xù)存在钓账。事實上類的所有方法都定義在這個屬性上面碴犬。

point.prototype = {

? ?toString(){},

? ?toValue(){}

}

在類的實例上調(diào)用,就是調(diào)用原型上的方法梆暮。

class B{}

let b = new B();

b.constructor === b.prototype.constructor //true

由于類的方法都定義在prototype對象上面服协,所有類的新方法的添加都可以通過這個對象添加。Object.assign方法可以很方便的一次向類添加多個方法啦粹。

class Point {


}

Object.assign(Point.prototype,{

toString(){},

toValue(){}

});

prototype對象的construcor屬性偿荷,直接指向類本身,另外唠椭,類內(nèi)部定義的方法是不可以枚舉的跳纳,在es5中是可以枚舉的。

與es5一樣贪嫂,實例的屬性除非顯示的定義在其本身(通過this)寺庄,否則都是定義在原型上的,即在class上面

//定義類 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?classPoint{constructor(x,y){this.x=x;this.y=y;}toString(){return'('+this.x+', '+this.y+')';}}


var point=newPoint(2,3);


point.toString()// (2, 3)


point.hasOwnProperty('x')// true


point.hasOwnProperty('y')// true


point.hasOwnProperty('toString')// false


point.__proto__.hasOwnProperty('toString')// true

class 不存在變量的提升 必須保證先聲明在前調(diào)用在后力崇,子類必須在父類的后面?

let Foo = class {}

class Bar extends Foo{//類的繼承

}


類的繼承 extends

class ColorPoint extends Point {

? constructor(x,y,color){

? ?super(x,y);//調(diào)用父類的構(gòu)造函數(shù)

? ?this.color = color;

? }

toString () {

return this.color+''+super.toString()//調(diào)用父級的方法

}

}

上面代碼中斗塘,constructor方法和toString方法之中,都出現(xiàn)了super關(guān)鍵字亮靴,它在這里表示父類的構(gòu)造函數(shù)馍盟,用來新建父類的this對象。子類必須在constructor方法中調(diào)用super方法茧吊,否則新建實例時會報錯贞岭。這是因為子類沒有自己的this對象,而是繼承父類的this對象搓侄,然后對其進(jìn)行加工瞄桨。如果不調(diào)用super方法,子類就得不到this對象讶踪。





最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末讲婚,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子俊柔,更是在濱河造成了極大的恐慌筹麸,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,376評論 6 491
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件雏婶,死亡現(xiàn)場離奇詭異物赶,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)留晚,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,126評論 2 385
  • 文/潘曉璐 我一進(jìn)店門酵紫,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人错维,你說我怎么就攤上這事奖地。” “怎么了赋焕?”我有些...
    開封第一講書人閱讀 156,966評論 0 347
  • 文/不壞的土叔 我叫張陵参歹,是天一觀的道長。 經(jīng)常有香客問我隆判,道長犬庇,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,432評論 1 283
  • 正文 為了忘掉前任侨嘀,我火速辦了婚禮臭挽,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘咬腕。我一直安慰自己欢峰,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 65,519評論 6 385
  • 文/花漫 我一把揭開白布涨共。 她就那樣靜靜地躺著纽帖,像睡著了一般。 火紅的嫁衣襯著肌膚如雪煞赢。 梳的紋絲不亂的頭發(fā)上抛计,一...
    開封第一講書人閱讀 49,792評論 1 290
  • 那天,我揣著相機(jī)與錄音照筑,去河邊找鬼吹截。 笑死,一個胖子當(dāng)著我的面吹牛凝危,可吹牛的內(nèi)容都是我干的波俄。 我是一名探鬼主播,決...
    沈念sama閱讀 38,933評論 3 406
  • 文/蒼蘭香墨 我猛地睜開眼蛾默,長吁一口氣:“原來是場噩夢啊……” “哼懦铺!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起支鸡,我...
    開封第一講書人閱讀 37,701評論 0 266
  • 序言:老撾萬榮一對情侶失蹤冬念,失蹤者是張志新(化名)和其女友劉穎趁窃,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體急前,經(jīng)...
    沈念sama閱讀 44,143評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡醒陆,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,488評論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了裆针。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片刨摩。...
    茶點故事閱讀 38,626評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖世吨,靈堂內(nèi)的尸體忽然破棺而出澡刹,到底是詐尸還是另有隱情,我是刑警寧澤耘婚,帶...
    沈念sama閱讀 34,292評論 4 329
  • 正文 年R本政府宣布罢浇,位于F島的核電站,受9級特大地震影響边篮,放射性物質(zhì)發(fā)生泄漏己莺。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,896評論 3 313
  • 文/蒙蒙 一戈轿、第九天 我趴在偏房一處隱蔽的房頂上張望凌受。 院中可真熱鬧,春花似錦思杯、人聲如沸胜蛉。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,742評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽誊册。三九已至,卻和暖如春暖璧,著一層夾襖步出監(jiān)牢的瞬間案怯,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,977評論 1 265
  • 我被黑心中介騙來泰國打工澎办, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留嘲碱,地道東北人。 一個月前我還...
    沈念sama閱讀 46,324評論 2 360
  • 正文 我出身青樓局蚀,卻偏偏與公主長得像麦锯,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子琅绅,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 43,494評論 2 348

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

  • class的基本用法 概述 JavaScript語言的傳統(tǒng)方法是通過構(gòu)造函數(shù)扶欣,定義并生成新對象。下面是一個例子: ...
    呼呼哥閱讀 4,086評論 3 11
  • ES6 class類知識點梳理 大概從幾個方面來講解ES6 class類和傳統(tǒng)的構(gòu)造函數(shù)的區(qū)別。 必須要有cons...
    sunny519111閱讀 462評論 0 1
  • 特別說明料祠,為便于查閱骆捧,文章轉(zhuǎn)自https://github.com/getify/You-Dont-Know-JS...
    殺破狼real閱讀 296評論 0 1
  • 官方中文版原文鏈接 感謝社區(qū)中各位的大力支持,譯者再次奉上一點點福利:阿里云產(chǎn)品券术陶,享受所有官網(wǎng)優(yōu)惠凑懂,并抽取幸運(yùn)大...
    HetfieldJoe閱讀 1,161評論 0 4
  • 對大部分人來說巷帝,童年是幸福的忌卤,也是快樂的,更是充滿無限回憶的楞泼。六一將至驰徊,讓我們讀讀林語堂、冰心堕阔、沈從文三位大家筆下...
    小豬婆閱讀 1,576評論 0 4