簡單的JavaScript繼承(譯)

王興欣發表於2017-10-16
JavaScript繼承

這篇文章翻譯自John Resig（jQuery的作者）的部落格，原文地址。

為了正在寫的這本書（譯者注：這本書是《忍者祕籍》），我最近做了許多關於JavaScript繼承的工作，並在此基礎上研究了幾種不同的JavaScript經典繼承模擬技術。在我所有看過的研究中，我最推崇的是base2和Prototype這兩個庫的實現。

我想要提取這些技術的精華，以一個簡單的、可複用的方式進行展示，以便使這些特性更容易不依賴其他的內容而被理解。此外我想要使其可以被簡單的、高效的被使用。這裡展示了一個可以使用完成後的結果來實現的例項。（譯者注：既完成後的程式碼可以用於實現下面這個功能）

var Person = Class.extend({
  init: function(isDancing){
    this.dancing = isDancing;
  },
  dance: function(){
    return this.dancing;
  }
});

var Ninja = Person.extend({y
  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’，你必須要繼承一個已經存在的類(sub-class).

  • 所有的“類”都繼承於一個祖先：Class。因此，如果要建立一個新類，它必須是Class的子類。

  • 該語法最大的挑戰是訪問被覆蓋的方法，而且有時這些方法的上下文也有可能被修改了。通過this._super()呼叫Person超類的原始init()和dance()方法

本例的程式碼使我很愉快：它使得“類”的概念作為一種結構，保持繼承簡單，並且允許呼叫超類方法。

簡單的類建立與繼承

這裡是該內容的實現（合理的大小並且有備註） 大概有25行。 歡迎並感謝提出建議。

/* Simple JavaScript Inheritance
 * By John Resig https://johnresig.com/
 * MIT Licensed.
 */
//從base2與Prototype這2個庫中受到啟發。
(function(){
  var initializing = false, fnTest = /xyz/.test(function(){xyz;}) ? /\b_super\b/ : /.*/;

 //基礎的class實現 沒有做任何事情
  this.Class = function(){};

  //  建立一個新的類繼承這個Class
  Class.extend = function(prop) {
    var _super = this.prototype;

    //   例項化一個基礎類（僅僅是建立例項，並沒有執行初始化構造器）
    initializing = true;
    var prototype = new this();
    initializing = false;

    // 複製屬性到新的原型上
    for (var name in prop) {
      // 檢查我們是否覆蓋了一個已經存在的方法
      prototype[name] = typeof prop[name] == "function" && 
        typeof _super[name] == "function" && fnTest.test(prop[name]) ?
        (function(name, fn){
          return function() {
            var tmp = this._super;

            // 新增._super()方法，該方法與超類的方法相同
            this._super = _super[name];

            //  該方法只需要臨時存在，所以在執行完之後移除該方法
            var ret = fn.apply(this, arguments);        
            this._super = tmp;

            return ret;
          };
        })(name, prop[name]) :
        prop[name];
    }

    //  模擬的類構造器
    function Class() {
      // All construction is actually done in the init method  所有的建立工作都會在init方法裡完成
      if ( !initializing && this.init )
        this.init.apply(this, arguments);
    }

    // 設定類的原型
    Class.prototype = prototype;

    //過載構造器的引用
    Class.prototype.constructor = Class;

    //讓類可以繼續擴充套件
    Class.extend = arguments.callee;

    return Class;
  };
})();複製程式碼

在我看來，最難的兩個部分是“初始化/不呼叫init方法”和“建立_super方法”。我想要簡要的介紹這部分以便於理解整個程式碼的實現。

子類的例項化

為了用函式原型模擬繼承，我們使用傳統的建立父類的例項，並將其賦值給子類的原型。如果不使用之前的實現，其實現程式碼類似如下：

function Person(){}
function Ninja(){}
Ninja.prototype = new Person();
// Allows for instanceof to work:
(new Ninja()) instanceof Person複製程式碼

該程式碼的挑戰在於我們想從instanceof中受益，而不是例項化Person物件並執行其構造器。為了抵消這一點，我們在程式碼中定義了initialozing變數，當我們想使用原型例項化一個類的時候，都將該變數設定為true。

因此，在構造例項的時候，我們可以確保不在例項化模式下進行構建例項，並且可以相應的執行或者跳過init()方法。

if ( !initializing )
  this.init.apply(this, arguments);複製程式碼

尤其重要的是，init()方法可以執行啟動各種昂貴的啟動程式碼（連結到一個伺服器，建立DOM元素等等），所以如果只是建立一個例項作為原型的話，我們要避免任何不必要的昂貴程式碼。

保留父級方法

當你正在例項化的時候，建立一個類並且繼承超類的方法，我們保留了訪問被覆蓋方法的能力，最後在這個特別的實現中，使用了一個新的臨時方法(._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複製程式碼

實施這個功能需要多個步驟。首先，注意我們用於繼承一個已經存在類的物件（例如被傳入Person.extend的這個）需要與基礎的new Person的例項合併（Person類之前已經被建立了）。在合併過程中我們做了簡單的檢查：子類屬性是否是一個函式、超類屬性是否是一個函式、子類函式是否包含了super引用。

注意，我們建立了一個匿名的閉包（返回了一個建構函式），將會封裝並執行子類的函式。首先，作為優秀的開發人員，需要保持舊的this._super引用（不管它是否存在），處理完了以後再恢復該引用。這在同名變數已經存在的情況下會很有用（我們不想意外的失去它）。

接下來，我們建立了新的_super方法，新的方法保持了對存在於父類方法的引用。值得慶幸的是，我們不需要做任何額外的程式碼修改或者作用域的修改，當函式成為我們物件的一個屬性時，該函式的上下文會自動設定（this引用的是當前的子類例項，而不是父類例項）。

最後我們呼叫原始的子類方法執行自己的工作（也有可能使用了_super），然後將_super恢復成原來的狀態，並返回撥用結果。

有很多方式可以達到類似的結果（有的實現，會通過訪問arguments.callee，將_super方法繫結到方法自身），但是該特定技術提供了良好的可用性和簡便性。

我會在我寫的書中覆蓋更多的JavaScript原型系統背後的真相，我只是想把這個類實現放到這裡，讓每個人都嘗試使用它。我認為這個簡單的程式碼可以說明很多的事情(更容易去學習，去繼承，更少的下載)，因此我認為這個實現是開始和學習JavaScript類構造和繼承的基礎的好地方。

其實我是拜讀過忍者祕籍的，這個例子在忍者祕籍中的第六章 - 原型與物件導向中做了更加詳細的講解，此外本書全面且詳細的講解了javascript的基礎部分（函式、執行上下文、閉包等等），並且書中有部分例子實際上有些深奧，部分例子在我當初第一次閱讀的時候並沒有完全理解，於是我就把該頁摺疊起來，日後再次閱讀理解更為透徹一點。 由於我是認真閱讀過忍者祕籍的，我認為這本書非常的不錯（畢竟是jQuery作者寫的），因此在這裡我向各位初學者推薦這本書，希望對大家有所幫助。

相關文章