介紹一個簡單的JavaScript類別框架_基礎知識

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

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

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行左右。歡迎並感謝提出建議。
 

/* 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）」與「創建_super方法」最為棘手。接下來，我會對此做簡單的介紹，使得大家對其實現機制能更好的理解。

初始化

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

 

function Person ( ) { }
function Ninja ( ) { }
Ninja. prototype = new Person ( );
// Allows for instanceof to work:
(new Ninja()) instanceof Person

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

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

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

超類別方法（Super Method）

使用繼承時，最常見的需求就是子類別能存取超類別被覆寫的方法。在這個實作下，最終的方案便是提供一個臨時方法（._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

要實現這項功能需要幾步處理。首先，我們使用extend來合併基本的Person實例（類別實例，上面我們提到其建構過程）與字面物件（Person.extend()的函數參數）。在合併過程中，做了簡單的檢查：首先檢查將被合併的屬性是否為函數，如為函數，然後檢查將被覆寫的超類別屬性是否也為函數？如果這兩個檢查都為true，則需要為該屬性準備_super方法。

注意，在這裡建立了一個匿名閉包（傳回的是函數物件）來封裝增加的super方法。基於維護運行環境的需要，我們應該將舊的this._super（不管其是否存在）保存起來以備函數運行後重置，這有助於在有相同名稱（不想偶然丟失對象指針）的情況下發生不可預測的問題。

然後，建立新的_super方法，該方法物件僅指向超類別中被覆寫的方法。謝天謝地，不用對_super做任何改動或變更作用域，因為函數的執行環境會隨著函數呼叫物件自動變更（指標this會指向超類別）.

最後，呼叫字面量物件的方法，方法執行中可能會使用this._super()，方法執行後，將屬性_super重設回原來狀態，之後return退出函數。

以上可以有許多種方案能達到相同的效果（我之前曾見過將super綁定到其自身，然後用arguments.callee訪問），但是感覺還是這種方法最能能體現可用性與簡潔性的特點。

在我已完成的多個基於javascript原型的工作中，只有這個類別繼承實作方案是我發表出來與大家分享的。我認為，簡潔的程式碼（易於學習，易於繼承，更少下載）更需要提出來讓大家探討，因此，對於學習javascript類別構造與繼承的人來說，這套實現方案是一個好的開始。