深刻學習js之——繼承的多種方式和優缺點#13

時間 2019-11-17

原文原文鏈接

深刻學習js系列是本身階段性成長的見證，但願經過文章的形式更加嚴謹、客觀地梳理js的相關知識，也但願可以幫助更多的前端開發的朋友解決問題，期待咱們的共同進步。前端

若是以爲本系列不錯，歡迎點贊、評論、轉發，您的支持就是我堅持的最大動力。數組

這篇文章咱們聊聊JavaScript中繼承微信

一、原型鏈繼承

// 建立一個構造函數 Parent
function Parent() {
  // 屬性name 賦值 kevin
  this.name = "kevin";
}
// 在構造函數的原型對象上添加 getName 方法
Parent.prototype.getName = function() {
  // 打印 name
  console.log(this.name);
};
// 建立 另外一個 構造函數
function Child() {}
// 子類的原型指向父類的實例
Child.prototype = new Parent();

// 建立子類實例
var child1 = new Child();
// 打印 name 屬性 kevin
console.log(child1.getName()); // kevin
複製代碼

這種寫法有什麼問題呢？ 1.引用類型的屬性被全部實例共享，舉個例子：閉包

function Parent() {
  // 添加的name屬性是一個數組類型 賦值 "kevin", "daisy"
  this.names = ["kevin", "daisy"];
}
// 子類構造函數
function Child() {}
// 將父類的實例對象 賦值給子類的原型對象
Child.prototype = new Parent();
// 實例化子類
var child1 = new Child();
// 子類給name 屬性添加 一個元素
child1.names.push("yayu");
console.log(child1.names); // ["kevin", "daisy", "yayu"]
// 再建立一個實例
var child2 = new Child();
console.log(child2.names); // ["kevin", "daisy", "yayu"]
複製代碼

上面的例子中，咱們使用原型繼承的方式讓 child 子類繼承 parent 的屬性而且父類的屬性是一個數組，也就是引用類型。當咱們實例化子類生成一個對象 child1的時候，child1 可以訪問父類的 name 屬性，而且向 name 屬性中添加了一個數據。當咱們再實例化一個子類 child2 時候這個時候打印 ["kevin", "daisy", "yayu"]這並非咱們想要看到的結果。app

二、借用構造函數(經典繼承)

function Parent() {
  // 添加引用類型屬性
  this.names = ["kevin", "daisy"];
}

// 子類構造函數
function Child() {
  // 內部使用call 執行 Preent 改變 父類的this指向 指向子類
  Parent.call(this);
}

var child1 = new Child();

child1.names.push("yayu");

console.log(child1.names); // ["kevin", "daisy", "yayu"]

var child2 = new Child();

console.log(child2.names); // ["kevin", "daisy"]
複製代碼

觀察上述代碼實現們發現，這種繼承的方式解決了第一種繼承方式那種引用類型的問題。一、避免了引用類型被全部的實例共享。二、能夠向父類Parent中傳參。函數

舉個例子:post

function Parent(name) {
  this.name = name;
}
function Child(name) {
  Parent.call(this, name);
}
var child1 = new Child("kevin");
console.log(child1.name); // kevin
var child2 = new Child("daisy");
console.log(child2.name); // daisy
複製代碼

上述代碼中，在建立子類實例的時候,向構造函數中傳遞了 name 參數經過這個子類的構造函數又傳參給了父類的構造函數，從而能夠按照需求進行打印名字。學習

固然這種繼承方式也是優缺點的，全部的方法都在構造函數中聲明，當咱們實例化對象的時候,每次都對會調用構造函數，從而從新建立一遍方法。ui

三、組合繼承（雙劍合璧）

原型鏈繼承和經典繼承雙劍合璧。this

// 建立 父類構造函數
function Parent(name) {
  // 接收屬性 接收name 參數
  this.name = name;
  this.colors = ["red", "blue", "green"];
}
// 在父類的原型上面添加方法
Parent.prototype.getName = function() {
  console.log(this.name);
};
// 建立子類
function Child(name, age) {
  // 子類的構造函數中 執行父類的構造函數接收參數。
  Parent.call(this, name);
  this.age = age;
}

