首頁 > web前端 > js教程 > JavaScript繼承之原型式繼承、寄生式繼承、寄生組合式繼承用法實例詳解

JavaScript繼承之原型式繼承、寄生式繼承、寄生組合式繼承用法實例詳解

伊谢尔伦
發布: 2017-07-25 16:01:44
原創
1416 人瀏覽過

原型式繼承

  原型式繼承的的實作方法與普通繼承的實作方法不同,原型式繼承並沒有使用嚴格意義上的建構函數,而是藉助原型可以基於已有的對象建立新對象,同時也不必因此建立自訂類型。具體程式碼如下:


function object(o) {
  function F() {}
  F.prototype = o;
  return new F();
}
登入後複製

程式碼範例:


#
/* 原型式继承 */
function object(o) {
  function F() {}
  F.prototype = o;
  return new F();
}

var person = {
  name : 'wuyuchang',
  friends : ['wyc', 'Nicholas', 'Tim']
}

var anotherPerson = object(person);
anotherPerson.name = 'Greg';
anotherPerson.friends.push('Bob');

var anotherPerson2 = object(person);
anotherPerson2.name = 'Jack';
anotherPerson2.friends.push('Rose');

alert(person.friends);  // wyc,Nicholas,Tim,Bob,Rose
登入後複製

寄生式繼承


/* 寄生式继承 */
function createAnother(original) {
  var clone = object(original);
  clone.sayHi = function() {
    alert('hi');
  }
  return clone;
}
登入後複製

使用範例:


#
/* 原型式继承 */
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 : 'wuyuchang',
  friends : ['wyc', 'Nicholas', 'Rose']
}
var anotherPerson = createAnother(person);
anotherPerson.sayHi();
登入後複製

寄生組合式繼承

  JavaScrip中組合模式實現繼承有以自己的缺點,現在我們就來解決它的缺點,實現思路是,對於構造函數繼承屬性,而原型鏈的混成形式繼承方法,即不用在繼承方法的時候實例化父類型的構造函數。程式碼如下:


function object(o) {
  function F() {}
  F.prototype = o;
  return new F();
}

/* 寄生组合式继承 */
function inheritPrototype(subType, superType) {
  var prototype = object(superType.prototype);
  prototype.constructor = subType;
  subType.prototype = prototype;
}
登入後複製

而在使用時只需要將組合模式中的「SubType.prototype = new SuperType();」這行程式碼替換成inheritPrototype(subType, superType);即可。寄生組合式繼承的高效率體現在它只呼叫了一次父型別建構函數,避免了創造不必要的或多餘的屬性。同時,原型鏈還能維持不變,因此,也能夠正常使用instanceof和isPrototypeof()。這也是目前來說最理想的繼承方式了,目前也正在轉型為這種模式。 (YUI也使用了這種模式。)

以上是JavaScript繼承之原型式繼承、寄生式繼承、寄生組合式繼承用法實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板