JavaScript几种类工厂实现原理剖析

PS：
本文参考了司徒正美的《JavaScript框架设计》，以及许多其它的书籍和网络文章，感谢作者们分享了这么好的学习资源！
关于JS的类和继承的原理，见：JavaScript里的类和继承
文中提到的库和测试文件戳这里：https://github.com/hellobugme/jsclass/

1、基于拷贝继承

Prototype（http://prototypejs.org/）和 jQuery（https://jquery.com/）都是风靡一时的库，功能大而全，并不是纯粹的类工厂，这里只是简单说下里面的继承。
它们的 extend 都是基于拷贝继承，其中 jQuery 支持深度拷贝（deep copy）。
拷贝继承的缺点在上篇文章中有提过：子类实例无法通过父类的 instanceof 验证。

Prototype 中类和继承相关的代码如下：

var Class = {

    create: function() {

        return function() {

            this.initialize.apply(this, arguments);

        }

    }

};

Object.extend = function(destination, source) {

    for (var property in source) {

        destination[property] = source[property];

    }

    return destination;

};

是吧，够简单的… 只不过是使用 Class.create() 创建出来的类，在实例化时会主动帮你执行下初始化函数 initialize 而已。使用方法大致如下：

var Person = Class.create();

Object.extend(Person.prototype, {

    initialize: function(name) {

        this.name = name;

    },

    getName: function() {

        return this.name;

    }

});

var User = Class.create();

User.prototype = Object.extend(new Person(), {

    initialize: function(name, password) {

        this.name = name;

        this.password = password;

    },

    getPassword: function() {

        return this.password;

    }

});

jQuery 在 extend 的实现中加入递归，对数组和对象等引用类型的属性值进行深度拷贝：

（... 表示一大波的代码，下同）

jQuery.extend = jQuery.fn.extend = function() {

    //...

    for (name in options) {

        src = target[name];

        copy = options[name];

        //...

        if (deep && copy && (jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)))) {

            if (copyIsArray) {

                copyIsArray = false;

                clone = src && jQuery.isArray(src) ? src : [];

            } else {

                clone = src && jQuery.isPlainObject(src) ? src : {};

            }

            // 通过递归对数组和对象进行深度拷贝

            target[name] = jQuery.extend(deep, clone, copy);

        } else if (copy !== undefined) {

            target[name] = copy;

        }

    }

    //...

};

deep 是可选参数，指定是否进行深度拷贝。

通过 jQuery.isPlainObject() 和 jQuery.isArray() 判断属性值是否为纯粹对象或数组，然后决定是递归操作还是直接赋值。

2、Sugar

道爷（Douglas Crockford）在自己的网站上提出了一套简单的方法来模拟类式继承—— Sugar（http://javascript.crockford.com/inheritance.html）。

 // 辅助函数，可以将新函数绑定到对象的 prototype 上

 Function.prototype.method = function(name, func) {

     this.prototype[name] = func;

     return this;

 };

 // 从其它对象继承函数，同时仍然可以调用数据父对象的那些函数

 Function.method('inherits', function(parent) {

     // 继承父对象的方法

     this.prototype = new parent();

     this.prototype.constructor = parent;

     var d = {},

         p = this.prototype;

     // 创建一个新的特权函数'uber'，调用它时会执行所有在继承时被重写的函数

     this.method('uber', function uber(name) {

         if (!(name in d)) {

             d[name] = 0;

         }

         var f, // 要执行的函数

             r, // 函数的返回值

             t = d[name], // 记录当前所在的父层次的级数

             v = parent.prototype; // 父对象的prototype

         // 如果已经在某个'uber'函数之内

         if (t) {

             // 上溯必要的t，找到原始的prototype

             while (t) {

                 v = v.constructor.prototype;

                 t -= 1;

             }

             // 从该prototype中获得函数

             f = v[name];

             // 否则这就是'uber'函数的第一次调用

         } else {

             // 从prototype获得要执行的函数

             f = p[name];

             // 如果此函数属于当前的prototype

             if (f == this[name]) {

                 // 则改为调用父对象的prototype

                 f = v[name];

             }

         }

         // 记录在继承堆栈中所在位置的级数

         d[name] += 1;

         // 使用除第一个以外所有的arguments调用此函数

         r = f.apply(this, Array.prototype.slice.apply(arguments, [1]));

         // 恢复继承堆栈

         d[name] -= 1;

         // 返回执行过的函数的返回值

         return r;

     });

     return this;

 });

 // 只继承父对象特定函数的函数(非使用new parent()继承所有的函数)

 Function.method('swiss', function(parent) {

     // 遍历所有要继承的方法

     for (var i = 1; i < arguments.length; i += 1) {

         // 需要导入的方法名

         var name = arguments[i];

         // 将此方法导入this对象的prototype中

         this.prototype[name] = parent.prototype[name];

     }

     return this;

 });

