您好,登錄后才能下訂單哦!
這篇文章主要講解了JavaScript ES6 Class類的實現(xiàn)方法,內(nèi)容清晰明了,對此有興趣的小伙伴可以學(xué)習(xí)一下,相信大家閱讀完之后會有幫助。
JavaScript ES6之前的還沒有Class類的概念,生成實例對象的傳統(tǒng)方法是通過構(gòu)造函數(shù)。
例如:
function Mold(a,b){ this.a=a; this.b=b; } Mold.prototype.count=function(){ return this.a+this.b; }; let sum=new Mold(1,2); console.log(sum.count()) //3
這中寫法跟傳統(tǒng)的面向?qū)ο笳Z言差異較大,寫起來也比較繁雜。
ES6提供了更加接近其他語言的寫法,引入了Class(類)的概念,作為對象的模板,可以通過class關(guān)鍵字,定義類(類似python、java等);
當(dāng)然ES6的大部分功能再ES5都能實現(xiàn),ES6的class可以看作是一個語法糖,只是新的class定義類的寫法讓對象原型的寫法更加簡單明了、更接近與面向?qū)ο蟮木幊趟枷搿Ec上面ES5寫的類使用ES6實現(xiàn),例如:
class Mold{ constructor(a,b){ this.a=a; this.b=b; } count(){ return this.a+this.b; } } let sum=new Mold(1,2); console.log(sum.count()) //3
這里ES6的類,只需用class定義,并且類的方法不需要用function定義;還有ES6的constructor方法,代表這該類的構(gòu)造方法;并且它的this關(guān)鍵字指向著實例對象。這里ES5的構(gòu)造函數(shù)Mold,相當(dāng)于ES6Mold類的constructor方法。
constructor
ES6實例對象的構(gòu)造函數(shù)就是該類本身;并且當(dāng)我們new 類名()就是執(zhí)行了constructor這個函數(shù)。
例如:
class Mold{ constructor(){ console.log("aaa") } } let m=new Mold();// aaa console.log(m.constructor===Mold);//true
上面代碼Mold類的constructor,實例化對象時執(zhí)行默認(rèn)constructor;
任何對象都有構(gòu)造函數(shù),并且構(gòu)造函數(shù)與當(dāng)前對象的類是相同;
例如:
let arr=new Array(); console.log(arr.constructor===Array);//true let str=new String(); console.log(str.constructor===String);//true let obj=new Object(); console.log(obj.constructor===Object);//true
2. 類的繼承 extends
繼承父類后,子類會繼承父類所有的方法和屬性(包括靜態(tài)方法和屬性)
如果子類沒有定義constructor方法,會默認(rèn)被添加該方法
任何子類都有constructor方法;
例如:
//class 類名 extends 被繼承的類{} Class Father{ constructor(){ } sum(){ console.log("abc"); } static fn(){ console.log("hello") } } Class Son extends Father{ } let s=new Son(); s.sum()//abc,繼承了父類的sum()方法 Son.fn()//hello 繼承了父類的靜態(tài)方法fn()
繼承后的子類方法的三種處理:
1). 完全繼承,不需要重寫這個方法,子類執(zhí)行繼承方法內(nèi)容與父類相同
2). 重寫覆蓋,只需要在這個類中重寫這個方法就可以覆蓋繼承過來的內(nèi)容
3). 加工,子類可以用super調(diào)用父類的方法或?qū)傩赃M(jìn)行加工,再加上子類自己的方法和屬性
3. super
調(diào)用父類的構(gòu)造函數(shù)直接使用super(),并且可以傳參;
子類的構(gòu)造函數(shù)中,只有調(diào)用了super之后才可以使用this關(guān)鍵字,否則會報錯;
例如:
//super.父類函數(shù)(); class Father{ constructor(){ console.log("bbb"); } } class Son extends Father{ constructor(x){ this.x=x;//ReferenceError,報錯 super(); this.x=x;//正確 } } let sum=new Son();//bbb
4. 類的static靜態(tài)
在屬性或方法前面使用 static定義類的靜態(tài)屬性和方法;
所有的靜態(tài)屬性和靜態(tài)方法都不能通過實例化的對象調(diào)用;
需要通過類來調(diào)用,靜態(tài)屬性和靜態(tài)方法是類的專屬屬性和方法,和實例化對象無關(guān),比如數(shù)組和數(shù)學(xué)方法中的:Array.from();Math.random()。
例如:
class Mold{ static x=0; y=1; static fn1(){ console.log("aaa") } fn2(){ console.log("bbb"); } } let m=new Mold(); console.log(m.x,m.y);//undefined , 1 m.fn1(); // TypeError m.fn2(); // bbb //需要通過類來調(diào)用 Mold.fn1(); //aaa console.log(Mold.x);//0
靜態(tài)的使用場景:
一般靜態(tài)的方法是用來解決一系列該類型的方法;
解決具體類型的方法,不是解決某個具體對象的方法
靜態(tài)屬性,一般用于存儲該類型的一系列通用的屬性變量
這種存儲,在類創(chuàng)建的時候就已經(jīng)變成全局的了,可在任何地方調(diào)用,并且不會被自動銷毀
看完上述內(nèi)容,是不是對JavaScript ES6 Class類的實現(xiàn)方法有進(jìn)一步的了解,如果還想學(xué)習(xí)更多內(nèi)容,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。