這篇文章主要為大家展示了“JavaScript中多種組合繼承的示例分析”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“JavaScript中多種組合繼承的示例分析”這篇文章吧。

創(chuàng)新互聯(lián)-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設、高性價比長洲網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式長洲網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設找我們，業(yè)務覆蓋長洲地區(qū)。費用合理售后完善，十載實體公司更值得信賴。

1. 組合繼承：又叫偽經(jīng)典繼承，是指將原型鏈和借用構造函數(shù)技術組合在一塊的一種繼承方式。

下面來看一個例子：

function SuperType(name) {

  this.name = name;

  this.colors = ["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.sayAge = function() {

  alert(this.age);

 }

 

 var instance1 = new SubType("Nicholas", 29);

 instance1.colors.push("black");

 alert(instance1.colors); //red,blue,green,black

 instance1.sayName(); //Nicholas

 instance1.sayAge(); //29

 

 var instance2 = new SubType("Greg", 27);

 alert(instance2.colors); //red,blue,green

 instance2.sayName(); //Greg

 instance2.sayAge(); //27

組合繼承避免了原型鏈和借用構造函數(shù)的缺陷，融合它們的優(yōu)點。

2. 原型式繼承

可以在不必預先定義構造函數(shù)的情況下實現(xiàn)繼承，其本質是執(zhí)行對給定對象的淺復制。而復制得到的副本還可以得到進一步的改造。

function object(o) {

  function F(){};

  F.prototype = o;

  return new F;

 }

 

 var person = {

  name: "Nicholas",

  friends: ["Shelby", "Court", "Van"]

 };

 

 var antherPerson = object(person);

 antherPerson.name = "Greg";

 antherPerson.friends.push("Rob");

 

 var antherPerson = object(person);

 antherPerson.name = "Linda";

 antherPerson.friends.push("Barbie");

 

 alert(person.friends); //Shelby,Court,Van,Rob,Barbie

3. 寄生式繼承

與原型式繼承非常相似，也是基于某個對象或某些信息創(chuàng)建一個對象，然后增強對象，最后返回對象。為了解決組合繼承模式由于多次調用超類型構造函數(shù)而導致的低效率問題，可以將這個模式與組合繼承一起使用。

function object(o) {

  function F(){};

  F.prototype = o;

  return new F;

 }

 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();

4. 寄生組合式繼承

集寄生式繼承和組合繼承的優(yōu)點與一身，是實現(xiàn)基本類型繼承的最有效方式。

//繼承原型

 function extend(subType, superType) {

  function F(){};

  F.prototype = superType.prototype;

 

  var prototype = new F;

  prototype.constructor = subType;

  subType.prototype = prototype;

 }

 

 //超類方法

 function SuperType(name) {

  this.name = name;

  this.colors = ["red", "blue", "green"];

 }

 SuperType.prototype.sayName = function() {

  return this.name;

 }

 

 //子類方法

 function SubType(name, age) {

  SuperType.call(this, name);

  this.age = age;

 }

 

 //繼承超類的原型

 extend(SubType, SuperType);

 

 //子類方法

 SubType.prototype.sayAge = function() {

  return this.age;

 }

 

 var instance1 = new SubType("Shelby");

 var instance2 = new SubType("Court", 28);

 

 instance1.colors.push('black');

 

 alert(instance1.colors); //red,blue,green,black

 alert(instance2.colors); //red,blue,green

 

 alert(instance1 instanceof SubType); //true

 alert(instance1 instanceof SuperType); //true

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

以上是“JavaScript中多種組合繼承的示例分析”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)站題目：JavaScript中多種組合繼承的示例分析
URL鏈接：http://www.chinadenli.net/article40/jdjsho.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供用戶體驗、關鍵詞優(yōu)化、標簽優(yōu)化、手機網(wǎng)站建設、虛擬主機、動態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)