因为JS中的类本身就是一个函数，所以直接为 Function 的原型扩展了 method、inherits、swiss 三个方法，所有类也能获得这些方法。

重点在于 inherits 中添加的特权方法“uber”（为什么不叫“super”叫“uber”？难道道爷是优步忠实粉？好吧，很冷…），它根据继承堆栈级数回溯到相应的祖先类原型方法，让你在子类中可以非常方便地调用被重写的父类原型方法。

function Person(name) {

    this.name = name;

}

Person.method('getName', function() {

    return name;

});

function User(name, password) {

    this.name = name;

    this.password = password;

}

User.inherits(Person);

User.method('getPassword', function() {

    return this.password;

});

// 重写父类原型方法

User.method('getName', function() {

    // 通过 uber() 调用父类的 getName()

    return "My name is: " + this.uber('getName');

});

3、Base

Base（http://dean.edwards.name/base/）是 Dean Edwards 开发的一个类工厂库，它提供了一套比较直观的对象继承方法，对后来许多类工厂的实现有不小的影响，如：
JS.Class（http://dkraczkowski.github.io/js.class/）、
simple-inheritance（http://ejohn.org/blog/simple-javascript-inheritance/）
都借鉴了 Base 的继承系统。

Base 的代码较长，忽略具体实现，只留关键步骤后大致如下：

 var Base = function() {

     // 并没有什么卵用

 };

 //Base.extend 方法功能：

 //1、创建子类；2、继承父类；3、返回子类

 Base.extend = function(_instance, _static) {

     var proto = new this; //原型继承，proto将作为子类的prototype

     Base.prototype.extend.call(proto, _instance); //给子类添加原型方法

     //...

     var klass = function() {}; //子类

     klass.prototype = proto;

     Base.prototype.extend.call(klass, _static); //给子类添加特权方法

     //...

     return klass; //返回子类

 };

 //Base.prototype.extend 方法功能：

 //复制新的成员到子类

 Base.prototype = {

     extend: function(source, value) {

         if (arguments.length > 1) {

             //传入的是2个参数，为键值对，直接给this的source赋值为value

             //该方法通过call来调用，这里的执行环境this为调用时传入的环境

             //...

             this[source] = value;

         } else {

             //传入的是1个参数，为对象，遍历对象，把对象的所有属性复制给this

             //...

             for (var key in source) {

                 Base.prototype.extend.call(this, key, source[key]);

             }

         }

         return this;

     }

 };

 //初始化Base

 Base = Base.extend({

     constructor: function() { /*...*/ }

 }, {

     ancestor: Object,

     version: "1.1"

         // ...

 });

Base 通过两个 extend 方法实现了类的创建和继承：

Base.extend()：这个直接添加在 Base 上的静态方法，实现了类的创建、类的继承；
Base.prototype.extend()：这个添加在 Base 原型上的方法，其实就是个工具函数，实现了属性拷贝。

调用 Base.extends() 创建子类的过程如下：

创建子类原型，将父类的实例赋值给子类原型
将参数中传入的其它子类原型成员通过 Base.prototype.extend() 复制给子类原型
创建子类，将上面处理后的子类原型赋值给子类的原型属性
将参数中传入的初始化函数中的特权成员通过 Base.prototype.extend() 复制给子类

Base 的使用方法如下：

var Person = Base.extend({

    constructor: function(name) {

        this.name = name;

    },

    getName: function() {

        return this.name;

    }

});

var User = Person.extend({

    constructor: function(name, password) {

        this.base(name);

        this.password = password;

    },

    getPassword: function() {

        return this.password;

    }

});

一个代码块就创建了一个类并实现了继承，用起来是不是很爽？

4、P.js

