JavaScript的對象模型是基于原型實現的,特點是簡單,缺點是理解起來比傳統的類-實例模型要困難,最大的缺點是繼承的實現需要編寫大量代碼,并且需要正確實現原型鏈。
有沒有更簡單的寫法?有!
新的關鍵字class
從ES6開始正式被引入到JavaScript中。class
的目的就是讓定義類更簡單。
我們先回顧用函數實現Student的方法:
function Student(name) { this.name = name;}Student.prototype.hello = function () { alert('Hello, ' + this.name + '!');}
如果用新的class
關鍵字來編寫Student
,可以這樣寫:
class Student { constructor(name) { this.name = name; } hello() { alert('Hello, ' + this.name + '!'); }}
比較一下就可以發現,class
的定義包含了構造函數constructor
和定義在原型對象上的函數hello()
(注意沒有function
關鍵字),這樣就避免了Student.prototype.hello = function () {...}
這樣分散的代碼。
最后,創建一個Student對象代碼和前面章節完全一樣:
var xiaoming = new Student('小明');xiaoming.hello();
class繼承
用class定義對象的另一個巨大的好處是繼承更方便了。想一想我們從Student
派生一個PrimaryStudent
需要編寫的代碼量。現在,原型繼承的中間對象,原型對象的構造函數等等都不需要考慮了,直接通過extends
來實現:
class PrimaryStudent extends Student { constructor(name, grade) { super(name); // 記得用super調用父類的構造方法! this.grade = grade; } myGrade() { alert('I am at grade ' + this.grade); }}
注意PrimaryStudent
的定義也是class關鍵字實現的,而extends
則表示原型鏈對象來自Student
。子類的構造函數可能會與父類不太相同,例如,PrimaryStudent
需要name
和grade
兩個參數,并且需要通過super(name)
來調用父類的構造函數,否則父類的name
屬性無法正常初始化。
PrimaryStudent
已經自動獲得了父類Student
的hello
方法,我們又在子類中定義了新的myGrade
方法。
ES6引入的class和原有的JavaScript原型繼承有什么區別呢?實際上它們沒有任何區別,class的作用就是讓JavaScript引擎去實現原來需要我們自己編寫的原型鏈代碼。簡而言之,用class的好處就是極大地簡化了原型鏈代碼。
你一定會問,class這么好用,能不能現在就用上?
現在用還早了點,因為不是所有的主流瀏覽器都支持ES6的class。如果一定要現在就用上,就需要一個工具把class
代碼轉換為傳統的prototype
代碼,可以試試Babel這個工具。
練習
請利用class
重新定義Cat
,并讓它從已有的Animal
繼承,然后新增一個方法say()
,返回字符串 'Hello, xxx!'
。
新聞熱點
疑難解答