這篇文章主要介紹JavaScript原型繼承的示例分析，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)成立與2013年，是專(zhuān)業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目做網(wǎng)站、網(wǎng)站制作網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢(mèng)想脫穎而出為使命，1280元高青做網(wǎng)站,已為上家服務(wù),為高青各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話(huà):13518219792

在傳統(tǒng)的基于Class的語(yǔ)言如Java、C++中，繼承的本質(zhì)是擴(kuò)展一個(gè)已有的Class，并生成新的Subclass。
由于這類(lèi)語(yǔ)言嚴(yán)格區(qū)分類(lèi)和實(shí)例，繼承實(shí)際上是類(lèi)型的擴(kuò)展。但是，JavaScript由于采用原型繼承，我們無(wú)法直接擴(kuò)展一個(gè)Class，因?yàn)楦静淮嬖贑lass這種類(lèi)型。

但是辦法還是有的。我們先回顧Student構(gòu)造函數(shù)：

function Student(props) {
  this.name = props.name || 'Unnamed';
}

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

以及Student的原型鏈：

現(xiàn)在，我們要基于Student擴(kuò)展出PrimaryStudent，可以先定義出PrimaryStudent：

function PrimaryStudent(props) {
  // 調(diào)用Student構(gòu)造函數(shù)，綁定this變量:
  Student.call(this, props);
  this.grade = props.grade || 1;
}

但是，調(diào)用了Student構(gòu)造函數(shù)不等于繼承了Student，PrimaryStudent創(chuàng)建的對(duì)象的原型是：

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

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

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

這樣，原型鏈對(duì)了，繼承關(guān)系就對(duì)了。新的基于PrimaryStudent創(chuàng)建的對(duì)象不但能調(diào)用PrimaryStudent.prototype定義的方法，也可以調(diào)用Student.prototype定義的方法。
如果你想用最簡(jiǎn)單粗暴的方法這么干：
PrimaryStudent.prototype = Student.prototype;

是不行的！如果這樣的話(huà)，PrimaryStudent和Student共享一個(gè)原型對(duì)象，那還要定義PrimaryStudent干啥？

我們必須借助一個(gè)中間對(duì)象來(lái)實(shí)現(xiàn)正確的原型鏈，這個(gè)中間對(duì)象的原型要指向Student.prototype。為了實(shí)現(xiàn)這一點(diǎn)，參考道爺（就是發(fā)明JSON的那個(gè)道格拉斯）的代碼，中間對(duì)象可以用一個(gè)空函數(shù)F來(lái)實(shí)現(xiàn)：

// PrimaryStudent構(gòu)造函數(shù):
function PrimaryStudent(props) {
  Student.call(this, props);
  this.grade = props.grade || 1;
}

// 空函數(shù)F:
function F() {
}

// 把F的原型指向Student.prototype:
F.prototype = Student.prototype;

// 把PrimaryStudent的原型指向一個(gè)新的F對(duì)象，F(xiàn)對(duì)象的原型正好指向Student.prototype:
PrimaryStudent.prototype = new F();

// 把PrimaryStudent原型的構(gòu)造函數(shù)修復(fù)為PrimaryStudent:
PrimaryStudent.prototype.constructor = PrimaryStudent;

// 繼續(xù)在PrimaryStudent原型（就是new F()對(duì)象）上定義方法：
PrimaryStudent.prototype.getGrade = function () {
  return this.grade;
};

// 創(chuàng)建xiaoming:
var xiaoming = new PrimaryStudent({
  name: '小明',
  grade: 2
});
xiaoming.name; // '小明'
xiaoming.grade; // 2

// 驗(yàn)證原型:
xiaoming.__proto__ === PrimaryStudent.prototype; // true
xiaoming.__proto__.__proto__ === Student.prototype; // true

// 驗(yàn)證繼承關(guān)系:
xiaoming instanceof PrimaryStudent; // true
xiaoming instanceof Student; // true

用一張圖來(lái)表示新的原型鏈：

注意，函數(shù)F僅用于橋接，我們僅創(chuàng)建了一個(gè)new F()實(shí)例，而且，沒(méi)有改變?cè)械腟tudent定義的原型鏈。
如果把繼承這個(gè)動(dòng)作用一個(gè)inherits()函數(shù)封裝起來(lái)，還可以隱藏F的定義，并簡(jiǎn)化代碼：

function inherits(Child, Parent) {
  var F = function () {};
  F.prototype = Parent.prototype;
  Child.prototype = new F();
  Child.prototype.constructor = Child;
}
這個(gè)inherits()函數(shù)可以復(fù)用：
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;
}

// 實(shí)現(xiàn)原型繼承鏈:
inherits(PrimaryStudent, Student);

// 綁定其他方法到PrimaryStudent原型:
PrimaryStudent.prototype.getGrade = function () {
  return this.grade;
};

JavaScript的原型繼承實(shí)現(xiàn)方式就是：

1.定義新的構(gòu)造函數(shù)，并在內(nèi)部用call()調(diào)用希望“繼承”的構(gòu)造函數(shù)，并綁定this；
2.借助中間函數(shù)F實(shí)現(xiàn)原型鏈繼承，最好通過(guò)封裝的inherits函數(shù)完成；
3.繼續(xù)在新的構(gòu)造函數(shù)的原型上定義新方法。

以上是“JavaScript原型繼承的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！