Simple JavaScript Inheritance--一个极简JS面向对象-类库

面向对象

面向对象思想的几个重要特征（针对类的要求）：

抽象-封装、信息隐藏（将内部实现的方法和数据隐藏， 定义开放的接口）

继承-子类可以使用父类的资源，并可以定制自己的资源， 资源包括方法和数据

多态-重载（同名函数）、覆盖（继承的基础上重写父类函数）

JS与面向对象

javascript使用prototype实现类的继承功能， 非经典面向对象语言的类的形式， 使用方法也不同， 导致使用较困难。

请参考大师的《深入理解javascript原型和闭包系列》 http://www.cnblogs.com/wangfupeng1988/p/4001284.html

于是各种库都提供了自己实现类库， 例如:

1、 jquery class create： https://github.com/protonet/jquery-class-create

使用Class.Create创建实用类, 即实例的构造函数， 其缺点是用来jquery库

// properties are directly passed to `create` method
  var Person = Class.create({
    initialize: function(name) {
      this.name = name;
    },
    say: function(message) {
      return this.name + ': ' + message;
    }
  });

  // when subclassing, specify the class you want to inherit from
  var Pirate = Class.create(Person, {
    // redefine the speak method
    say: function($super, message) {
      return $super(message) + ', yarr!';
    }
  });

  var john = new Pirate('Long John');
  john.say('ahoy matey');
  // -> "Long John: ahoy matey, yarr!"

2、 prototypejs :  http://prototypejs.org/learn/class-inheritance

作为prototypejs库的一个功能提供， 使用上跟jquery class create接口一致。

此库还提供， ajax和DOM优雅的接口， 消灭客户端开发的复杂性。

这两个库 要么依赖其他库， 要么自身库功能繁杂， 体积都大， 故单独使用的需求不满足。

本文介绍一个不依赖任何库、且实现上只包括类继承的库，  这位大神开发的独立库： John Resig http://ejohn.org/

Simple JavaScript Inheritance

Simple JavaScript Inheritance

此库的官网为

http://ejohn.org/blog/simple-javascript-inheritance/

作者的目标是 简单-容易被人理解， 可重用-不依赖其他库， 使用例子：

    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

实现说明：

1、 创建构造函数必须简单， 构造函数只提供 init初始化方法。

2、 创建新类，必须扩展一个存在的类， 调用extend。

3、 所有的继承与唯一的祖先 Class。 创建的新类必须是Class的子类。

4、 子类中访问父类的同名方法（即被覆盖）必须提供。 通过this.super子类同名方法中调用父类同名方法。

实现要点

实现代码：

    /* 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;

      };

    })();

要点：

1、初始化调用 xx.extend{init:function(){}} 中的 init执行初始化

    // The dummy class constructor

    function Class() {

      // All construction is actually done in the init method

      if ( !initializing && this.init )

        this.init.apply(this, arguments);

    }

2、 子类通过 this._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

如下， 将儿子有此函数， 父亲也有此同名函数时候， 此函数中记录函数地址到this._super中。

      // 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];

    }