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

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

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

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

寄生組合式繼承

寄生組合式繼承，就是通過(guò)偽造對(duì)象來(lái)繼承屬性，通過(guò)原型鏈的混成形式來(lái)繼承方法。

這種技術(shù)的基本思路是：不必為了指定子類(lèi)型的原型而調(diào)用超類(lèi)型的構(gòu)造函數(shù)，因?yàn)槲覀兯枰闹皇浅?lèi)型原型的一個(gè)副本而已(這一點(diǎn)正是組合繼承的問(wèn)題，并且正是JavaScript這種原型式語(yǔ)言的強(qiáng)大之處，直接copy對(duì)象-原型對(duì)象)。本質(zhì)上，就是使用寄生式繼承來(lái)繼承超類(lèi)型的原型，然后再將結(jié)果指定給子類(lèi)型的原型。

function inheritPrototype(subType, superType){
  var prototype = Object.create(superType.prototype); //創(chuàng)建超類(lèi)型原型副本
  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);
  //實(shí)例屬性
  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代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼，可得如下運(yùn)行結(jié)果：

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

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

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

1. 創(chuàng)建超類(lèi)型原型副本；
2. 為創(chuàng)建的副本指定constructor屬性，從而彌補(bǔ)因?yàn)橹貙?xiě)SubType原型而失去的默認(rèn)的constructor屬性，這個(gè)原型副本的constructor屬性變化：SuperType –> SubType；
3. 將該完善好的副本賦值給子類(lèi)型的原型。

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