對於JS繼承詳細介紹（ 原型鏈，構造函數，組合，原型式，寄生式，寄生組合，Class extends）

這篇文章給大家分享的內容是關於對JS繼承詳細介紹（ 原型鏈，構造函數，組合，原型式，寄生式，寄生組合，Class extends），有一定的參考價值，有需要的朋友可以參考一下。

說實在話，以前我只需要知道「寄生組合繼承」是最好的，有個祖傳程式碼模版用就行。最近因為一些事情，幾個星期以來一直心心念念想整理出來。本文以《JavaScript高級程式設計》上的內容為骨架，並補充了ES6 Class的相關內容，從我認為更容易理解的角度將繼承這件事敘述出來，希望大家能有所收穫。

1. 繼承分類

先來個整體印象。如圖所示，JS中繼承可以依照是否使用object函數（在下文中會提到），將繼承分成兩部分（Object.create是ES5新增的方法，用來規範這個函數）。

其中，原型鏈繼承和原型式繼承有相同的優缺點，建構函數繼承與寄生式繼承也相互對應。寄生組合繼承基於Object.create, 同時優化了組合繼承，成為了完美的繼承方式。 ES6 Class Extends的結果與寄生組合繼承基本一致，但是實作方案又略有不同。

下面馬上進入正題。

2. 繼承方式

上圖上半區的原型鏈繼承，建構函式繼承，組合繼承，網路內容比較多，本文不作詳細描述，只指出重點。這裡給了我認為最容易理解的一篇《JS中的繼承（上）》。如果對上半區的內容不熟悉，可以先看這篇文章，再回來繼續閱讀；如果已經比較熟悉，這部分可以快速略過。另，上半區大量借用了yq前端的一篇繼承文章[1]。

2.1 原型式繼承

核心：將父類別的實例當作子類別的原型

SubType.prototype = new SuperType() 
// 所有涉及到原型链继承的继承方式都要修改子类构造函数的指向，否则子类实例的构造函数会指向SuperType。
SubType.prototype.constructor = SubType;

優點：父類別方法可以重複使用
缺點：

• 父類別的引用屬性會被所有子類別實例共用

• #子類別建構實例時不能傳遞參數

##2.2 建構子繼承

核心：將父類別建構子的內容複製給了子類別的建構子。這是所有繼承中唯一一個不涉及到prototype的繼承。

SuperType.call(SubType);

優點：和原型鏈繼承完全反過來。

• 父類別的參考屬性不會被共用

• 子類別建構實例時可以傳遞參數

#缺點：父類別的方法不能重複使用，子類別實例的方法每次都是單獨建立的。

• 2.3 組合繼承
  核心：原型式繼承與建構子繼承的組合，兼具了二者的優點。

function SuperType() {
    this.name = 'parent';
    this.arr = [1, 2, 3];
}

SuperType.prototype.say = function() { 
    console.log('this is parent')
}

function SubType() {
    SuperType.call(this) // 第二次调用SuperType
}

SubType.prototype = new SuperType() // 第一次调用SuperType

優點：

父類別的方法可以被重複使用

父類別的參考屬性不會被共享

子類別建構實例時可以傳遞參數給父類別

#缺點：

呼叫了兩次父類別的建構函數，第一次為子類別的原型添加了父類別的name, arr屬性，第二次又為子類別的建構子添加了父類別的name, arr屬性，從而覆蓋了子類別原型中的同名參數。這種被覆蓋的情況造成了性能上的浪費。

2.4 原型式繼承

核心：原型式繼承的object方法本質上是對參數物件的一個淺複製。

優點：父類別方法可以重複使用

缺點：

######父類別的參考屬性會被所有子類別實例共用########### ##子類別建置實例時不能向父類別傳遞參數#########

function object(o){
  function F(){}
  F.prototype = o;
  return new F();
}

var person = {
    name: "Nicholas",
    friends: ["Shelby", "Court", "Van"]
};

var anotherPerson = object(person);
anotherPerson.name = "Greg";
anotherPerson.friends.push("Rob");

