在傳統的基于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
用一張圖來表示新的原型鏈:
<u>注意,函數F僅用于橋接,我們僅創建了一個new F()實例,而且,沒有改變原有的Student定義的原型鏈。</u>
如果把繼承這個動作用一個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;
};
</br>
小結
JavaScript的原型繼承實現方式就是:
- 定義新的構造函數,并在內部用call()調用希望“繼承”的構造函數,并綁定this;
- 借助中間函數F實現原型鏈繼承,最好通過封裝的inherits函數完成;
- 繼續在新的構造函數的原型上定義新方法。