ES5 如何實現 Class

catchonme發表於2018-05-03

原文地址：https://github.com/catchonme/blog/issues/3

我們知道Class最大的作用就是能夠實現繼承，這樣子類通過繼承父類，從而儘可能的對程式碼進行復用。

那麼問題來了

  • 如何實現子類繼承父類的屬性和函式，
  • 子類繼承父類時，為什麼子類的同名函式不會覆蓋父類的同名函式

我們通過分析prototype.js 來看看ES5 是如何實現Class 的

prototype.js 書寫Class 的方法

var Animal = Class.create({
  initialize: function(name) {
    this.name = name;
  }
})

var myAnimal = new Animal('jack'); 
console.log(myAnimal.name);// jack

var Cat = Class.create(Animal, {
  initialize: function($super, name, age) {
    $super(name);
    this.age = age;
  }
})

var myCat = new Cat('mia', 13); 
console.log(myCat.name); // mia
console.log(myCat.age); // 13
複製程式碼

建立類：通過Class.create建立Class， initialize 函式初始化Class 的屬性

繼承：子類在Class.create 的第一個引數傳入父類名稱，在函式中第一個引數傳入$super ，函式內使用$super(args) 來呼叫父類的同名函式

然後我們來看prototype.js 內部實現Class ，以下是大致的結構，主體是三個函式，包含一個空函式

var Class = (function(){
  var subclass() {}; // 空函式
  function create() { // code... } 
  function addMethods() { // code... }  
  return {
    create: create,
    Methods: {
      addMethods: addMethods
    }
  }  
})();
複製程式碼

我們挨個解析，create 函式做了什麼呢？

function create() {
  var parent = null, properties = [].slice.call(arguments);

  // 傳入的第一個引數是否是函式，如果是，就說明是當前類的父類
  if (isFunction(properties[0]))
    parent = properties.shift();

  // 新建 klass 函式，並執行initialize 函式
  function klass() {
    this.initialize.apply(this, arguments);
  }

  // extend 函式將 Class.Methods的屬性賦給 klass
  extend(klass, Class.Methods);
  // 設定當前類為 parent
  klass.superclass = parent;
  klass.subclasses = [];

  // 如果當前類有父類，就需要把父類的屬性和函式賦給當前類
  if (parent) {
    // 父類的 prototype 賦給 空函式 subclass.prototype
    subclass.prototype = parent.prototype;
    // 通過例項化 subclass 再賦給 klass.prototype，這樣 klass 就能夠擁有父類的屬性和函式了
    klass.prototype = new subclass;
    parent.subclasses.push(klass)
  }

  // addMethods 為將所有傳入的引數賦給 klass 的 prototype 中，該函式作用後面講解
  for (var i=0, length=properties.length; i<length; i++) {
    klass.addMethods(properties[i]);
  }

  if (!klass.prototype.initialize) {
    klass.prototype.initialize = emptyFunction
  }

  klass.prototype.constructor = klass;
  return klass
}
複製程式碼
  • create 函式做了哪些事呢
    • 新建klass 函式，執行initialize 函式
    • 判斷是否傳入了父類，如果是，就將父類的屬性和函式賦給當前類
    • 使用addMethods 方法，將使用者的函式賦給klass 的prototype 中

繼承父類的作用已經實現了，使用者建立類時的方法需要通過addMethods 賦給當前類的prototype 中，接下來的問題就是，父類和子類的同名函式，該如何執行呢，父類的同名函式已經賦給子類的prototype 中了，子類增加同名函式，為什麼不會覆蓋掉呢？

我們看看addMethods 函式

function addMethods(source) {
  var ancestor = this.superclass && this.superclass.prototype,
      properties = Object.keys(source);

  // 遍歷傳遞過來的函式，分別賦給當前的 prototype 中
  for (var i=0, length=properties.length; i<length; i++) {
    var property = properties[i], value = source[property];

    // 判斷當前類中的函式，第一個引數否是是 $super
    if (ancestor && isFunction(value)
        && value.argumentNames()[0] == "$super") {

      var method = value;

      // 這裡是為什麼子類能夠執行父類的同名函式的關鍵地方
      value = (function (m) {
        return function () {
          // 通過將函式名傳遞給父類，父類執行一次該同名函式，然
          return ancestor[m].apply(this, arguments);
        }
      })(property).wrap(method); // wrap(method) 又執行一次當前類的同名函式

      // 重寫當前函式的 valueOf
      value.valueOf = (function (method) {
        return function () {
          return method.valueOf.call(method);
        }
      })(method);

      // 重寫當前函式的 toString
      value.toString = (function (method) {
        return function () {
          return method.toString.call(method);
        }
      })(method);
    }

    // 將函式賦給當前類的 prototype
    this.prototype[property] = value;
  }
}
複製程式碼
  • addMethods 又做了哪些事呢？
    • 遍歷傳過來的函式
      • 如果該函式的第一個引數為$super ，就呼叫父類的同名函式執行一次，在呼叫當前類的同名函式執行一次，這樣就能夠實現使用$super 呼叫父類的函式了
      • 如果該函式的第一個引數不為$super ，就直接賦給當前類的prototype 中

上述函式中使用的其他工具函式，如isFunction, extend 等，因為我已經把prototype,js 中的Class 單獨剝離出來了，通過點選 這裡 檢視，裡面會有更詳細的註釋。

所以我們回到最初的問題

  • 如何繼承父類的屬性和函式？
    • 通過中間變數例項化父函式，然後賦給子函式的prototype 中，這樣子函式就擁有父函式的屬性和函式了
  • 子類為何不會覆蓋掉父類的同名函式？
    • 子函式設定屬性superclass 為父函式，在當前類中所有自定義的函式賦給當前類的prototype 時，會通過superclass 找到父類的同名函式，這樣執行子類的同名函式時，即為執行父類的同名函式一次，子類的同名函式一次。

相關文章