JavaScript ES6中CLASS的使用指南

　　1、前言

　　對于javascript來說，類是一種可選（而不是必須）的設(shè)計(jì)模式，而且在JavaScript這樣的[[Prototype]] 語言中實(shí)現(xiàn)類是很蹩腳的。

　　這種蹩腳的感覺不只是來源于語法，雖然語法是很重要的原因。js里面有許多語法的缺點(diǎn)：繁瑣雜亂的.prototype 引用、試圖調(diào)用原型鏈上層同名函數(shù)時的顯式偽多態(tài)以及不可靠、不美觀而且容易被誤解成“構(gòu)造函數(shù)”的.constructor。

　　除此之外，類設(shè)計(jì)其實(shí)還存在更進(jìn)一步的問題。傳統(tǒng)面向類的語言中父類和子類、子類和實(shí)例之間其實(shí)是復(fù)制操作，但是在[[Prototype]] 中并沒有復(fù)制。

　　對象關(guān)聯(lián)代碼和行為委托使用了[[Prototype]] 而不是將它藏起來，對比其簡潔性可以看出，類并不適用于JavaScript。

　　2、ES6中CLASS的使用

　　javascript傳統(tǒng)做法是當(dāng)生成一個對象實(shí)例，需要定義構(gòu)造函數(shù)，然后通過new的方式完成。

　　function StdInfo(){ this.name = "job"; this.age = 30; }StdInfo.prototype.getNames = function (){ console.log("name："+this.name); }//得到一個學(xué)員信息對象var p = new StdInfo()

　　javacript中只有對象，沒有類。它是是基于原型的語言，原型對象是新對象的模板，它將自身的屬性共享給新對象。這樣的寫法和傳統(tǒng)面向?qū)ο笳Z言差異很大，很容易讓新手感到困惑。

　　3、定義類

　　到了ES6添加了類，作為對象的模板。通過class來定義一個類：

　　//定義類class StdInfo { constructor(){ this.name = "job"; this.age = 30; } //定義在類中的方法不需要添加function getNames(){ console.log("name："+this.name); }}//使用new的方式得到一個實(shí)例對象var p = new StdInfo();

　　上面的寫法更加清晰、更像面向?qū)ο缶幊痰恼Z法，看起來也更容易理解。

　　定義的類只是語法糖，目的是讓我們用更簡潔明了的語法創(chuàng)建對象及處理相關(guān)的繼承。

　　//定義類class StdInfo { //...}console.log(typeof StdInfo); //functionconsole.log(StdInfo === StdInfo.prototype.constructor); //true

　　從上面的測試中可以看出來，類的類型就是一個函數(shù)，是一個“特殊函數(shù)”，指向的是構(gòu)造函數(shù)。

　　函數(shù)的定義方式有函數(shù)聲明和函數(shù)表達(dá)式兩種，類的定義方式也有兩種，分別是：類聲明和類表達(dá)式。

　　4、類聲明

　　類聲明是定義類的一種方式，使用關(guān)鍵字class，后面跟上類名，然后就是一對大括號。把這一類需要定義的方法放在大括號中。

　　//定義類，可以省略constructorclass StdInfo { getNames(){ console.log("name："+this.name); }}// -------------------------------------//定義類，加上constructorclass StdInfo { //使用new定義實(shí)例對象時，自動調(diào)用這個函數(shù)，傳入?yún)��?shù) constructor(name,age){ this.name = name; this.age = age; } getNames(){ console.log("name："+this.name); }}//定義實(shí)例對象時，傳入?yún)��?shù)var p = new StdInfo("job",30)

　　constructor是一個默認(rèn)方法，使用new來定義實(shí)例對象時，自動執(zhí)行constructor函數(shù)，傳入所需要的參數(shù),執(zhí)行完constructor后自動返回實(shí)例對象。

　　一個類中只能有一個constructor函數(shù)，定義多個會報(bào)錯。

　　constructor中的this指向新創(chuàng)建的實(shí)例對象，利用this往新創(chuàng)建的實(shí)例對象擴(kuò)展屬性。

　　在定義實(shí)例對象時，不需要在初始化階段做一些事，可以不用顯示的寫constructor函數(shù)。如果沒有顯式定義，一個空的constructor方法會被默認(rèn)添加，constructor(){}

　　5、類表達(dá)式

　　類表達(dá)式是定義類的另一種形式，類似于函數(shù)表達(dá)式，把一個函數(shù)作為值賦給變量。可以把定義的類賦值給一個變量，這時候變量就為類名。class關(guān)鍵字之后的類名可有可無，如果存在，則只能在類內(nèi)部使用。

　　定義類 class后面有類名：

　　const People = class StdInfo { constructor(){ console.log(StdInfo); //可以打印出值，是一個函數(shù) }}new People();new StdInfo(); //報(bào)錯，StdInfo is not defined；

　　定義類 class后面沒有類名：

　　const People = class { constructor(){ }}new People();

　　立即執(zhí)行的類：

　　const p = new class { constructor(name,age){ console.log(name,age); }}("job",30)

　　立即執(zhí)行的類，在類前要加上new。p為類的實(shí)例對象。

　　6、不存在變量提升

　　定義類不存在變量提升，只能先定義類后使用，跟函數(shù)聲明有區(qū)別的。

　　//-----函數(shù)聲明-------//定義前可以先使用，因?yàn)楹瘮?shù)聲明提升的緣故，調(diào)用合法。func();function func(){}//-----定義類---------------new StdInfo(); //報(bào)錯，StdInfo is not definedclass StdInfo{}

　　7、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()，則會報(bào)錯 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í)例時會報(bào)錯(this is not defined)。這是因?yàn)樽宇悰]有自己的this對象，而是繼承父類的this對象，然后對其進(jìn)行加工。如果不調(diào)用super方法，子類就得不到this對象。

　　8、總結(jié)

　　好了，以上就是對ES6中類的簡單總結(jié)學(xué)習(xí)，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對的支持。

【JavaScript ES6中CLASS的使用指南】相關(guān)文章：

如何調(diào)試javascript腳本呢07-19

javascript跨域訪問的方法07-19

亞偉中文速錄機(jī)使用指南07-25

2023年戶外野營使用指南針技巧08-04

2022中層管理者在企業(yè)中的作用03-15

在word中畫圖的步驟04-22

速記培訓(xùn)中的騙術(shù)03-19

演講中的轉(zhuǎn)折技巧07-22

交際中關(guān)于說話的技巧04-12

粵語中的親屬稱謂06-06