快捷導(dǎo)航

JavaScript寄生組合式繼承原理與用法分析

更新時間：2019年01月11日 11:26:08 作者：saberVIII

這篇文章主要介紹了JavaScript寄生組合式繼承,結(jié)合實例形式分析了javascript寄生組合式繼承的原理、定義與簡單使用方法,需要的朋友可以參考下

本文實例講述了JavaScript寄生組合式繼承。分享給大家供大家參考，具體如下：

寄生組合式繼承

寄生組合式繼承，就是通過偽造對象來繼承屬性，通過原型鏈的混成形式來繼承方法。

這種技術(shù)的基本思路是：不必為了指定子類型的原型而調(diào)用超類型的構(gòu)造函數(shù)，因為我們所需要的只是超類型原型的一個副本而已(這一點正是組合繼承的問題，并且正是JavaScript這種原型式語言的強大之處，直接copy對象-原型對象)。本質(zhì)上，就是使用寄生式繼承來繼承超類型的原型，然后再將結(jié)果指定給子類型的原型。

function inheritPrototype(subType, superType){
  var prototype = Object.create(superType.prototype); //創(chuàng)建超類型原型副本
  prototype.constructor = subType;          //修改原型副本的不同屬性
  subType.prototype = prototype;           //指定原型
}
function SuperType(name){
  this.name = name;
  this.colors = ["red", "blue", "green"];
}
SuperType.prototype.sayName = function(){
  console.log(this.name);
}
function SubType(name, age){
  //繼承屬性
  SuperType.call(this, name);
  //實例屬性
  this.age = age;
}
//繼承方法
inheritPrototype(SubType, SuperType);
SubType.prototype.sayAge = function(){
  console.log(this.age);
};
var instance1 = new SubType("Nicholas", 29);
instance1.colors.push("black");
console.log(instance1.colors); //"red, blue, green, black"
instance1.sayName();      //"Nicholas"
instance1.sayAge();      //29

這里使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼，可得如下運行結(jié)果：

這個是寄生組合式繼承的最簡單形式。這個函數(shù)接收兩個參數(shù)：

1. 子類型構(gòu)造函數(shù)
2. 超類型構(gòu)造函數(shù)

在函數(shù)內(nèi)部，寄生組合式繼承最簡形式分為3個步驟：

1. 創(chuàng)建超類型原型副本；
2. 為創(chuàng)建的副本指定constructor屬性，從而彌補因為重寫SubType原型而失去的默認的constructor屬性，這個原型副本的constructor屬性變化：SuperType –> SubType；
3. 將該完善好的副本賦值給子類型的原型。

寄生組合式繼承的圖解如下：