P.js（https://github.com/jneen/pjs）是一个非常精巧的库，它最大的特点是直接把父类的原型抛出来，在调用父类方法时非常方便。

 var P = (function(prototype, ownProperty, undefined) {

     return function P(_superclass /* = Object */ , definition) {

         // 如果只有一个参数，表示没有父类

         if (definition === undefined) {

             definition = _superclass;

             _superclass = Object;

         }

         // C为要返回的子类，init为初始化函数

         function C() {

             var self = this instanceof C ? this : new Bare;

             self.init.apply(self, arguments);

             return self;

         }

         // Bare让C不用new就能返回实例

         function Bare() {}

         C.Bare = Bare;

         // 为了防止改动子类影响到父类，所以将父类的原型赋值给中介者Bare，然后再将Bare的实例作为子类的原型

         var _super = Bare[prototype] = _superclass[prototype];

         var proto = Bare[prototype] = C[prototype] = C.p = new Bare;

         var key;

         // 修正子类的构造器函数，使其指向自身

         proto.constructor = C;

         C.extend = function(def) {

             return P(C, def);

         }

         return (C.open = function(def) {

             // 如果def是函数，则直接调用，并传入子类原型、父类原型、子类构造器、父类构造器

             if (typeof def === 'function') {

                 def = def.call(C, proto, _super, C, _superclass);

             }

             // 如果def是对象，则是子类的扩展包，将其属性添加到子类原型

             if (typeof def === 'object') {

                 for (key in def) {

                     // ownProperty其实就是传入的Object.hasOwnProperty

                     if (ownProperty.call(def, key)) {

                         proto[key] = def[key];

                     }

                 }

             }

             // 确保有初始化函数可以调用

             if (!('init' in proto)) proto.init = _superclass;

             return C;

         })(definition);

     }

 })('prototype', ({}).hasOwnProperty);

里面有几个关键点：

P 是一个函数，调用时会自动生成一个类
当给 P 传入一个参数且该参数为函数时，P 默认父类为 Object，然后调用该函数，并将创建的类的原型和父类原型传给它，所以你可以在该函数中使用第一个参数为创建的类添加原型成员
当给 P 传入两个参数时，第一个参数为父类，P 会通过原型式寄生组合继承实现原型继承，使创建的类继承父类原型；第二个参数为函数，原理同 2
P 在处理完传入的参数后，会调用创建的类的原型方法 init() 进行初始化，从而实现特权成员的添加

P.js 的使用方法如下：

// 将一个函数传给P，P会先创建一个类，然后后调用该函数，并将创建的类的原型和父类原型传入，所以在该函数中可以通过第一个参数来给类添加原型成员

var Person = P(function(proto, superProto) {

    // init为初始化函数，P会在完成类的处理后自动调用该方法

    proto.init = function(name) {

        // 添加特权成员

        this.name = name;

    };

    proto.getName = function() {

        return this.name;

    };

});

var User = P(Person, function(user, person) {

    user.init = function(name, password) {

        // 通过P传入的父类原型，可以很方便的访问父类原型成员

        person.init.call(this, arguments);

        this.password = password;

    };

    user.getPassword = function() {

        return this.password;

    };

});

妈妈再也不用担心我调不到父类方法了！

5、def.js

如果说有什么库最能体现 JS 的灵活性，def.js（http://badassjs.com/post/811837523/def-js-ruby-style-inheritance-in-javascript）肯定名列前茅！
它试图在形式上模拟 Ruby 那种继承，让学过 Ruby 的人一眼就看到哪个是父类，哪个是子类。

Ruby 的继承是这样的：

class User < Person

    #...

end

而 def.js 能做到这样：

def("Person")({

    init: function(name) {

        this.name = name;

    },

    getName: function() {

        return this.name;

    }

});

def("User") < Person({

    init: function(name, password) {

        this._super();

        this.password = password;

    },

    getPassword: function() {

        return this.password;

    }

});

是不是很神奇！！

这里面有几个魔法：

def()()：能这么用，说明 def() 执行后返回的是一个函数
“<”：就这么一个操作符，它是怎么实现继承的？
_super()：简单的一行 this._super()，就神奇地调用了父类同名方法！

先来说说“<”操作符的运用。
在 JS 中，当两个对象进行算术运算或大小比较时，如果它们不是数值，则会尝试将其转换为数值，即调用其 valueOf 方法。
“<”操作符的目的就是强制两边计算自身，从而调用自己的 valueOf 方法，def.js 就是通过重写父类与子类的 valueOf，在里面偷偷实现了原型继承。
先来看一个简单的例子：

var a = {

        valueOf: function() {

            console.log("aaaaa");

        }

    },

    b = {

        valueOf: function() {

            console.log("bbbbb");

        }

    };

console.log(a < b);

执行结果如下：

可以看到，先是执行了 a 的 valueOf()，然后执行了 b 的 valueOf()，最后返回比较结果false。

