js 原型繼承和class繼承

摘自http://www.liaoxuefeng.com/

 

在傳統的基於Class的語言如Java、C++中，繼承的本質是擴展一個已有的Class，並生成新的Subclass。

因爲這類語言嚴格區分類和實例，繼承其實是類型的擴展。可是，JavaScript因爲採用原型繼承，咱們沒法直接擴展一個Class，由於根本不存在Class這種類型。

可是辦法仍是有的。咱們先回顧Student構造函數：

function Student(props) { this.name = props.name || 'Unnamed'; } Student.prototype.hello = function () { alert('Hello, ' + this.name + '!'); } 

以及Student的原型鏈：

如今，咱們要基於Student擴展出PrimaryStudent，能夠先定義出PrimaryStudent：

function PrimaryStudent(props) { // 調用Student構造函數，綁定this變量: Student.call(this, props); this.grade = props.grade || 1; } 

可是，調用了Student構造函數不等於繼承了Student，PrimaryStudent建立的對象的原型是：

new PrimaryStudent() ----> PrimaryStudent.prototype ----> Object.prototype ----> null 

必須想辦法把原型鏈修改成：

new PrimaryStudent() ----> PrimaryStudent.prototype ----> Student.prototype ----> Object.prototype ----> null 

這樣，原型鏈對了，繼承關係就對了。新的基於PrimaryStudent建立的對象不但能調用PrimaryStudent.prototype定義的方法，也能夠調用Student.prototype定義的方法。

若是你想用最簡單粗暴的方法這麼幹：

PrimaryStudent.prototype = Student.prototype;

是不行的！若是這樣的話，PrimaryStudent和Student共享一個原型對象，那還要定義PrimaryStudent幹啥？

咱們必須藉助一箇中間對象來實現正確的原型鏈，這個中間對象的原型要指向Student.prototype。爲了實現這一點，參考道爺（就是發明JSON的那個道格拉斯）的代碼，中間對象能夠用一個空函數F來實現：

// PrimaryStudent構造函數: function PrimaryStudent(props) { Student.call(this, props); this.grade = props.grade || 1; } // 空函數F: function F() { } // 把F的原型指向Student.prototype: F.prototype = Student.prototype; // 把PrimaryStudent的原型指向一個新的F對象，F對象的原型正好指向Student.prototype: PrimaryStudent.prototype = new F(); // 把PrimaryStudent原型的構造函數修復爲PrimaryStudent: PrimaryStudent.prototype.constructor = PrimaryStudent; // 繼續在PrimaryStudent原型（就是new F()對象）上定義方法： PrimaryStudent.prototype.getGrade = function () { return this.grade; }; // 建立xiaoming: var xiaoming = new PrimaryStudent({ name: '小明', grade: 2 }); xiaoming.name; // '小明' xiaoming.grade; // 2 // 驗證原型: xiaoming.__proto__ === PrimaryStudent.prototype; // true xiaoming.__proto__.__proto__ === Student.prototype; // true // 驗證繼承關係: xiaoming instanceof PrimaryStudent; // true xiaoming instanceof Student; // true 

用一張圖來表示新的原型鏈：

注意，函數F僅用於橋接，咱們僅建立了一個new F()實例，並且，沒有改變原有的Student定義的原型鏈。

若是把繼承這個動做用一個inherits()函數封裝起來，還能夠隱藏F的定義，並簡化代碼：

function inherits(Child, Parent) { var F = function () {}; F.prototype = Parent.prototype; Child.prototype = new F(); Child.prototype.constructor = Child; } 

這個inherits()函數能夠複用：

function Student(props) { this.name = props.name || 'Unnamed'; } Student.prototype.hello = function () { alert('Hello, ' + this.name + '!'); } function PrimaryStudent(props) { Student.call(this, props); this.grade = props.grade || 1; } // 實現原型繼承鏈: inherits(PrimaryStudent, Student); // 綁定其餘方法到PrimaryStudent原型: PrimaryStudent.prototype.getGrade = function () { return this.grade; };

小結

JavaScript的原型繼承實現方式就是：

1. 定義新的構造函數，並在內部用call()調用但願「繼承」的構造函數，並綁定this；

2. 藉助中間函數F實現原型鏈繼承，最好經過封裝的inherits函數完成；

3. 繼續在新的構造函數的原型上定義新方法。

已屬於懵逼狀態。。。

class繼承

在上面咱們看到了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定義對象的另外一個巨大的好處是繼承更方便了。想想咱們從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這個工具。