码迷,mamicode.com
首页 > 编程语言 > 详细

Simple JavaScript Inheritance--一个极简JS继承库

时间:2015-07-22 01:28:01      阅读:173      评论:0      收藏:0      [点我收藏+]

标签:

面向对象

面向对象思想的几个重要特征(针对类的要求):

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

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

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

 

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库

<pre>
// 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!"
</pre>

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/

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

<pre>

  1. var Person = Class.extend({

  2.   init: function(isDancing){

  3.     this.dancing = isDancing;

  4.   },

  5.   dance: function(){

  6.     return this.dancing;

  7.   }

  8. });

  9. var Ninja = Person.extend({

  10.   init: function(){

  11.     this._super( false );

  12.   },

  13.   dance: function(){

  14.     // Call the inherited version of dance()

  15.     return this._super();

  16.   },

  17.   swingSword: function(){

  18.     return true;

  19.   }

  20. });

  21. var p = new Person(true);

  22. p.dance(); // => true

  23. var n = new Ninja();

  24. n.dance(); // => false

  25. n.swingSword(); // => true

  26. // Should all be true

  27. p instanceof Person && p instanceof Class &&

  28. n instanceof Ninja && n instanceof Person && n instanceof Class

</pre>

实现说明:

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

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

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

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

 

实现要点

 

实现代码:

<pre>

  1. /* Simple JavaScript Inheritance

  2. * By John Resig http://ejohn.org/

  3. * MIT Licensed.

  4. */

  5. // Inspired by base2 and Prototype

  6. (function(){

  7.   var initializing = false, fnTest = /xyz/.test(function(){xyz;}) ? /\b_super\b/ : /.*/;

  8.   // The base Class implementation (does nothing)

  9.   this.Class = function(){};

  10.   // Create a new Class that inherits from this class

  11.   Class.extend = function(prop) {

  12.     var _super = this.prototype;

  13.     // Instantiate a base class (but only create the instance,

  14.     // don‘t run the init constructor)

  15.     initializing = true;

  16.     var prototype = new this();

  17.     initializing = false;

  18.     // Copy the properties over onto the new prototype

  19.     for (var name in prop) {

  20.       // Check if we‘re overwriting an existing function

  21.       prototype[name] = typeof prop[name] == "function" &&

  22.         typeof _super[name] == "function" && fnTest.test(prop[name]) ?

  23.         (function(name, fn){

  24.           return function() {

  25.             var tmp = this._super;

  26.             // Add a new ._super() method that is the same method

  27.             // but on the super-class

  28.             this._super = _super[name];

  29.             // The method only need to be bound temporarily, so we

  30.             // remove it when we‘re done executing

  31.             var ret = fn.apply(this, arguments);       

  32.             this._super = tmp;

  33.             return ret;

  34.           };

  35.         })(name, prop[name]) :

  36.         prop[name];

  37.     }

  38.     // The dummy class constructor

  39.     function Class() {

  40.       // All construction is actually done in the init method

  41.       if ( !initializing && this.init )

  42.         this.init.apply(this, arguments);

  43.     }

  44.     // Populate our constructed prototype object

  45.     Class.prototype = prototype;

  46.     // Enforce the constructor to be what we expect

  47.     Class.prototype.constructor = Class;

  48.     // And make this class extendable

  49.     Class.extend = arguments.callee;

  50.     return Class;

  51.   };

  52. })();

</pre>

 

要点:

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 访问父类的同名函数, 例如:

    1. var Person = Class.extend({

    2.   init: function(isDancing){

    3.     this.dancing = isDancing;

    4.   }

    5. });

    6. var Ninja = Person.extend({

    7.   init: function(){

    8.     this._super( false );

    9.   }

    10. });

    11. var p = new Person(true);

    12. p.dancing; // => true

    13. var n = new Ninja();

    14. 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];

  •     }

  • Simple JavaScript Inheritance--一个极简JS继承库

    标签:

    原文地址:http://www.cnblogs.com/lightsong/p/4666112.html

    (0)
    (0)
       
    举报
    评论 一句话评论(0
    登录后才能评论!
    © 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
    迷上了代码!