John Resig的Simple JavaScript Inheritance学习

/**
 * Created by KBWoniu on 16/6/23.
 * 欢迎批评指正及任何形式的交流!
 */

/**
 *Simple JavaScript Inheritance
 * http://ejohn.org/blog/simple-javascript-inheritance/
 */

/**
 * 一.继承的一般方式
 * js中没有类的标准概念，一等公民为函数，我为了理解和分析方便仍然使用类这个概念
 * js继承的方式一般是在构造函数中加入变量定义，然后重新定义它的原型对象prototype为基类的一个实例
 * function SuperClass(){} //基类
 * SuperClass.prototype.someFunc = function(){
 *     console.log('SuperClass someFunc');
 * };
 *
 * function SubClass() {   //派生类
 *    //变量定义
 *    this.someVal = '';
 * }
 * SubClass.prototype = new SuperClass();
 * SubClass.prototype.subFunc = function(){
 *     console.log('SubClass subFunc');
 * };
 *
 * var sub = new SubClass();
 * sub.someFunc();//SuperClass someFunc
 * sub.subFunc(); //SubClass subFunc
 *
 *
 * 二.解析
 * 谈一下我的理解：
 * 1.Class理解为基类
 * 2.基类Class提供一个extend方法，通过基类调用该方法可以生成一个新的派生类
 * 3.指定一个对象，这个对象中包含派生类的初始化init(如果必要)，和其他的一些扩展方法
 * 4.关于派生类中的override：可以直接覆盖；可以在派生类中调用基类的方法(必须使用this._super())，并且附加内容
 *
 * 来逐条分析下实现思路。为了达到上述的目的：
 * 1.定义Class函数，作为基类，直接定义在根环境下
 * 2.extend方法作为Class的属性，而不是实例属性，并且返回一个扩展类，因此，必须返回一个类型。看下他的做法，使用了一个dummy类作为返回
 * 3.参数对象
 * 4.把派生类(dummy类)的prototype赋值为基类的实例即可。如何复用基类的方法？这是关键所在。定义prototype的派生类方法。
 * 使用this._super指代基类的方法，作为基类的方法来使用，实际调用时将他替换为基类的方法。这样，参数对象的方法就更新为了
 * 基类+新添加的内容的组合了。他采用的方式是，将基类的原型先保存到_super变量中，更新prototype对应的方法，该方法使用一个
 * 匿名函数重新定义。在重新定义的实现中，先把this._super方法进行了替换，替换为基类的方法，之后才真正去调用参数对象的方法。
 * 闭包在此起到了举足轻重的作用：保持基类的原型对象，通过使用匿名函数的立即调用，将参数对象的方法进行了精致封装，对于初学js
 * 的我来说真是叹为观止。
 * 5.prototype有了，派生也就实现了
 *
 *
 *三.附上代码注释
 * 原注释删掉了，附上的理解，具体使用的例子就不再赘述了
 */

/* Simple JavaScript Inheritance
 * By John Resig http://ejohn.org/
 * MIT Licensed.
 */
(function(){
  //测试下正则表达式，得到一个_super的正则表达式对象，以检查是否使用了基类的方法
  var initializing = false, fnTest = /xyz/.test(function(){xyz;}) ? /\b_super\b/ : /.*/;

  //基类
  this.Class = function(){};

  //extend方法
  Class.extend = function(prop) {
    //保存基类的原型，这个this就是基类类型，就是函数的名称
    var _super = this.prototype;

    //定义一个基类的实例，为了给派生类的prototype用，直接跳过了init方法，init方法可以理解为各个类私有的方法，并且不用于派生
    initializing = true;
    var prototype = new this();
    initializing = false;

    //对prototype属性的重新赋值
    for (var name in prop) {
      prototype[name] = typeof prop[name] == "function" && //必须是函数
        typeof _super[name] == "function" && fnTest.test(prop[name]) ? //必须是使用了_super方法
        (function(name, fn){
          return function() {
            //保存原对象
            var tmp = this._super;

            //增加一个_super方法，并且赋值为基类的方法
            this._super = _super[name];

            //真正调用派生类方法，派生类方法中的this._super刚刚已经更新为了基类的方法
            var ret = fn.apply(this, arguments);

            //restore
            this._super = tmp;

            //返回值仍然是派生的调用返回值
            return ret;
          };
        })(name, prop[name]) :
        prop[name];//条件语句
    }

    //dummy类
    function Class() {
      // All construction is actually done in the init method
      if ( !initializing && this.init )
        this.init.apply(this, arguments);
    }

    //更新prototype
    Class.prototype = prototype;

    //因为上面这句会让它找不到constructior
    Class.prototype.constructor = Class;

    //没错，它也是有extend方法的
    Class.extend = arguments.callee;

    //返回了派生类
    return Class;
  };
})();