「JavaScript」js中的繼承方法總結(jié)

Cristic 發(fā)布于2019-08-22 18:07 / 1411人閱讀

摘要：缺點(diǎn)方法都在構(gòu)造函數(shù)中定義，每次創(chuàng)建實(shí)例都會(huì)創(chuàng)建一遍方法組合繼承組合繼承融合原型鏈繼承和構(gòu)造函數(shù)的優(yōu)點(diǎn)，是中最常用的繼承模式然而組合繼承也有一個(gè)缺點(diǎn)，就是會(huì)調(diào)用兩次父構(gòu)造函數(shù)。

1.前言

本文完整代碼指路我的GitHub，歡迎star。js中的繼承方式有很多種，以下僅列出部分。

2.原型鏈繼承

代碼如下：

function Parent() {
    this.name = "jchermy";
}

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

function Child() {

}

Child.prototype = new Parent();

var child1 = new Child();
console.log(child1.getName()); //jchermy

這樣看來貌似可以完美完成繼承，然后當(dāng)屬性換成引用類型時(shí)，就會(huì)出現(xiàn)問題了，如下：

function Parent() {
    this.names = ["aa", "bb"]; //引用類型值
}

function Child() {

}

Child.prototype = new Parent();

var child1 = new Child();
child1.names.push("cc");
console.log(child1.names); //["aa","bb","cc"]

var child2 = new Child();
console.log(child2.names); //["aa","bb","cc"]

child2.names.push("dd");
console.log(child1.names) //["aa", "bb", "cc", "dd"]
console.log(child2.names);//["aa", "bb", "cc", "dd"]

var p = new Parent();
console.log(p.names); //["aa", "bb"]

由此我們可以得出原型鏈繼承的缺點(diǎn)：

引用類型的屬性被所有實(shí)例共享

在創(chuàng)建Child實(shí)例時(shí)，不能向Parent傳參

2.借用構(gòu)造函數(shù)繼承

function Parent() {
    this.names = ["aa", "bb"];
}

function Child() {
    Parent.call(this);
}

var child1 = new Child();
child1.names.push("cc");
console.log(child1.names);//["aa", "bb", "cc"]

var child2 = new Child();
console.log(child2.names);//["aa", "bb"]

child2.names.push("dd");
console.log(child1.names); //["aa", "bb", "cc"]
console.log(child2.names); //["aa", "bb", "dd"]

var p = new Parent();
p.names; //["aa", "bb"]

可以看出，借用構(gòu)造函數(shù)繼承避免了一下原型鏈繼承的問題，主要體現(xiàn)在：

避免了引用類型的屬性被所有實(shí)例共享

可以在Child中向Parent傳參

然而，借用構(gòu)造函數(shù)繼承也有缺點(diǎn)。

function Parent(name) {
    this.name = "parent "+name;
}

function Child(name) {
    this.name = "child"+name;
    Parent.call(this, name);
}

var child1 = new Child("hemin");
console.log(chil1.name); //"parent hemin"

var child2 = new Child("aa");
console.log(child2.name); //"parent aa"

缺點(diǎn)：方法都在構(gòu)造函數(shù)中定義，每次創(chuàng)建實(shí)例都會(huì)創(chuàng)建一遍方法

3.組合繼承

組合繼承融合原型鏈繼承和構(gòu)造函數(shù)的優(yōu)點(diǎn)，是JavaScript中最常用的繼承模式

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

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

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

Child.prototype = new Parent();
Child.prototype.constructor = Child;

var child1 = new Child("aa", 18);
child1.colors.push("black");

child1.name; //"aa"
child1.age; //18
child1.colors; //["red", "blue","black"]

var child2 = new Child("bb", 20);
child2.name; //"bb"
child2.age; //20
child2.colors; //["red", "blue"]

然而組合繼承也有一個(gè)缺點(diǎn)，就是會(huì)調(diào)用兩次父構(gòu)造函數(shù)。

如下：

Child.prototype = new Parent(); 
var child1 = new Child("aa", "18");

所以，在這個(gè)例子中，如果我們打印 child1 對(duì)象，我們會(huì)發(fā)現(xiàn) Child.prototype 和 child1 都有一個(gè)屬性為colors，屬性值為["red", "blue"]。

這個(gè)問題我們?cè)谙旅嬖儆懻摗?/p> 4.原型式繼承

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

var person = {
    name: "jchermy",
    friends: ["aa", "bb"]
}

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

//注意：修改person1.name的值，person2.name的值并未發(fā)生改變，
//并不是因?yàn)閜erson1和person2有獨(dú)立的 name 值，而是因?yàn)閜erson1.name = "person1"，給person1添加了 name 值，并非修改了原型上的 name 值。
person1.name = "xiaomi";
console.log(person2.name); //"jchermy"

person2.friends.push("cc");
console.log(person1.friends); //["aa", "bb", "cc"]

缺點(diǎn)：包含引用類型的屬性值始終會(huì)共享相應(yīng)的值，與原型鏈繼承一樣

5.寄生式繼承

創(chuàng)建一個(gè)僅用于封裝繼承過程的函數(shù)，該函數(shù)在內(nèi)部以某種形式做增強(qiáng)對(duì)象，最后返回對(duì)象

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

var person = {
    name: "jchermy",
    friends: ["aa", "bb"]
};

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

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

person1.friends.push("xxx");
console.log(person1.friends); // ["aa", "bb", "xxx"]
console.log(person2.friends); // ["aa", "bb", "xxx"]

缺點(diǎn):

跟借用構(gòu)造函數(shù)模式一樣，每次創(chuàng)建對(duì)象都會(huì)創(chuàng)建一遍方法

包含引用類型的屬性值始終會(huì)共享相應(yīng)的值

6.寄生組合式繼承

還記得組合繼承中提到的那些問題嗎，那么我們?cè)撊绾尉媲缶苊膺@一次重復(fù)調(diào)用呢？

如果我們不使用 Child.prototype = new Parent() ，而是間接的讓 Child.prototype 訪問到 Parent.prototype 呢？可以這樣實(shí)現(xiàn)：

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;
  }

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

  F.prototype = Parent.prototype;

  Child.prototype = new F();


  
  Child.prototype.constructor = Child;

  var child1 = new Child("xiaomi", 18);
  var child2 = new Child2("aa", 24);
  console.log(child1.name); //xiaomi
  console.log(child2.name); //aa

  child1.colors.push("black");
  child1.colors; //["red", "blue", "green", "black"]
  child2.colors; //["red", "blue", "green"];

這種方式的高效率體現(xiàn)它只調(diào)用了一次 Parent 構(gòu)造函數(shù)，并且因此避免了在 Parent.prototype 上面創(chuàng)建不必要的、多余的屬性。與此同時(shí)，原型鏈還能保持不變；因此，還能夠正常使用 instanceof 和 isPrototypeOf。開發(fā)人員普遍認(rèn)為寄生組合式繼承是引用類型最理想的繼承范式。

7.結(jié)語

如果文章對(duì)你有幫助的話，歡迎點(diǎn)贊和收藏！！有錯(cuò)誤和不合理的地方歡迎大家指正！GitHub給個(gè)star就最好啦！=（//▽//）感謝大家~