1. 程式人生 > 程式設計 >《javascript設計模式》學習筆記二:Javascript面向物件程式設計繼承用法分析

《javascript設計模式》學習筆記二:Javascript面向物件程式設計繼承用法分析

本文例項講述了Javascript面向物件程式設計繼承用法。分享給大家供大家參考,具體如下:

1.關於繼承:

百度百科對繼承的解釋是:繼承是指一個物件直接使用另一物件的屬性和方法。

(話說百科對於計算機概念的繼承的解釋也太簡略了)

繼承的好處,優點學過面向物件的同學都知道,就不贅述了。

javascript中的繼承有三種(不同的書上對這三中的名稱翻譯都不一樣,我按照我的理解來命名吧):

  • a.建構函式繼承(類式繼承,組合繼承,偽經典繼承)
  • b.原型繼承
  • c.原型賦值(遍歷)繼承(寄生式繼承)

2.建構函式繼承

所謂的建構函式繼承,就是通過建立一個新物件,呼叫父類建構函式實現的一種繼承;

(知識點:函式物件的原型會有一個屬性叫constructor,constructor實際指向的是這個函式)

function person(name){
  this.name = name;
}
extend(author,person);
function extend(subclass,superclass){
 var f= function(){};
 f.prototype = superclass.prototype;//f.prototype.constructor = superclass
 subclass.prototype = new f();//這裡呼叫的實際上是superclass(),這樣subclass.prototype.construcor = superclass
 subclass.prototype.constructor = subclass;//將subclass的建構函式改寫為正常的自身的建構函式
}

3.原型式繼承

我們知道javascript在引用一個物件的屬性時,首先會去讀這個物件是否有這個屬性,如果沒有會繼續看這個物件的原型是否有這個屬性;

var person ={}
var author = clone(person);
function clone(obj){
 function F(){};
 F.prototype = obj;
 return new F;
}

clone函式的作用就是把父類的所有成員都給了新物件的prototype,成為了新物件prototype的成員,因此子類在引用一個父類屬性時,都能在prototype中找到,但是這種方式繼承是的所有克隆出來的物件都共享每個屬性和方法的唯一例項(因為都是通過原型讀取),只有在直接設定了某個克隆出來的物件的屬性和方法(變為物件獨立屬性),情況才會有變化。

4.原型賦值(遍歷)繼承

這種賦值比原型賦值好的一點在於它控制繼承的範圍

var person = {};
augment(author,person);

//引數最少兩個,超過兩個則表示指定要繼承的成員
function augment(receivingclass,givingclass){
  if(arguments[2]){
   for(var i=2;i<arguments.length;i++){
    receivingclass.prototype[arguments[i]] = givingclass.prototype[arguments[i]];
   }
  }
  else{
   for(methodname in givingclass.prototype){
    receivingclass.prototype[methodname] = givingclass.prototype[methodname];
   }
  }
}

這種方式比較適用於var obj這樣定義的物件,而不是用函式來定義的物件,如果使用函式定義的物件,同時又要指定繼承的成員,別忘了constructor

感興趣的朋友可以使用線上HTML/CSS/JavaScript程式碼執行工具:http://tools.jb51.net/code/HtmlJsRun測試上述程式碼執行效果。

更多關於JavaScript相關內容感興趣的讀者可檢視本站專題:《javascript面向物件入門教程》、《JavaScript錯誤與除錯技巧總結》、《JavaScript資料結構與演算法技巧總結》、《JavaScript遍歷演算法與技巧總結》及《JavaScript數學運算用法總結》

希望本文所述對大家JavaScript程式設計有所幫助。