當前位置:才華齋>設計>網頁設計>

JavaScript ES6中CLASS的使用指南

網頁設計 閱讀(1.71W)

1、前言

JavaScript ES6中CLASS的使用指南

對於javascript來說,類是一種可選(而不是必須)的設計模式,而且在JavaScript這樣的[[Prototype]] 語言中實現類是很蹩腳的。

這種蹩腳的感覺不只是來源於語法,雖然語法是很重要的原因。js裡面有許多語法的缺點:繁瑣雜亂的otype 引用、試圖呼叫原型鏈上層同名函式時的顯式偽多型以及不可靠、不美觀而且容易被誤解成“建構函式”的tructor。

除此之外,類設計其實還存在更進一步的問題。傳統面向類的語言中父類和子類、子類和例項之間其實是複製操作,但是在[[Prototype]] 中並沒有複製。

物件關聯程式碼和行為委託使用了[[Prototype]] 而不是將它藏起來,對比其簡潔性可以看出,類並不適用於JavaScript。

2、ES6中CLASS的使用

javascript傳統做法是當生成一個物件例項,需要定義建構函式,然後通過new的方式完成。

function StdInfo(){ = "job"; = 30; }ames = function (){ ("name:"+); }//得到一個學員資訊物件var p = new StdInfo()

javacript中只有物件,沒有類。它是是基於原型的語言,原型物件是新物件的模板,它將自身的屬性共享給新物件。這樣的寫法和傳統面嚮物件語言差異很大,很容易讓新手感到困惑。

3、定義類

到了ES6添加了類,作為物件的模板。通過class來定義一個類:

//定義類class StdInfo { constructor(){ = "job"; = 30; } //定義在類中的方法不需要新增function getNames(){ ("name:"+); }}//使用new的方式得到一個例項物件var p = new StdInfo();

上面的寫法更加清晰、更像面向物件程式設計的語法,看起來也更容易理解。

定義的類只是語法糖,目的是讓我們用更簡潔明瞭的語法建立物件及處理相關的'繼承。

//定義類class StdInfo { //...}(typeof StdInfo); //(StdInfo === tructor); //true

從上面的測試中可以看出來,類的型別就是一個函式,是一個“特殊函式”,指向的是建構函式。

函式的定義方式有函式宣告和函式表示式兩種,類的定義方式也有兩種,分別是:類宣告和類表示式。

4、類宣告

類宣告是定義類的一種方式,使用關鍵字class,後面跟上類名,然後就是一對大括號。把這一類需要定義的方法放在大括號中。

//定義類,可以省略constructorclass StdInfo { getNames(){ ("name:"+); }}// -------------------------------------//定義類,加上constructorclass StdInfo { //使用new定義例項物件時,自動呼叫這個函式,傳入引數 constructor(name,age){ = name; = age; } getNames(){ ("name:"+); }}//定義例項物件時,傳入引數var p = new StdInfo("job",30)

constructor是一個預設方法,使用new來定義例項物件時,自動執行constructor函式,傳入所需要的引數,執行完constructor後自動返回例項物件。

一個類中只能有一個constructor函式,定義多個會報錯。

constructor中的this指向新建立的例項物件,利用this往新建立的例項物件擴充套件屬性。

在定義例項物件時,不需要在初始化階段做一些事,可以不用顯示的寫constructor函式。如果沒有顯式定義,一個空的constructor方法會被預設新增,constructor(){}

5、類表示式

類表示式是定義類的另一種形式,類似於函式表示式,把一個函式作為值賦給變數。可以把定義的類賦值給一個變數,這時候變數就為類名。class關鍵字之後的類名可有可無,如果存在,則只能在類內部使用。

定義類 class後面有類名:

const People = class StdInfo { constructor(){ (StdInfo); //可以列印出值,是一個函式 }}new People();new StdInfo(); //報錯,StdInfo is not defined;

定義類 class後面沒有類名:

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

立即執行的類:

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

立即執行的類,在類前要加上new。p為類的例項物件。

6、不存在變數提升

定義類不存在變數提升,只能先定義類後使用,跟函式宣告有區別的。

//-----函式宣告-------//定義前可以先使用,因為函式宣告提升的緣故,呼叫合法。func();function func(){}//-----定義類---------------new StdInfo(); //報錯,StdInfo is not definedclass StdInfo{}

7、EXTENDS繼承

使用extends關鍵字實現類之間的繼承。這比在ES5中使用繼承要方便很多。

//定義類父類class Parent { constructor(name,age){ = name; = age; } speakSometing(){ ("I can speek chinese"); }}//定義子類,繼承父類class Child extends Parent { coding(){ ("coding javascript"); }}var c = new Child();//可以呼叫父類的方法kSometing(); // I can speek chinese使用繼承的方式,子類就擁有了父類的方法。

如果子類中有constructor建構函式,則必須使用呼叫super。

//定義類父類class Parent { constructor(name,age){ = name; = age; } speakSometing(){ ("I can speek chinese"); }}//定義子類,繼承父類class Child extends Parent { constructor(name,age){ //不調super(),則會報錯 this is not defined //必須呼叫super super(name,age); } coding(){ ("coding javascript"); }}var c = new Child("job",30);//可以呼叫父類的方法kSometing(); // I can speek chinese

子類必須在constructor方法中呼叫super方法,否則新建例項時會報錯(this is not defined)。這是因為子類沒有自己的this物件,而是繼承父類的this物件,然後對其進行加工。如果不呼叫super方法,子類就得不到this物件。

8、總結

好了,以上就是對ES6中類的簡單總結學習,希望本文的內容對大家的學習或者工作能帶來一定的幫助,如果有疑問大家可以留言交流,謝謝大家對的支援。