var yetAnotherPerson = object(person);
yetAnotherPerson.name = "Linda";
yetAnotherPerson.friends.push("Barbie");
alert(person.friends);   //"Shelby,Court,Van,Rob,Barbie"

###ECMAScript 5 透過新增Object.create()方法規範化了原型式繼承。這個方法接收兩個參數:一 個用作新物件原型的物件和(可選的)一個為新物件定義額外屬性的物件。在傳入一個參數的情況下， Object.create()與 object()方法的行為相同。 ——《JAVASCript進階程式設計》######所以上文程式碼可以轉變為###

var yetAnotherPerson = object(person); => var yetAnotherPerson = Object.create(person);

###2.5 寄生式繼承######核心：使用原型式繼承獲得一個目標物件的淺複製，然後增強這個淺複製的能力。 ###優缺點：只提供一種思路，沒什麼優點###

function createAnother(original){ 
    var clone=object(original);    //通过调用函数创建一个新对象
    clone.sayHi = function(){      //以某种方式来增强这个对象
        alert("hi");
    };
    return clone;                  //返回这个对象
}

var person = {
    name: "Nicholas",
    friends: ["Shelby", "Court", "Van"]
};

var anotherPerson = createAnother(person);
anotherPerson.sayHi(); //"hi"

###2.6 寄生組合繼承######剛才說到組合繼承有一個會兩次呼叫父類別的建構子造成浪費的缺點，寄生組合繼承可以解決這個問題。 ###

function inheritPrototype(subType, superType){
    var prototype = object(superType.prototype); // 创建了父类原型的浅复制
    prototype.constructor = subType;             // 修正原型的构造函数
    subType.prototype = prototype;               // 将子类的原型替换为这个原型
}

function SuperType(name){
    this.name = name;
    this.colors = ["red", "blue", "green"];
}

SuperType.prototype.sayName = function(){
    alert(this.name);
};

function SubType(name, age){
    SuperType.call(this, name);
    this.age = age;
}
// 核心：因为是对父类原型的复制，所以不包含父类的构造函数，也就不会调用两次父类的构造函数造成浪费
inheritPrototype(SubType, SuperType);
SubType.prototype.sayAge = function(){
    alert(this.age);
}

###優缺點：這是完美的繼承方式。 ######2.7 ES6 Class extends###### 核心：ES6繼承的結果和寄生組合繼承相似，本質上，ES6繼承是一種語法糖。但是，寄生組合繼承是先建立子類別實例this對象，然後再對其增強；而ES6先將父類別實例物件的屬性和方法，加到this上面（所以必須先呼叫super方法），然後再用子類別的建構函數修改this。 ###

class A {}

class B extends A {
  constructor() {
    super();
  }
}

###ES6實作繼承的具體原理：###

class A {
}

class B {
}

Object.setPrototypeOf = function (obj, proto) {
  obj.__proto__ = proto;
  return obj;
}

// B 的实例继承 A 的实例
Object.setPrototypeOf(B.prototype, A.prototype);

// B 继承 A 的静态属性
Object.setPrototypeOf(B, A);

ES6继承与ES5继承的异同：
相同点：本质上ES6继承是ES5继承的语法糖
不同点：

• ES6继承中子类的构造函数的原型链指向父类的构造函数，ES5中使用的是构造函数复制，没有原型链指向。

• ES6子类实例的构建，基于父类实例，ES5中不是。

3. 总结

• ES6 Class extends是ES5继承的语法糖

• JS的继承除了构造函数继承之外都基于原型链构建的

• 可以用寄生组合继承实现ES6 Class extends，但是还是会有细微的差别

相关推荐：

Vue中钩子函数的具体介绍

AngularJs自定义指令可以如何来设置以及自定义指令的命名规范

以上是對於JS繼承詳細介紹（ 原型鏈，構造函數，組合，原型式，寄生式，寄生組合，Class extends）的詳細內容。更多資訊請關注PHP中文網其他相關文章！