摘要:傳統(tǒng)做法是當(dāng)生成一個(gè)對(duì)象實(shí)例,需要定義構(gòu)造函數(shù),然后通過(guò)的方式完成。如果子類中有構(gòu)造函數(shù),則必須使用調(diào)用。這是因?yàn)樽宇悰](méi)有自己的對(duì)象,而是繼承父類的對(duì)象,然后對(duì)其進(jìn)行加工。
javascript傳統(tǒng)做法是當(dāng)生成一個(gè)對(duì)象實(shí)例,需要定義構(gòu)造函數(shù),然后通過(guò)new的方式完成。
function StdInfo(){ this.name = "job"; this.age = 30; } StdInfo.prototype.getNames = function (){ console.log("name:"+this.name); } //得到一個(gè)學(xué)員信息對(duì)象 var p = new StdInfo()
javacript中只有對(duì)象,沒(méi)有類。它是是基于原型的語(yǔ)言,原型對(duì)象是新對(duì)象的模板,它將自身的屬性共享給新對(duì)象。這樣的寫(xiě)法和傳統(tǒng)面向?qū)ο笳Z(yǔ)言差異很大,很容易讓新手感到困惑。
定義類到了ES6添加了類,作為對(duì)象的模板。通過(guò)class來(lái)定義一個(gè)類:
//定義類 class StdInfo { constructor(){ this.name = "job"; this.age = 30; } //定義在類中的方法不需要添加function getNames(){ console.log("name:"+this.name); } } //使用new的方式得到一個(gè)實(shí)例對(duì)象 var p = new StdInfo();
上面的寫(xiě)法更加清晰、更像面向?qū)ο缶幊痰恼Z(yǔ)法,看起來(lái)也更容易理解。
定義的類只是語(yǔ)法糖,目的是讓我們用更簡(jiǎn)潔明了的語(yǔ)法創(chuàng)建對(duì)象及處理相關(guān)的繼承。
//定義類 class StdInfo { //... } console.log(typeof StdInfo); //function console.log(StdInfo === StdInfo.prototype.constructor); //true
從上面的測(cè)試中可以看出來(lái),類的類型就是一個(gè)函數(shù),是一個(gè)“特殊函數(shù)”,指向的是構(gòu)造函數(shù)。
函數(shù)的定義方式有函數(shù)聲明和函數(shù)表達(dá)式兩種,類的定義方式也有兩種,分別是:類聲明和類表達(dá)式。
類聲明類聲明是定義類的一種方式,使用關(guān)鍵字class,后面跟上類名,然后就是一對(duì)大括號(hào)。把這一類需要定義的方法放在大括號(hào)中。
//定義類,可以省略constructor class StdInfo { getNames(){ console.log("name:"+this.name); } } // ------------------------------------- //定義類,加上constructor class StdInfo { //使用new定義實(shí)例對(duì)象時(shí),自動(dòng)調(diào)用這個(gè)函數(shù),傳入?yún)?shù) constructor(name,age){ this.name = name; this.age = age; } getNames(){ console.log("name:"+this.name); } } //定義實(shí)例對(duì)象時(shí),傳入?yún)?shù) var p = new StdInfo("job",30)
constructor是一個(gè)默認(rèn)方法,使用new來(lái)定義實(shí)例對(duì)象時(shí),自動(dòng)執(zhí)行constructor函數(shù),傳入所需要的參數(shù),執(zhí)行完constructor后自動(dòng)返回實(shí)例對(duì)象。
一個(gè)類中只能有一個(gè)constructor函數(shù),定義多個(gè)會(huì)報(bào)錯(cuò)。
constructor中的this指向新創(chuàng)建的實(shí)例對(duì)象,利用this往新創(chuàng)建的實(shí)例對(duì)象擴(kuò)展屬性。
在定義實(shí)例對(duì)象時(shí),不需要在初始化階段做一些事,可以不用顯示的寫(xiě)constructor函數(shù)。如果沒(méi)有顯式定義,一個(gè)空的constructor方法會(huì)被默認(rèn)添加,constructor(){}
類表達(dá)式類表達(dá)式是定義類的另一種形式,類似于函數(shù)表達(dá)式,把一個(gè)函數(shù)作為值賦給變量。可以把定義的類賦值給一個(gè)變量,這時(shí)候變量就為類名。class關(guān)鍵字之后的類名可有可無(wú),如果存在,則只能在類內(nèi)部使用。
定義類 class后面有類名:
const People = class StdInfo { constructor(){ console.log(StdInfo); //可以打印出值,是一個(gè)函數(shù) } } new People(); new StdInfo(); //報(bào)錯(cuò),StdInfo is not defined;
定義類 class后面沒(méi)有類名:
const People = class { constructor(){ } } new People();
立即執(zhí)行的類:
const p = new class { constructor(name,age){ console.log(name,age); } }("job",30)
立即執(zhí)行的類,在類前要加上new。p為類的實(shí)例對(duì)象。
不存在變量提升定義類不存在變量提升,只能先定義類后使用,跟函數(shù)聲明有區(qū)別的。
//-----函數(shù)聲明------- //定義前可以先使用,因?yàn)楹瘮?shù)聲明提升的緣故,調(diào)用合法。 func(); function func(){} //-----定義類--------------- new StdInfo(); //報(bào)錯(cuò),StdInfo is not defined class StdInfo{}extends繼承
使用extends關(guān)鍵字實(shí)現(xiàn)類之間的繼承。這比在ES5中使用繼承要方便很多。
//定義類父類 class Parent { constructor(name,age){ this.name = name; this.age = age; } speakSometing(){ console.log("I can speek chinese"); } } //定義子類,繼承父類 class Child extends Parent { coding(){ console.log("coding javascript"); } } var c = new Child(); //可以調(diào)用父類的方法 c.speakSometing(); // I can speek chinese
使用繼承的方式,子類就擁有了父類的方法。
如果子類中有constructor構(gòu)造函數(shù),則必須使用調(diào)用super。
//定義類父類 class Parent { constructor(name,age){ this.name = name; this.age = age; } speakSometing(){ console.log("I can speek chinese"); } } //定義子類,繼承父類 class Child extends Parent { constructor(name,age){ //不調(diào)super(),則會(huì)報(bào)錯(cuò) this is not defined //必須調(diào)用super super(name,age); } coding(){ console.log("coding javascript"); } } var c = new Child("job",30); //可以調(diào)用父類的方法 c.speakSometing(); // I can speek chinese
子類必須在constructor方法中調(diào)用super方法,否則新建實(shí)例時(shí)會(huì)報(bào)錯(cuò)(this is not defined)。這是因?yàn)樽宇悰](méi)有自己的this對(duì)象,而是繼承父類的this對(duì)象,然后對(duì)其進(jìn)行加工。如果不調(diào)用super方法,子類就得不到this對(duì)象。
以上是對(duì)ES6中類的簡(jiǎn)單總結(jié)學(xué)習(xí),歡迎一起討論。
參考:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes
http://es6.ruanyifeng.com/#docs/class
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/80960.html
摘要:活動(dòng)結(jié)束單文件組件使用構(gòu)建工具創(chuàng)建項(xiàng)目,綜合來(lái)看單文件組件應(yīng)該是最好的定義組件的方式,而且不會(huì)帶來(lái)額外的模版語(yǔ)法的學(xué)習(xí)成本。 前端組件化開(kāi)發(fā)已經(jīng)是一個(gè)老生常談的話題了,組件化讓我們的開(kāi)發(fā)效率以及維護(hù)成本帶來(lái)了質(zhì)的提升。 當(dāng)然因?yàn)楝F(xiàn)在的系統(tǒng)越來(lái)越復(fù)雜龐大,所以開(kāi)發(fā)與維護(hù)成本就變得必須要考慮的問(wèn)題,因此滋生出了目前的三大前端框架 Vue、Angular、React。 那今天我們就來(lái)看看 V...
摘要:聊一聊設(shè)計(jì)模式在組件開(kāi)發(fā)中的應(yīng)用回想一下在你的前端生涯中是否遇到過(guò)以下問(wèn)題在寫(xiě)的時(shí)候經(jīng)常會(huì)在命名時(shí)絞盡腦汁在團(tuán)隊(duì)多人開(kāi)發(fā)中出現(xiàn)命名沖突在進(jìn)行組件化開(kāi)發(fā)時(shí)如何規(guī)范書(shū)寫(xiě)什么是是團(tuán)隊(duì)提出的一種的命名方式,通過(guò)這種命名方式可以很好地解決上面遇到的問(wèn) 聊一聊BEM設(shè)計(jì)模式在Vue組件開(kāi)發(fā)中的應(yīng)用 回想一下在你的前端生涯中是否遇到過(guò)以下問(wèn)題1.在寫(xiě)css的時(shí)候經(jīng)常會(huì)在命名class時(shí)絞盡腦汁2.在...
摘要:聊一聊設(shè)計(jì)模式在組件開(kāi)發(fā)中的應(yīng)用回想一下在你的前端生涯中是否遇到過(guò)以下問(wèn)題在寫(xiě)的時(shí)候經(jīng)常會(huì)在命名時(shí)絞盡腦汁在團(tuán)隊(duì)多人開(kāi)發(fā)中出現(xiàn)命名沖突在進(jìn)行組件化開(kāi)發(fā)時(shí)如何規(guī)范書(shū)寫(xiě)什么是是團(tuán)隊(duì)提出的一種的命名方式,通過(guò)這種命名方式可以很好地解決上面遇到的問(wèn) 聊一聊BEM設(shè)計(jì)模式在Vue組件開(kāi)發(fā)中的應(yīng)用 回想一下在你的前端生涯中是否遇到過(guò)以下問(wèn)題1.在寫(xiě)css的時(shí)候經(jīng)常會(huì)在命名class時(shí)絞盡腦汁2.在...
摘要:一引言程序員都知道,日志對(duì)于一個(gè)應(yīng)用系統(tǒng)來(lái)說(shuō)至關(guān)重要,現(xiàn)在應(yīng)該也沒(méi)有無(wú)日志的系統(tǒng)了吧。具體的日志實(shí)現(xiàn)還是需要使用不同的日志框架來(lái)完成。然后如下使用測(cè)試測(cè)試測(cè)試測(cè)試運(yùn)行結(jié)果發(fā)現(xiàn)并沒(méi)有打印出日志,這是因?yàn)槿鄙倭伺渲梦募? 一、引言 程序員都知道,日志對(duì)于一個(gè)應(yīng)用系統(tǒng)來(lái)說(shuō)至關(guān)重要,現(xiàn)在應(yīng)該也沒(méi)有無(wú)日志的系統(tǒng)了吧。很多程序員都知道 Log4j,Logback,java.util.loggi...
閱讀 3564·2023-04-26 02:05
閱讀 2003·2021-11-19 11:30
閱讀 4202·2021-09-30 09:59
閱讀 3175·2021-09-10 10:51
閱讀 2605·2021-09-01 10:30
閱讀 1470·2021-08-11 11:20
閱讀 2615·2019-08-30 15:54
閱讀 563·2019-08-30 10:49