ES6中的Class

JS語法中起始是原生不怎么支持面向?qū)ο蟮模械拿嫦驅(qū)ο笃鹪淳ㄟ^一個構(gòu)造函數(shù)氨鹏,這一點和JAVA等語言原生支持面向?qū)ο蟮恼Z言有很大的不同嗽交。

通常生成一個對象的傳統(tǒng)方式就是通過構(gòu)造函數(shù),這也是JS唯一面向的對象唯一起點捕传。

function Point(x, y){
this.x = x;
this.y = y;
}

Point.prototype.toString = function(){
return '(' + this.x + ', ' + this.y + ')';
};

var p = new Point(1,3);
注意 這時ES5的原生寫法筐骇, 在接下來的篇幅我們會詳細接受ES6中 關(guān)鍵字CLASS的使用方法债鸡。

在ES6中使用class和 es6其實再本質(zhì)上沒有任何的區(qū)別,都是通過構(gòu)造函數(shù)來做文章铛纬,只不過class的使用更符合類似向我這種通過JAVA轉(zhuǎn)過來的使用習慣厌均。

class Point{
constructor(x, y){
this.x = x;
this.y = y;
}

toString(){
return '(' + this.x + ', ' + this.y + ')';
}
}
基本上來講 class已經(jīng)是構(gòu)造函數(shù)的另外一種寫法,有幾點不同之處在于

class中的函數(shù) 基本不用逗號來區(qū)別
Constructor toString 等方法都不需要加上function 直接起一個函數(shù)名并 定義其中方法即可
class Point{
}

typeof Point // function
Point === Point.prototype.constructor // true
在構(gòu)造函數(shù)的prototype屬性告唆,在ES6的類上面繼續(xù)存在棺弊,實際上所有定義再類的方法都是定義再類的prototype熟悉上面。

調(diào)用類的實例上面的方法其實就是調(diào)用原型的方法擒悬。

ES6與ES5不同之處在于 所有定義在class的方法都是不可枚舉的模她,但是所有ES5 prototype上的方法都是可枚舉的。

  1. 嚴格模式

類和模塊的內(nèi)部懂牧,默認都是嚴格模式侈净,所以不需要 use strict來指定運行模式。起始ES6已經(jīng)慢慢的將整個語言提升為嚴格模式了

  1. 類的實例對象

與ES5一樣僧凤,實例的屬性除非顯示定義再其本身(this對象上)畜侦,否則都是定義在原型上。

class Point{
constructor(x, y){
this.x = x;
this.y = y;
}

toString(){
return '(' + this.x + ',' + this.y + ')';
}
}

var point = new Point(2, 3);
point.toString(); /// (2躯保, 3)旋膳;

point.hasOwnProperty('x'); // true
point.hasOwnProperty('y'); // true
point.hasOwnProperty('toString'); // false 定義再Point的原型對象上
point.proto.hasOwnProperty('toString'); // true 對象的原型對象 proto
所有的類的實例共享一個原型對象 這意味可以通過實例的 proto 屬性添加方法

  1. this的指向

js最讓人頭疼的便是this的指向途事, 在類的方法內(nèi)部如果含有this验懊,它默認指向類的實例。但是尸变,一旦單獨來使用該方法鲁森,this很可能會改變

class Logger{
printName(name = 'there'){
this.print(Hello ${name});// 1. 默認this指向的是Logger的實例
}

print(text){
console.log(text);
}
}

const logger = new Logger();
const {printName} = logger();
printName();// 2. 因為在調(diào)用函數(shù) 導致this 丟失了
因為語言設計的緣故導致this會指向該方法運行的所在的環(huán)境,

解決方案一般有兩種:

講方法綁定 再構(gòu)造方法中綁定this 振惰,這樣就不會找不到print方法
第二種解決方法是使用箭頭函數(shù)

  1. Class的getter setter方法

通過使用類 可以使用get和set關(guān)鍵字,對某個屬性設置存值函數(shù)和取值函數(shù)垄懂,攔截該屬性的存取行為

  1. Class的靜態(tài)方法

類的靜態(tài)方法只能通過類來調(diào)用
父類的靜態(tài)方法骑晶,可以被子類繼承

