在傳統的基于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; // truexiaoming.__proto__.__proto__ === Student.prototype; // true// 驗證繼承關系:xiaoming instanceof PrimaryStudent; // truexiaoming 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.繼續在新的構造函數的原型上定義新方法。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
