介紹一個簡單的JavaScript類框架

 　　這篇文章主要介紹了一個簡單的JavaScript類框架,有助於初學者理解JS類的創建與繼承,需要的朋友可以參考下

　　在寫work-in-progress JavaScript book一書時，對於javascript繼承體系，我花費了相當的時間，並在該過程中研究了各種不同的模擬經典類繼承的方案。這些技術方案中，我最為推崇的是base2與Prototype的實現。

　　從這些方案中，應該能提煉出一個具有其思想內涵的框架，該框架須具有簡單、可重用、易於理解並無依賴等特點，其中簡單性與可用性是重點。以下是使用示例：

　　?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 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

　　有幾點需要留意：

　　構造函數須簡單(通過init函數來實現)，

　　新定義的類比須繼承於已有的類，

　　所有的‘類'都繼承於始祖類：Class，因此如果要創建一個全新的類，該類必須為Class的子類，

　　最具挑戰的一點：父類的被覆寫方法必須能訪問到(通過配置上下文環境)。

　　在上面的示例中，你能發現通過this._super()來調用Person父類的init()和dance()方法。

　　對結果相當滿意：使類的定義結構化，保持單一繼承，並且能夠調用超類方法。

　　簡單的類創建與繼承

　　下面為其實現(便於閱讀並有注釋)，大概25行左右。歡迎並感謝提出建議。

　　?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 /* 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_superb/ : /.*/; // 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)”與“創建_super方法”最為棘手。接下來，我會對此做簡要的介紹，使得大家對其實現機制能更好的理解。

　　初始化

　　為了說明函數原型式的繼承方式，首先來看傳統的實現過程，即將子類的prototype屬性指向父類的一個實例。如下所示：

　　?

1 2 3 4 5 function Person ( ) { } function Ninja ( ) { } Ninja. prototype = new Person ( ); // Allows for instanceof to work: (new Ninja()) instanceof Person

　　然而，這裡具有挑戰性的一點，便是我們只想要得到‘是否實例(instatnceOf)'的效果，而不需要實例一個 Person並調用其構造函數所帶來的後果。為防止這一點，在代碼中設置一個bool參數initializing，只有在實例化父類並將其配置到子類的prototype屬性時， 其值才為true。這樣處理的目的是區分開真正的實例化與設計繼承時這兩種調用構造函數之間的區別，進而在真正實例化時調用init方法：

　　?

1 2 if ( !initializing ) this.init.apply(this, arguments);

　　值得特別注意的是，因為在init函數中可能會運行相當費資源的代碼(如連接服務器，創建DOM元素等，誰也無法預測)，所以做出區分是完全必要的。

　　超類方法(Super Method)

　　當使用繼承時，最常見的需求便是子類能訪問超類被覆寫的方法。在該實現下，最終的方案便是提供一個臨時方法(._super)，該方法指向超類方法，並且只能