介紹一個簡單的JavaScript類框架
在寫work-in-progress JavaScript book一書時,對于javascript繼承體系,我花費了相當(dāng)?shù)臅r間,并在該過程中研究了各種不同的模擬經(jīng)典類繼承的方案。這些技術(shù)方案中,我最為推崇的是base2與Prototype的實現(xiàn)。
從這些方案中,應(yīng)該能提煉出一個具有其思想內(nèi)涵的框架,該框架須具有簡單、可重用、易于理解并無依賴等特點,其中簡單性與可用性是重點。以下是使用示例:
var Person = Class. extend ( {
init: function (isDancing ) {
this. dancing = isDancing;
},
dance: function ( ) {
return this. dancing;
}
} );
var Ninja = Person.extend({
init: function(){
this._super( false );
},
dance: function(){
// Call the inherited version of dance()
return this._super();
},
swingSword: function(){
return true;
}
});
var p = new Person(true);
p.dance(); // => true
var n = new Ninja();
n.dance(); // => false
n.swingSword(); // => true
// Should all be true
p instanceof Person && p instanceof Class &&
n instanceof Ninja && n instanceof Person && n instanceof Class
有幾點需要留意:
- 構(gòu)造函數(shù)須簡單(通過init函數(shù)來實現(xiàn)),
- 新定義的類比須繼承于已有的類,
- 所有的‘類'都繼承于始祖類:Class,因此如果要創(chuàng)建一個全新的類,該類必須為Class的子類,
- 最具挑戰(zhàn)的一點:父類的被覆寫方法必須能訪問到(通過配置上下文環(huán)境)。
- 在上面的示例中,你能發(fā)現(xiàn)通過this._super()來調(diào)用Person父類的init()和dance()方法。
對結(jié)果相當(dāng)滿意:使類的定義結(jié)構(gòu)化,保持單一繼承,并且能夠調(diào)用超類方法。
簡單的類創(chuàng)建與繼承
下面為其實現(xiàn)(便于閱讀并有注釋),大概25行左右。歡迎并感謝提出建議。
/* Simple JavaScript Inheritance
* By John Resig http://ejohn.org/
* MIT Licensed.
*/
// Inspired by base2 and Prototype
( function ( ) {
var initializing = false, fnTest = /xyz/.test(function(){xyz;}) ? /\b_super\b/ : /.*/;
// The base Class implementation (does nothing)
this.Class = function(){};
// Create a new Class that inherits from this class
Class.extend = function(prop) {
var _super = this.prototype;
// Instantiate a base class (but only create the instance,
// don't run the init constructor)
initializing = true;
var prototype = new this();
initializing = false;
// Copy the properties over onto the new prototype
for (var name in prop) {
// Check if we're overwriting an existing function
prototype[name] = typeof prop[name] == "function" &&
typeof _super[name] == "function" && fnTest.test(prop[name]) ?
(function(name, fn){
return function() {
var tmp = this._super;
// Add a new ._super() method that is the same method
// but on the super-class
this._super = _super[name];
// The method only need to be bound temporarily, so we
// remove it when we're done executing
var ret = fn.apply(this, arguments);
this._super = tmp;
return ret;
};
})(name, prop[name]) :
prop[name];
}
// The dummy class constructor
function Class() {
// All construction is actually done in the init method
if ( !initializing && this.init )
this.init.apply(this, arguments);
}
// Populate our constructed prototype object
Class.prototype = prototype;
// Enforce the constructor to be what we expect
Class.prototype.constructor = Class;
// And make this class extendable
Class.extend = arguments.callee;
return Class;
};
})();
其中 “初始化(initializing/don't call init)”與“創(chuàng)建_super方法”最為棘手。接下來,我會對此做簡要的介紹,使得大家對其實現(xiàn)機制能更好的理解。
初始化
為了說明函數(shù)原型式的繼承方式,首先來看傳統(tǒng)的實現(xiàn)過程,即將子類的prototype屬性指向父類的一個實例。如下所示:
function Person ( ) { }
function Ninja ( ) { }
Ninja. prototype = new Person ( );
// Allows for instanceof to work:
(new Ninja()) instanceof Person
然而,這里具有挑戰(zhàn)性的一點,便是我們只想要得到‘是否實例(instatnceOf)'的效果,而不需要實例一個 Person并調(diào)用其構(gòu)造函數(shù)所帶來的后果。為防止這一點,在代碼中設(shè)置一個bool參數(shù)initializing,只有在實例化父類并將其配置到子類的prototype屬性時, 其值才為true。這樣處理的目的是區(qū)分開真正的實例化與設(shè)計繼承時這兩種調(diào)用構(gòu)造函數(shù)之間的區(qū)別,進而在真正實例化時調(diào)用init方法:
if ( !initializing ) this.init.apply(this, arguments);
值得特別注意的是,因為在init函數(shù)中可能會運行相當(dāng)費資源的代碼(如連接服務(wù)器,創(chuàng)建DOM元素等,誰也無法預(yù)測),所以做出區(qū)分是完全必要的。
超類方法(Super Method)
當(dāng)使用繼承時,最常見的需求便是子類能訪問超類被覆寫的方法。在該實現(xiàn)下,最終的方案便是提供一個臨時方法(._super),該方法指向超類方法,并且只能在子類方法中訪問。
var Person = Class. extend ( {
init: function (isDancing ) {
this. dancing = isDancing;
}
} );
var Ninja = Person.extend({
init: function(){
this._super( false );
}
});
var p = new Person(true);
p.dancing; // => true
var n = new Ninja();
n.dancing; // => false
實現(xiàn)這一功能需要幾步處理。首先,我們使用extend來合并基本的Person實例(類實例,上面我們提到過其構(gòu)造過程)與字面對象(Person.extend()的函數(shù)參數(shù))。在合并過程中,做了簡單的檢查:首先檢查將被合并的的屬性是否為函數(shù),如為函數(shù),然后檢查將被覆寫的超類屬性是否也為函數(shù)?如果這兩個檢查都為true,則需要為該屬性準(zhǔn)備_super方法。
注意,在這里創(chuàng)建了一個匿名閉包(返回的是函數(shù)對象)來封裝增加的super方法?;诰S護運行環(huán)境的需要,我們應(yīng)該將舊的this._super(不管其是否存在)保存起來以備函數(shù)運行后重置,這有助于在有相同名稱(不想偶然丟失對象指針)的情況下發(fā)生不可預(yù)知的問題。
然后,創(chuàng)建新的_super方法,該方法對象僅指向超類中被覆寫的方法。謝天謝地,不用對_super做任何改動或變更作用域,因為函數(shù)的執(zhí)行環(huán)境會隨著函數(shù)調(diào)用對象自動變更(指針this會指向超類).
最后,調(diào)用字面量對象的方法,方法執(zhí)行中可能會使用this._super(),方法執(zhí)行后,將屬性_super重置回其原來狀態(tài),之后return退出函數(shù)。
以上可以有許多種方案能達到相同的效果(我之前曾見過將super綁定到其自身,然后用arguments.callee訪問),但是感覺還是這種方法最能能體現(xiàn)可用性與簡潔性的特點。
在我已完成的多個基于javascript原型的工作中,只有這個類繼承實現(xiàn)方案是我發(fā)表出來與大家分享的。我認(rèn)為,簡潔的代碼(易于學(xué)習(xí),易于繼承,更少下載)更需要提出來讓大家探討,因此,對于學(xué)習(xí)javascript類構(gòu)造與繼承的人們來說,這套實現(xiàn)方案是一個好的開始。
相關(guān)文章
在JavaScript應(yīng)用中使用RequireJS來實現(xiàn)延遲加載
這篇文章主要介紹了在JavaScript應(yīng)用中使用RequireJS來實現(xiàn)延遲加載,JavaScript是一款人氣JS庫,需要的朋友可以參考下2015-07-07
JavaScript中的prototype.bind()方法介紹
在JavaScript中,我們經(jīng)常用到函數(shù)綁定,而當(dāng)你需要在另一個函數(shù)中保持this上下文時,使用Function.prototype.bind()會很方便2014-04-04
selenium 與 chrome 進行qq登錄并發(fā)郵件操作實例詳解
這篇文章主要介紹了selenium 與 chrome 進行qq登錄并發(fā)郵件操作實例詳解的相關(guān)資料,需要的朋友可以參考下2017-04-04
javascript replace()第二個參數(shù)為函數(shù)時的參數(shù)用法
replace()函數(shù)具有替換功能,它可以具有兩個參數(shù),第一個參數(shù)可以是要被替換的字符串或者匹配要被替換字符串的正則表達式,第二個參數(shù)可以是替換文本或者一個函數(shù),下面看一下關(guān)于replace()函數(shù)的幾個代碼實例2016-12-12
js中一維數(shù)組和二位數(shù)組中的幾個問題示例說明
這篇文章主要介紹了js中一維數(shù)組和二位數(shù)組中的幾個問題,并給出對應(yīng)的解決方法,需要的朋友可以參考下2014-07-07

