首先需要了解原型鏈機制: 原型鏈作為實現繼承的主要方法，其基本思想就是利用原型讓一個引用類型繼承另 一個引用類型的屬性和方法.

構造函數、原型、實例之間的關系: 每個構造函數都有一個原型對象(prototype),原型對象都包含一個指向構造函數的指針(constructor),而實例都包含一個指向原型對象的內部指針(__propto__).

自我理解: 其實每個Function都是Object基類的一個實例,所以每個Function上都有一個__proto__指向了Object.prototype.當查找一個實例的屬性時，會先從這個實例的自定義屬性上找,如果沒有的話通過__proto__去實例所屬類的原型上去找,如果還沒有的話再通過原型（原型也是對象,只要是對象就有__proto__屬性）的__proto__到Object的原型上去找,一級一級的找,如果沒有就undefined(Object的__proto__返回undefined).

(一) 原型鏈繼承 :

---

function Parent(name) { this.name = name;}Parent.prototype.printName = function() {console.log('parent name:', this.name); } function Child(name) {this.name = name; } Child.prototype = new Parent('father'); Child.prototype.constructor = Child;//由于Child.prototype繼承Parent,導致constructor丟失 Child.prototype.printName = function() {console.log('child name:', this.name); } var child = new Child('son'); child.sayName(); // child name: son

這種方法存在兩個缺點：

1.子類型無法給超類型傳遞參數; 2.Child.prototype.sayName 必須寫在 Child.prototype = new Parent('father'); 之后，不然就會被覆蓋掉。 (二) 類式繼承:

---

function Parent(name) { this.name = name;}Parent.prototype.printName = function() {console.log('parent name:', this.name);}Parent.prototype.doSomthing = function() {console.log('parent do something!');} function Child(name, parentName) {Parent.call(this, parentName);this.name = name; } Child.prototype.printName = function() {console.log('child name:', this.name); } var child = new Child('son'); child.printName(); // child name: son child.doSomthing(); // TypeError: child.doSomthing is not a function

相當于 Parent 這個函數在 Child 函數中執行了一遍，并且將所有與 this 綁定的變量都切換到了 Child 上，這樣就克服了第一種方式帶來的問題。
缺點：沒有原型，每次創建一個 Child 實例對象時候都需要執行一遍 Parent 函數，無法復用一些公用函數。

(三) 組合式繼承：前兩種方式的結合

---

function Parent(name) {this.name = name; }Parent.prototype.printName = function() {console.log('parent name:', this.name); } Parent.prototype.doSomething = function() {console.log('parent do something!'); } function Child(name, parentName) {Parent.call(this, parentName);// 第二次調用this.name = name; }Child.prototype = new Parent();// 第一次調用 Child.prototype.constructor = Child; Child.prototype.printName = function() {console.log('child name:', this.name); }var child = new Child('son'); child.printName(); // child name: son child.doSomething(); // parent do something!

組合式繼承是比較常用的一種繼承方法，其背后的思路是使用原型鏈實現對原型屬性和方法的繼承，而通過借用構造函數來實現對實例屬性的繼承。

這樣，既通過在原型上定義方法實現了函數復用，又保證每個實例都有它自己的屬性。

組合式繼承是 JS 最常用的繼承模式，但組合繼承使用過程中會被調用兩次：一次是創建子類型的時候，另一次是在子類型構造函數的內部。

第一次調用構造函數顯然是沒有必要的，因為第一次調用構造函數時候不需要函數內部的那些實例屬性，這么寫只是想獲得其原型上的方法罷了，所以這時候你可能會這樣寫:

Child.prototype = Parent.prototype;

這樣寫顯然是不對的:
1.首先，你這樣寫的話相當于是子類和父類都指向同一個對象，這時候如果你添加了新的方法給 Child 但實際上 Parent 并不需要，相當于強行給 Parent 添加了一個未知的方法。
2.其次，仔細想想，這樣體現不出繼承的多態性，比如此時子類想要重寫父類的 getName 的方法，那么父類的方法也就會隨之修改，這顯然違背了多態性。

也就是說我們第一次調用構造函數的時候，其實是不管構造函數里面的內容，這是我們可以new一個空函數，將其prototype指向Parent.prototype，代碼如下:

(四) 寄生組合式繼承：

---

function Parent(name) {this.name = name; } Parent.prototype.printName = function() {console.log('parent name:', this.name); }function Child(name, parentName) {Parent.call(this, parentName); this.name = name; }function inheritPrototype(Parent, Child) {Child.prototype = Object.create(Parent.prototype); //修改Child.prototype.constructor = Child; }inheritPrototype(Parent, Child); Child.prototype.printName = function() {console.log('child name:', this.name); } Child.prototype.constructor = Child;var parent = new Parent('father'); parent.printName(); // parent name: fathervar child = new Child('son', 'father'); child.printName(); // child name: son (五) ES 6 繼承：

---

class Parent {constructor(name) {this.name = name;}doSomething() {console.log('parent do something!');}printName() {console.log('parent name:', this.name);} }class Child extends Parent {constructor(name, parentName) {super(parentName);this.name = name;}printName() {console.log('child name:', this.name);} } const child = new Child('son', 'father'); child.printName(); // child name: son child.doSomething(); // parent do something! const parent = new Parent('father'); parent.printName(); // parent name: father

總結

以上是生活随笔為你收集整理的JS-继承(es5,es6)的全部內容，希望文章能夠幫你解決所遇到的問題。

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