在傳統的基于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; Clid.prototype = new F(); Clid.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函數完成；

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

轉載于:https://www.cnblogs.com/zengweuwu/p/10742140.html

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的javaScript面向对象编程学习（二）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。