Child.prototype = new Parent();
// 將子類的原型對象的contructor 屬性從新賦值 Child
Child.prototype.constructor = Child;

var child1 = new Child("kevin", "18");

child1.colors.push("black");

console.log(child1.name); // kevin
console.log(child1.age); // 18
console.log(child1.colors); // ["red", "blue", "green", "black"]

var child2 = new Child("daisy", "20");

console.log(child2.name); // daisy
console.log(child2.age); // 20
console.log(child2.colors); // ["red", "blue", "green"]
複製代碼

這種組合繼承的實現方式融合了構造函數和 原型鏈繼承 的優勢，是被普遍使用的一種繼承方式

4.原型式繼承

function createObj(o) {
  function F() {}
  F.prototype = o;
  return new F();
}
複製代碼

就是 ES5 Object.create 的模擬實現，將傳入的對象做爲建立的對象的原型。缺點：包含引用類型的屬性值始終都會共享相應的值，這點跟原型鏈繼承同樣。

var person = {
  name: "kevin",
  friends: ["daisy", "kelly"]
};

var person1 = createObj(person);
var person2 = createObj(person);

person1.name = "person1";
console.log(person2.name); // kevin

person1.firends.push("taylor");
console.log(person2.friends); // ["daisy", "kelly", "taylor"]
複製代碼

注意：修改 person1.name 的值，person2.name 的值並未發生改變，並非由於 person1 和 person2 有獨立的 name 值，而是由於 person1.name = 'person1'，給 person1 添加了 name 值，並不是修改了原型上的 name 值。

5. 寄生式繼承

建立一個僅用於封裝繼承過程的函數，該函數在內部以某種形式來作加強對象，最後返回對象。

function createObj(o) {
  var clone = Object.create(o);
  clone.sayName = function() {
    console.log("hi");
  };
  return clone;
}
複製代碼

缺點：跟借用構造函數模式同樣，每次建立對象都會建立一遍方法。

6. 寄生組合式繼承

爲了方便你們閱讀，在這裏重複一下組合繼承的代碼：

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

Parent.prototype.getName = function() {
  console.log(this.name);
};

function Child(name, age) {
  Parent.call(this, name);
  this.age = age;
}

Child.prototype = new Parent();

var child1 = new Child("kevin", "18");

console.log(child1);
複製代碼

組合繼承最大的缺點是會調用兩次父構造函數。

一次是設置子類型實例的原型的時候：

Child.prototype = new Parent();
複製代碼

一次在建立子類型實例的時候：

var child1 = new Child("kevin", "18");
複製代碼

回想下 new 的模擬實現，其實在這句中，咱們會執行：

Parent.call(this, name);
複製代碼

在這裏，咱們又會調用了一次 Parent 構造函數。

因此，在這個例子中，若是咱們打印 child1 對象，咱們會發現 Child.prototype 和 child1 都有一個屬性爲 colors，屬性值爲['red', 'blue', 'green']。

那麼咱們該如何精益求精，避免這一次重複調用呢？

若是咱們不使用 Child.prototype = new Parent() ，而是間接的讓 Child.prototype 訪問到 Parent.prototype 呢？

看看如何實現：

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

Parent.prototype.getName = function() {
  console.log(this.name);
};

function Child(name, age) {
  Parent.call(this, name);
  this.age = age;
}

// 關鍵的三步
var F = function() {};

F.prototype = Parent.prototype;

Child.prototype = new F();

var child1 = new Child("kevin", "18");

console.log(child1);
複製代碼

最後咱們封裝一下這個繼承方法：

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

function prototype(child, parent) {
  var prototype = object(parent.prototype);
  prototype.constructor = child;
  child.prototype = prototype;
}
// 當咱們使用的時候：
prototype(Child, Parent);
複製代碼

引用《JavaScript高級程序設計》中對寄生組合式繼承的誇讚就是：

這種方式的高效率體現它只調用了一次 Parent 構造函數，而且所以避免了在 Parent.prototype 上面建立沒必要要的、多餘的屬性。與此同時，原型鏈還能保持不變；所以，還可以正常使用 instanceof 和 isPrototypeOf。開發人員廣泛認爲寄生組合式繼承是引用類型最理想的繼承範式。