js實現繼承的幾種方法

繼承

在ECMAScript中繼承主要是依靠原型鏈來實現的。

• 實現繼承的方法

利用原型讓一個引用類型繼承另外一個引用類型的屬性和方法

什麼是原型鏈

• 先要了解構造函數、原型、和實例的關係：

  <font color="red">每個構造函數都有一個原型對象，原型對象都包含一個指向構造函數的指針，實例都包含一個指向原型對象的內部指針。</font>

• 實現原型鏈

  假如原型對象等於另外一個類型的實例，此時該原型對象將包含指向另外一個原型的指針，相應的另外一個原型中也包含着一個指針指向另外一個構造函數的指針。這樣層層遞進，就構成了實例與原型之間的鏈條。這就是原型鏈的基本概念。

• 判斷原型和實例的關係
  能夠經過兩種方式來肯定原型和實例之間關係。

  1. 使用instanceof操做符，只要用這個操做符來測試實例和原型鏈中出現的構造函數，結果就必定返回true。

  alert(instance instanceof Object); //true

  1. 使用isprototypeOf()方法，一樣只要是原型鏈中出現過得原型，均可以說是原型鏈所派生的實例的原型。isportotypeOf()也會返回true

alert(Object.prototype.isPrototypeOf(instance)); //true

全部引用類型都默認繼承了Object

1. 原型鏈存在的問題

   1. 在經過原型來實現繼承時，原型實際上會變成另外一個類型的實例。原先的實例屬性就變成了如今的原型屬性了。

      function SuperType(){
          this.color=["red","blue","green"]
      }
      
      function SubType(){
      }
      SubType.prototype = new SuperType();//繼承了SuperType();
      
      var instance1 = new SubType();
      instance1.color.push("black");
      console.log(instance1.color); //"red,blue,green,black"
      
      var instance2 = new SubType();
      console.log(instance2.color); //"red,blue,green,black"

SuperType構造函數定義了一個colors屬性，SuperType的每一個實例都會有各自包含本身數組的color屬性。當SubType經過原型鏈繼承了SuperType以後，subType.prototype就變成了SuperType的一個實例，所以它也就擁有了本身的color屬性。那SubType的全部實例都會共享這個color屬性。
2. 在建立子類型的實例時，不能向超類型的構造函數中傳遞參數。

實現繼承的方法

1. 借用構造函數

解決原型中包含引用類型所帶來的問題的過程當中，使用<font color="red">借用構造函數</font>(僞造對象或經典繼承)來實現繼承。主要是經過使用apply()和call()方法在新建立的對象上執行構造函數以下：

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

function SubType(){
    //繼承了SuperType
    SuperType.call(this);
}

var instance1 = new SubType();
instance1.color.push("black");
console.log(instance1.color) //"red, blue,green,black"

var instance2 = new SubType();
console.log(instance2.color) //"red,blue,green"

經過call()或apply()方法在新建立的SubType實例的環境下調用了SuperType構造函數

相對原型鏈，借用構造函數能夠子類型構造函數中向超類型構造函數傳遞參數以下：

function SuperType(name){
    this.name=name;
}
function SubType(){
    //繼承了SuperType 同時還傳遞了參數
    SuperType.call(this,"aa");
    //實例屬性
    this.age=29;
}

var instance = new SubType();
alert(instance.name) // aa
alert(instance.age) //29

### 2. 組合繼承
組合繼承也叫作<font color="red">僞經典繼承</font>將原型鏈和借用構造函數的技術組合到一塊，從而發揮二組之所長的一種繼承模式。思路是<font color="red">使用原型鏈實現對原型屬性和方法的繼承，而經過借用構造函數來實現對實例屬性的繼承。</font>

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

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

function SubType(name,age){
   //繼承屬性
    SuperType.call(this,name);
   this.age=age;
}

//繼承方法
SubType.prototype = new SuperType();
SubType.prototype.constructor = SubType;
SubType.prototype.sayAge = function(){
    alert(this.age);
};

var instance1 = new SubType("aaa",29);
instance1.color.push("black");
alert(instance1.color); //"red，blue，green，black"
instance1.sayName(); //"aaa"
instance1.sayAge(); // 29

 var instance2 = new SubType("ccc",30);
alert(instance2.color); //"red，blue，green"
instance2.sayName(); //"ccc"
instance2.sayAge(); // 30

組合繼承避免了原型鏈和借用構造函數的缺陷，融合了他們的優勢，成爲JavaScript中最經常使用的繼承模式。<font color="red">並且instanceOf和isPrototype()也可以識別基於組合繼承建立的對象。</font>
### 3. 原型式繼承
借用原型能夠基於已有的對象建立新對象，同時還沒必要所以建立自定義類型。

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

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

var yetAnotherPerson = Object.create(person);
yetAnotherPerson.name = "Linda";
yetAnotherPerson.friends.push("Barbie");

alert(person.friends) //"Shelby,Count,Van,Rob,Barbie"

Object.create()傳遞第二個參數

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

var anotherPerson = Object.create(person,{
    name: {
        value: "Greg"
    }
});

var anotherPerson2 = Object.create(person,{
    name: {
        value: "blue"
    }
});
alert(anotherPerson.name) //"Greg"
alert(anotherPerson2.name) //"blue"

Obeject.create()方法IE9開始兼容
### 4. 寄生式繼承
寄生式繼承的思路與寄生構造函數和工廠模式相似，即建立一個僅用於封裝繼承過程的函數，該函數在內部以某種方式來加強對象，最後再像·真地是它作了全部工做同樣返回對象。

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"

本文主要是我的摘自《javascript高級程序設計》用來作我的筆記的,請大佬們手下留情。