快捷導(dǎo)航

js常用的繼承--組合式繼承

更新時(shí)間：2017年03月06日 17:02:57 作者：fantasy525

本篇文章主要介紹了js常用的繼承--組合式繼承的相關(guān)知識(shí)，具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧

組合繼承有時(shí)候也叫偽經(jīng)典繼承，指的是將原型鏈和借用構(gòu)造函數(shù)技術(shù)組合到一塊，從而發(fā)揮二者之長(zhǎng)的一種繼承模式，其背后的思路是使用原型鏈實(shí)現(xiàn)對(duì)原型屬性和方法的繼承，而通過(guò)借用構(gòu)造函數(shù)來(lái)實(shí)現(xiàn)對(duì)實(shí)例屬性的繼承。這樣既通過(guò)在原型上定義方法實(shí)現(xiàn)了函數(shù)復(fù)用，又能保證每個(gè)實(shí)例都有它的自己的屬性。

 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;
 }
 SubType.prototype=new SuperType();
 SubType.prototype.constructor=SubType;
 SubType.prototype.sayAge=function(){
  console.log(this.age);
 }
 var instance1=new SubType("zxf",24);
 instance1.colors.push("black");
 console.log(instance1.colors);//["red","blue","green","black"]
 instance1.sayName();//"zxf"
 instance1.sayAge();//24
 var instance2=new SubType("jay",36);
 console.log(instance2.colors);//["red","blue","green"]
 instance2.sayName();//"jay"
 instance2.sayAge();//36

在這個(gè)例子中，supertype構(gòu)造函數(shù)定義了兩個(gè)屬性，name和colors。supertype的原型定義了一個(gè)方法sayname()。subtype構(gòu)造函數(shù)調(diào)用supertype時(shí)傳入了name參數(shù)，緊接著又定義了它自己的屬性age。然后將supertype的實(shí)例賦值給subtype的原型，然后又在該新原型上定義了方法sayage()。這樣一來(lái)，就可以讓兩個(gè)不同的subtype實(shí)例既可以擁有屬性--包括colors屬性，又可以使用相同的方法。

組合式繼承缺點(diǎn)是：調(diào)用了兩次supertype構(gòu)造函數(shù)，一次在賦值subtype的原型時(shí)，一次在實(shí)例化子類(lèi)時(shí)call調(diào)用，這次調(diào)用會(huì)屏蔽原型中的兩個(gè)同名屬性。

參考書(shū)籍：Javascript高級(jí)程序設(shè)計(jì)（第3版）;

以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持腳本之家！

您可能感興趣的文章: