Javascript 繼承機制和構造方法鏈實現

首先是我們熟悉的extend函數 

 

/**<br /> * 擴充函數<br /> * @param target 擴充項物件<br /> * @param params 擴充參數<br /> */<br />function extend(target, params) {<br /> if (!target) {<br /> target = {};<br /> }<br /> for (var prop in params) {<br /> target[prop] = params[prop];<br /> }<br /> return target;<br />}  

 

 

接下來繼承函數

 

/**<br /> * 繼承函數<br /> * @param SuperClass 父類<br /> * @param overrides 重寫方法<br /> */<br />function extendClass(SuperClass, overrides) {<br /> var SubClass = function() {<br /> // 自動調用建構函式<br /> this.initialize.apply(this, arguments);<br /> }; </p><p> SubClass.prototype = new SuperClass(); </p><p> extend(SubClass.prototype, overrides); </p><p> SubClass.superclass = SuperClass; </p><p> return SubClass;<br />}  

 

測試代碼

 

var Animal = extendClass(Object, {<br /> initialize: function(name){<br /> this.name = name;<br /> }, </p><p> showName: function(){<br /> alert(this.name);<br /> }<br />}); </p><p>var Cat = extendClass(Animal, {<br /> initialize: function(name) {<br /> // 調用父類建構函式<br /> Cat.superclass.prototype.initialize.call(this, name);<br /> }<br />}); </p><p>var BlackCat = extendClass(Cat, {<br /> initialize: function(name, type) {<br /> // 調用父類建構函式<br /> BlackCat.superclass.prototype.initialize.call(this, name);<br /> this.type = type;<br /> },<br /> showType: function() {<br /> alert(this.type);<br /> },<br /> showName: function() {<br /> alert(this.name + ":" + this.type);<br /> }<br />}); </p><p>var cat = new Cat("cat name");<br />// 繼承方法<br />cat.showName(); </p><p>// true<br />alert(cat instanceof Animal); </p><p>// true<br />alert(cat instanceof Cat); </p><p>// false<br />alert(cat instanceof BlackCat); </p><p>var blackCat = new BlackCat("123", "black"); </p><p>// 方法重寫<br />blackCat.showName(); </p><p>// 自有方法<br />blackCat.showType(); </p><p>// true<br />alert(blackCat instanceof Animal); </p><p>// true<br />alert(blackCat instanceof Cat); </p><p>// true<br />alert(blackCat instanceof BlackCat);  

 

 

以上實現了繼承，多態，重載，和完整的構造體方法鏈。