摘要：實現類的步驟第一步是使用新建類，初始化的固定函數是，不能使用其它名稱子類也是使用新建，父類放在第一個參數中，如子類中與父類的同名方法，如果需要在父類的同名方法上拓展，在需要在第一個參數中使用，然后在方法體內使用如果需要在類的外面增加方法，可

實現類的步驟

第一步是使用Class.create新建類，初始化的固定函數是initialize，不能使用其它名稱

子類也是使用Class.create新建，父類放在第一個參數中，如var Cat = Class.create(Animal,{});

子類中與父類的同名方法，如果需要在父類的同名方法上拓展，在需要在第一個參數中使用$super，然后在方法體內使用$super(args);

如果需要在類的外面增加方法，可以使用addMethods方法

// 使用 Class.create 創建類
    var Person = Class.create({
        // 初始函數固定為 initialize, 如果不設置，會默認創建一個空函數給 initialize
        initialize:function(name) {
            this.name = name;
            this.friends = ["jack", "mark"];
        },
        getName: function(){
            console.log("My name is " + this.name);
        },
        setFriends:function(friend){
            this.friends.push(friend);
        },
        getFriends:function(){
            console.log(this.friends)
        }
    });

    // 使用 addMethods 給在類的初始構建之外添加方法，子類可以繼承該方法
    Person.addMethods({
        getAge:function(age){
            console.log("My age is " + age);
        }
    })

    // 子類通過 Class.create 創建類，第一個參數為父類的名字
    var Chinese = Class.create(Person,{
        // 使用 $super 為第一個參數，表示當前函數在父類的同名函數上拓展
        initialize:function($super, name, addr){
            $super(name);
            this.addr = addr;
        },
        getAddr:function(){
            console.log("My address is " + this.addr);
        }
    });

    var Japanese = Class.create(Person, {
        initialize:function($super, name){
            $super(name);
        }
    })

    // 實例化類
    var men = new Chinese("allen", "BeiJing");
    men.getName(); // My name is allen
    men.getAge(23); // My age is 23
    men.getAddr(); // My address is BeiJing

    // 以下驗證 - 子類繼承父類的屬性，修改了之后，其他子類再次繼承父類，父類的屬性的值為何不會改變
    var allen = new Person();
    allen.getFriends(); // ["jack", "mark"]

    var women = new Japanese();
    women.setFriends("lisa");
    women.getFriends(); // ["jack", "mark", "lisa"]

    var men = new Chinese();
    men.setFriends("peter");
    men.getFriends(); //["jack", "mark", "peter"]

    var wallen = new Person();
    wallen.getFriends(); //["jack", "mark"]

JS是如何實現類的方法，有幾個重要的問題需要搞清楚

JS是如何創建類的

子類是如何實現繼承父類屬性和方法的

子類繼承父類的屬性，修改了之后，其他子類再次繼承父類，父類的屬性的值為何不會改變

子類和父類的同名函數，在同名函數中使用$super，是如何做到在子類中共存的

如何實現，不在類中，而是使用addMethods往類中添加方法的

下面來通過prototype.js的class來具體分析

var Class = (function() {

  function subclass() {};
  function create() {
    // ... 
  }

  function addMethods(source) {
    // ...
  }

  // 暴露給外部的接口
  return {
    create: create,
    Methods: {
      addMethods: addMethods
    }
  };
})();

內部實現其實很簡單，Class是一個立即執行函數，里面只有三個函數，而且subclass還是個空函數

/* Based on Alex Arnell"s inheritance implementation. */

