这些天读了John Resig的《Secrets of JavaScript Ninja》，其中讨论到JS中实现继承的方案，非常有趣，自己探索了一下，形成了笔记，放到这里。

这个方案在Resig的博客上也有，虽然代码略微有点不一致，但核心思想是一样的，请戳 这里 。

<html>

<head>

    <title></title>

</head>

<body>

<script type="text/javascript">

    // call a immediate funciton，prevent global namespace from being polluted.

    (function(){

        // 这个initializing变量用于标识当前是否处于类的初始创建阶段，下面会继续详述

        var initializing = false,

        // 这是一个技巧性的写法，用于检测当前环境下函数是否能够序列化

        // 附一篇讨论函数序列化的文章：http://www.cnblogs.com/ziyunfei/archive/2012/12/04/2799603.html

        // superPattern引用一个正则对象，该对象用于验证被验证函数中是否有使用_super方法

            superPattern = /xyz/.test(function(){xyz;}) ? /\b_super\b/ : /.*/;

        Object.subClass = function(properties){

            // 当前对象（父类）的原型对象

            var _super = this.prototype;

            // initializing = true表示当前处于类的初始创建阶段。

            // this构造函数里会判断initializing的状态，如果为false则不执行Init方法。

            // 事实上这也是非常需要的，因为在这个时候，我们需要的只是一个干净的虚构的构造函数，完全不需要其执行init函数，以避免污染。init方法只有在当前类被实例化的时候才需要被执行，而当前正执行继承行为，不应该执行Init方法。

            initializing = true;

            // 当前对象（父类）的一个实例对象

            var proto = new this();

            // 初始创建阶段完成，置initializing为false

            initializing = false;

            // 在properties里提供的属性，作为当前对象（父类）实例的公共属性，供其子类实例共享；

            // 在properties里提供的方法，作为当前对象（父类）实例的公共方法，供其子类实例共享。

            for(var name in properties){

                proto[name] = typeof properties[name] == 'function' && //检测当前提供的是否为函数

                              typeof _super[name] == 'function' && //检测当前提供的函数名是否已经存在于父类的原型对象中，如果是，则需要下面的操作，以保证父类中的方法不会被覆盖且可以以某种方式被调用，如果否，则直接将该函数赋值为父类实例的方法

                              superPattern.test(properties[name]) ? f//检测当前提供的函数内是否使用了_super方法，如果有使用_super方法，则需要下面的操作，以保证父类中的方法不会被覆盖且可以以某种方式被调用，如果没有用到_super方法，则直接将该函数赋值为父类实例的方法，即使父类原型中已经拥有同名方法（覆盖）

                    // 使用一个马上执行的函数，返回一个闭包，这样每个闭包引用的都是各自的name和fn。

                    (function(name, fn){

                        return function() {

                            // 首先将执行方法的当前对象（子类的实例化对象）的_super属性保存到tmp变量里。

                            // 这是非常必要的， 因为this永远指向当前正在被调用的对象。

                            // 当C继承B，B继承A，而A\B\C均有一个dance方法且B\C的dance方法均使用了this._super来引用各自父类的方法时，下面这句操作就显得非常重要了。它使得在方法调用时，this._super永远指向“当前类”的父类的原型中的同名方法，从而避免this._super被随便改写。

                            var tmp = this._super;

                            // 然后将父类的原型中的同名方法赋值给this._super，以便子类的实例化对象可以在其执行name方法时通过this._super使用对应的父类原型中已经存在的方法

                            this._super = _super[name];

                            // 执行创建子类时提供的函数，并通过arguments传入参数

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

                            // 将tmp里保存的_super属性重新赋值回this._super中

                            this._super = tmp;

                            // 返回函数的执行结果

                            return ret;

                        };

                    })(name, properties[name]) :

                    properties[name];

            }

            // 内部定义个名叫Class的类，构造函数内部只有一个操作：执行当前对象中可能存在的init方法

            // 这样做的原因：新建一个类（闭包），可以防止很多干扰（详细可对比JS高级设计第三版）

            function Class(){

                // 如果不是正在实现继承，并且当前类的init方法存在，则执行init方法

                // 每当subClass方法执行完毕后，都会返回这个Class构造函数，当用户使用new 方法时，就会执行这里面的操作

                // 本质：每次调用subClass都新建一个类（闭包）

                if(!initializing && this.init){

                    // 这是子类的初始化方法，里面可以定义子类的私有属性，公共属性请在上方所述处添加

                    this.init.apply(this, arguments);

                }

            }

            // 重写Class构造函数的prototype，使其不再指向了Class原生的原型对象，而是指向了proto，即当前对象（类）的一个实例

            // 本质：一个类的原型是另一个类的实例（继承）

            Class.prototype = proto;

            // 为什么要重写Class的构造函数？因为这个Class函数，它原来的constructor指向的是Function对象，这里修正它的指向，使其指向自己。

            Class.constructor = Class;

            // 就是这个操作，使得每次调用subClass都会新生命的Class对象，也拥有subClass方法，可以继续被继承下去

            // 本质：使得每次继承的子类都拥有被继承的能力

            Class.subClass = arguments.callee;

            // 返回这个内部新定义的构造函数（闭包）

            return Class;

        };

    })();

    var Person = Object.subClass({

        init: function(isDancing) {

            this.dancing = isDancing;

        },

        dance: function(){

            console.log('i am a person,i dance.');

            return this.dancing;

        }

    });

    var Ninja = Person.subClass({

        init:function(){

        },

        dance: function() {

            console.log('i am an Ninja,i dance.');

            this._super();

            return;

        },

        swingSword:function(){

            return true;

        }

    });

    var Chileung = Ninja.subClass({

        dance: function(){

            console.log('i am Chileung.i dance.');

            this._super();

            return;

        }

    });

    var p = new Person();

    p.dance();

    var n = new Ninja();

    n.dance();

    var c = new Chileung();

    c.dance();