再来看看 def.js 的源码，我们在其中几个关键点输出日志（代码中的console.log）：

 (function(global) {

     // deferred 是整个库中最重要的部件，扮演3个角色

     // 1、def("SuperClass")时就是返回deferred，此时我们可以直接接括号对原型进行扩展

     // 2、在继承父类时 < 触发两者调用 valueOf，此时会执行 deferred.valueOf 里面的逻辑

     // 3、在继承父类时，父类的后面还可以接括号（此时构造器当普通函数使用），当作传送器，保存着父类与扩展包到 _super._props

     var deferred;

     // 扩展自定义的原型

     function extend(source) {

         var prop, target = this.prototype;

         for (var key in source)

             if (source.hasOwnProperty(key)) {

                 prop = target[key] = source[key];

                 if ('function' == typeof prop) {

                     // 在每个原型方法上添加2个自定义属性，保存其名字与当前类

                     prop._name = key;

                     prop._class = this;

                 }

             }

         return this;

     }

     function base() {

         // 取得调用 this._super() 这个函数本身，如果是在init内，那么就是当前类

         var caller = arguments.callee.caller;

         // 执行父类的同名方法，有2种形式，一是用户自己传，二是只能取当前函数的参数

         return caller._class._super.prototype[caller._name]

             .apply(this, arguments.length ? arguments : caller.arguments);

     }

     function def(context, klassName) {

         console.log("def called");

         klassName || (klassName = context, context = global);

         // 偷偷在给定的全局作用域或某对象上创建一个类

         var Klass = context[klassName] = function Klass() {

             if (context != this) {

                 // 如果不使用 new 操作符，大多数情况下 context 与 this 都为 window

                 return this.init && this.init.apply(this, arguments);

             }

             // 实现继承的第二步，复制自身与扩展包到 deferred

             console.log("Klass constructor called");

             deferred._super = Klass;

             deferred._props = arguments[0] || {};

         }

         // 让所有自定义类都共用一个 extend 方法

         Klass.extend = extend;

         // 实现继承的第一步，重写 deferred，为新创建的自定义类的扩展函数

         deferred = function(props) {

             return Klass.extend(props);

         };

         // 一个中介者，用于切断子类与父类的原型连接，会被反复读写

         function Subclass() {}

         // 实现继承的第三步，重写 valueOf，方便在 def("SubClass") < SuperClass({}) 执行它

         deferred.valueOf = function() {

             console.log("deferred.valueOf called");

             var Superclass = deferred._super;

             if (!Superclass) {

                 return Klass;

             }

             // 先将父类的原型赋给中介者，然后再将中介者的实例作为子类的原型

             Subclass.prototype = Superclass.prototype;

             var proto = Klass.prototype = new Subclass;

             // 引用自身与父类

             Klass._class = Klass;

             Klass._super = Superclass;

             // 获取该类名字

             Klass.toString = function() {

                 return klassName;

             };

             // 修复原型中 constructor 指向自身

             proto.constructor = Klass;

             // 让所有自定义类都共用这个 base 方法，它是构成方法链的关系

             proto._super = base;

             // 把父类后来传入的扩展包混入子类的原型中

             deferred(deferred._props);

         };

         return deferred;

     }

     global.def = def;

 }(this));

结果如下：

第一个“def called”是创建 Person 时输出的，忽略。
从接下来 3 个日志的输出顺序可以推测出，def("User") < Person({/*...*/}) 执行顺序如下：

执行 def("User")，创建了 User 类，重新擦写了 deferred 和 deferred.valueOf
执行 Person({/*...*/})，Person 作为普通函数接受子类的扩展包 {/*...*/}，从而使 def.js 中的 deferred._super = Person，deferred._props = {/*...*/}
“<”左边计算自身，执行 valueOf 操作，继承了 deferred._super 中存储的父类的原型，并拷贝了 deferred._props 中存储的子类扩展包

太妙了！！这需要对 def("User") < Person({/*...*/}) 这一行代码各个部分的执行顺序有充分的了解，才能做出如此巧妙的设计。

接下来说说第 3 点：_super 的原理。
这里其实是对 arguments.callee.caller 的运用，通过 caller 可以获取到当前调用的原型方法的引用。
而 def.js 在 extend() 中为每个原型方法都添加了 _name（方法名）和 _class（指向当前类）两个属性，因此，通过 caller._name 可以获得方法名，caller._class._super 可以获得父类引用，有了这两样东西，自然就能调用父类同名方法了。
不过遗憾的是， caller 是被废弃的属性，在 ES5 的严格模式下不可用。当然也可以修改，只是会少了些智能化。