/**
 *  Refer to Prototype"s web site for a [tutorial on classes and
 *  inheritance](http://prototypejs.org/learn/class-inheritance).
**/
var Class = (function() {

  function subclass() {};
  function create() {
    // $A 函數就是把參數轉化成數組
    var parent = null, properties = $A(arguments);
    // 如果第一個參數是函數，就把他當作父類
    if (Object.isFunction(properties[0]))
      parent = properties.shift();

    function klass() {
      // klass 是新建的類，把傳入的參數都綁定到 klass 的 initialize 方法中
      this.initialize.apply(this, arguments);
    }

    // 把通過 extend 方法，把 Class.Methods 的方法添加到 klass 中
    Object.extend(klass, Class.Methods);
    // 這里有指定 klass 的父類是哪一個
    klass.superclass = parent;
    klass.subclasses = [];

    if (parent) {
      // 這里通過把父類的原型方法，都繼承到當前類中
      // 通過中間變量 subclass 來傳遞 prototype 來防止由于子類的修改而導致父類的屬性或者方法也被修改
      subclass.prototype = parent.prototype;
      // 每次子類都會創建一個新的中間變量來傳遞，所以無論子類怎么修改屬性，都不會影響到父類
      klass.prototype = new subclass;
      // 把當前類添加到父類的子類中
      parent.subclasses.push(klass);
    }

    for (var i = 0, length = properties.length; i < length; i++)
      // 前面把 addMethods 方法添加到 klass 中，這里就可以使用 addMethods 把傳入參數中的方法，添加到 klass 中了
      klass.addMethods(properties[i]);

    // 如果 klass 沒有初始化函數，就設置一個空函數
    if (!klass.prototype.initialize)
      klass.prototype.initialize = Prototype.emptyFunction;

    // 把 klass 的構造函數指向自身
    klass.prototype.constructor = klass;
    return klass;
  }

  
  // source 是所有要添加進來方法的集合
  function addMethods(source) {
    var ancestor   = this.superclass && this.superclass.prototype,
        properties = Object.keys(source);

    for (var i = 0, length = properties.length; i < length; i++) {
      // value 就是單個的方法
      var property = properties[i], value = source[property];
      // 如果參數中的第一個參數是 $super，就需要把父類的同名方法，傳遞進來
      if (ancestor && Object.isFunction(value) &&
          value.argumentNames()[0] == "$super") {
        // 把最初的 value 使用 method 存起來
        var method = value;
        // 繼承父類的同名方法，然后把當前參數傳進去
        value = (function(m) {
          return function() { return ancestor[m].apply(this, arguments); };
        })(property).wrap(method);
          // wrap 是把父類的同名方法，添加當前類的同名方法中

        // We used to use `bind` to ensure that `toString` and `valueOf`
        // methods were called in the proper context, but now that we"re
        // relying on native bind and/or an existing polyfill, we can"t rely
        // on the nuanced behavior of whatever `bind` implementation is on
        // the page.
        //
        // MDC"s polyfill, for instance, doesn"t like binding functions that
        // haven"t got a `prototype` property defined.
        // 將 valueOf 的方法綁定到 method 中
        value.valueOf = (function(method) {
          return function() { return method.valueOf.call(method); };
        })(method);

          // 將 toString 的方法綁定到 method 中
        value.toString = (function(method) {
          return function() { return method.toString.call(method); };
        })(method);
      }
      this.prototype[property] = value;
    }

    return this;
  }

  // 暴露給外部的接口
  return {
    create: create,
    Methods: {
      addMethods: addMethods
    }
  };
})();

上面使用到的wrap函數，摘抄在下面

function wrap(wrapper) {
    var __method = this;
    return function() {
      var a = update([__method.bind(this)], arguments);
      return wrapper.apply(this, a);
    }
  }

// 這里就是把 args 中的屬性，都添加到 array 中
function update(array, args) {
    var arrayLength = array.length, length = args.length;
    while (length--) array[arrayLength + length] = args[length];
    return array;
  }

JS面向對象系列

《javascript高級程序設計》 繼承實現方式

Mootools.js 是如何實現類，以及類的相關屬性和作用

klass 是如何實現JS的類以及類的相關屬性和作用

總結：prototype.js，Mootools.js和klass.js 實現類的方法的異同與優劣