</script>

</body>

</html>
在博客园里也找到了一篇不错的有关这种继承方式的讨论，参见 这里

另外自己以前曾经也思考过Zakas提出的继承方案，文章见 这里

【深入JavaScript】一种JS的继承方法的更多相关文章

  1. JavaScript几种常见的继承方法

    1.call() 方法 call() 方法是与经典的对象冒充方法最相似的方法.它的第一个参数用作 this 的对象.其他参数都直接传递给函数自身 function Huster(name,idNum, ...

  2. 浅谈6种JS数组遍历方法的区别

    本篇文章给大家介绍一下6种JS数组遍历方法:for.foreach.for in.for of.. each. ().each的区别.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. ...

  3. JavaScript四种数值取整方法

    一.Math.trunc() 1.定义 Math.trunc()方法去除数字的小数部分,保留整数部分. 2.语法 Math.trunc(value) 3.示例 console.log(Math.tru ...

  4. js各继承方法的优缺点

    在js中有很多种继承的方法,下面总结这些方法的优缺点. ####1.原型链继承 优点: 非常纯粹的继承关系,实例是子类的实例,也是父类的实例 父类新增原型方法/原型属性,子类都能访问到 简单,易于实现 ...

  5. javascript四种类型识别的方法

    × 目录 [1]typeof [2]instanceof [3]constructor[4]toString 前面的话 javascript有复杂的类型系统,类型识别则是基本的功能.javascrip ...

  6. JavaScript 五种(构造方式)继承

    一.对象冒充 function Parent(username){ this.username = username; this.hello = function(){ alert(this.user ...

  7. javascript笔记——源生js实现each方法

    出处:http://www.lovejavascript.com/#!zone/blog/content.html?id=48 jquery里面有个each方法,将循环操作简化.便捷. 随后es出了个 ...

  8. 三种JS截取字符串方法

    JS提供三个截取字符串的方法,分别是:slice(),substring()和substr(),它们都可以接受一个或两个参数: var stmp = "rcinn.cn"; 使用一 ...

  9. cocos2d JS 源生js实现each方法

    javascript笔记——源生js实现each方法   出处:http://www.lovejavascript.com/#!zone/blog/content.html?id=48 jquery里 ...

随机推荐

  1. @ManyToOne和@OneToMany 注解

    (1)ManyToOne(多对一)单向:不产生中间表,但可以用@Joincolumn(name="  ")来指定生成外键的名字,外键在多的一方表中产生! (2)OneToMany( ...

  2. 「SDOI2008」洞穴勘测

    题目链接 戳我 \(Solution\) \(LCT\)裸题 \(Connect\)操作,执行\(link(u,v)\) \(Destroy\)操作,执行\(cut(u,v)\) \(Query\)操 ...

  3. Oracle数据库02

    EXISTS子查询 特征:将主查询中的数据带到子查询中进行验证,如果验证成功则子查询返回true,当主查询接收到true的时候被验证的数据就显示,如果在子查询中验证失败则返回false,当主查询接收到 ...

  4. Maven 项目中使用mybatis-generator生成代码

    在使用Maven构建SSM项目时,使用mybatis-generator插件自动生成代码 一.目录结构 bean:用来存放生成的实体类 dao:用来存放生成的 *mapper.java文件 mappe ...

  5. Java中的内部类（二）成员内部类

    Java中的成员内部类(实例内部类):相当于类中的一个成员变量,下面通过一个例子来观察成员内部类的特点 public class Outer { //定义一个实例变量和一个静态变量 private i ...

  6. 【Oracle 12c】CUUG OCP认证071考试原题解析（32）

    32.choose the best answer View the Exhibit and examine the data in EMP and DEPT tables. In the DEPT ...

  7. 真机测试 Thnetwork connection was lost. No profiles for 'xxx' were found: Xcode couldn't find a provisioning profile matching 'xxx'. Code signing is required for product type

    最近接手了一个新项目,是从外包接手的,结果出现了很多问题,真的很崩溃,崩溃,吐槽一下 问题一:一直请求不到数据,因为外包只做了一版,上架的这个版本是可以显示数据的,但是给我的项目是没有数据的,因为并没 ...

  8. BZOJ 1579--道路升级(DP&最短路)

    1579: [Usaco2009 Feb]Revamping Trails 道路升级 Time Limit: 10 Sec  Memory Limit: 64 MBSubmit: 2206  Solv ...

  9. CentOS+uwsgi+django+nginx 环境部署及分析

    写在部署前 在线上部署django项目时,比较成熟的方案是:nginx + uWSGI + Django. nginx和Django 都比较熟悉了,uWSGI是什么呢?WSGI是一个协议,python ...

  10. JVM调优总结 -Xms -Xmx -Xmn -Xss（转自：iteye unixboy）

    堆大小设置JVM 中最大堆大小有三方面限制:相关操作系统的数据模型(32-bt还是64-bit)限制:系统的可用虚拟内存限制:系统的可用物理内存限制.32位系统下,一般限制在1.5G~2G:64为操作 ...