鏈接:http://www.reibang.com/p/40e92342e81d
來源:簡書
著作權(quán)歸作者所有痛垛。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請注明出處桶蛔。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末匙头,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子仔雷,更是在濱河造成了極大的恐慌蹂析,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,000評論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件碟婆,死亡現(xiàn)場離奇詭異电抚,居然都是意外死亡,警方通過查閱死者的電腦和手機竖共,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,745評論 3 399
  • 文/潘曉璐 我一進店門蝙叛,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人公给,你說我怎么就攤上這事借帘。” “怎么了淌铐?”我有些...
    開封第一講書人閱讀 168,561評論 0 360
  • 文/不壞的土叔 我叫張陵肺然,是天一觀的道長。 經(jīng)常有香客問我腿准,道長际起,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 59,782評論 1 298
  • 正文 為了忘掉前任释涛,我火速辦了婚禮加叁,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘唇撬。我一直安慰自己它匕,他們只是感情好,可當我...
    茶點故事閱讀 68,798評論 6 397
  • 文/花漫 我一把揭開白布窖认。 她就那樣靜靜地躺著豫柬,像睡著了一般。 火紅的嫁衣襯著肌膚如雪扑浸。 梳的紋絲不亂的頭發(fā)上烧给,一...
    開封第一講書人閱讀 52,394評論 1 310
  • 那天,我揣著相機與錄音喝噪,去河邊找鬼础嫡。 笑死,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的榴鼎。 我是一名探鬼主播伯诬,決...
    沈念sama閱讀 40,952評論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼巫财!你這毒婦竟也來了盗似?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,852評論 0 276
  • 序言:老撾萬榮一對情侶失蹤平项,失蹤者是張志新(化名)和其女友劉穎赫舒,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體闽瓢,經(jīng)...
    沈念sama閱讀 46,409評論 1 318
  • 正文 獨居荒郊野嶺守林人離奇死亡接癌,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,483評論 3 341
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了鸳粉。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片扔涧。...
    茶點故事閱讀 40,615評論 1 352
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖届谈,靈堂內(nèi)的尸體忽然破棺而出枯夜,到底是詐尸還是另有隱情,我是刑警寧澤艰山,帶...
    沈念sama閱讀 36,303評論 5 350
  • 正文 年R本政府宣布湖雹,位于F島的核電站,受9級特大地震影響曙搬,放射性物質(zhì)發(fā)生泄漏摔吏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,979評論 3 334
  • 文/蒙蒙 一纵装、第九天 我趴在偏房一處隱蔽的房頂上張望征讲。 院中可真熱鬧,春花似錦橡娄、人聲如沸诗箍。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,470評論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽滤祖。三九已至,卻和暖如春瓶籽,著一層夾襖步出監(jiān)牢的瞬間匠童,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,571評論 1 272
  • 我被黑心中介騙來泰國打工塑顺, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留汤求,地道東北人。 一個月前我還...
    沈念sama閱讀 49,041評論 3 377
  • 正文 我出身青樓,卻偏偏與公主長得像首昔,于是被迫代替她去往敵國和親寡喝。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 45,630評論 2 359

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

  • class是創(chuàng)建類對象與實現(xiàn)類繼承的語法糖勒奇,旨在讓ES5中對象原型的寫法更加清晰,易讀巧骚。 基本使用: clas...
    二狗的小仙女閱讀 393評論 1 0
  • ES6中的class 簡介 JS語法中起始是原生不怎么支持面向?qū)ο蟮纳薜撸械拿嫦驅(qū)ο笃鹪淳ㄟ^一個構(gòu)造函數(shù),這一點...
    人失格閱讀 628評論 0 3
  • JS是一種基于對象的語言劈彪,要實現(xiàn)面向?qū)ο罂⒈模瑢懛ǜ鷤鹘y(tǒng)的面向?qū)ο笥泻艽蟮牟町悺S6引入了Class語法糖沧奴,使得JS...
    開始懂了_317閱讀 6,876評論 0 4
  • ES6發(fā)布以來痘括,給前端開發(fā)人員帶了不少的驚喜,它包含了一些很贊的特性滔吠,極大的方便了開發(fā)纲菌,class便是其中之一。在...
    離尤尤閱讀 4,850評論 2 10
  • 比起之前的《夏洛特煩惱》靠意淫和自我催眠疮绷,《情圣》是在自我解嘲中回歸無奈現(xiàn)實翰舌,本質(zhì)上都是一個結(jié)婚多年、婚姻平淡到需...
    董玲閱讀 178評論 0 0