摘自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的原型繼承實現方式就是：
-
定義新的構造函數，並在內部用
call()調用希望“繼承”的構造函數，並綁定this； -
借助中間函數
F實現原型鏈繼承，最好通過封裝的inherits函數完成； -
繼續在新的構造函數的原型上定義新方法。
已屬於懵逼狀態。。。
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這個工具。