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 方法实现了类的创建和继承：

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

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

1. 创建子类原型，将父类的实例赋值给子类原型
2. 将参数中传入的其它子类原型成员通过 Base.prototype.extend() 复制给子类原型
3. 创建子类，将上面处理后的子类原型赋值给子类的原型属性
4. 将参数中传入的初始化函数中的特权成员通过 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);

里面有几个关键点：

1. P 是一个函数，调用时会自动生成一个类
2. 当给 P 传入一个参数且该参数为函数时，P 默认父类为 Object，然后调用该函数，并将创建的类的原型和父类原型传给它，所以你可以在该函数中使用第一个参数为创建的类添加原型成员
3. 当给 P 传入两个参数时，第一个参数为父类，P 会通过原型式寄生组合继承实现原型继承，使创建的类继承父类原型；第二个参数为函数，原理同 2
4. 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;
    }
});

是不是很神奇！！

这里面有几个魔法：

1. def()()：能这么用，说明 def() 执行后返回的是一个函数
2. “<”：就这么一个操作符，它是怎么实现继承的？
3. _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({/*...*/}) 执行顺序如下：

1. 执行 def("User")，创建了 User 类，重新擦写了 deferred 和 deferred.valueOf
2. 执行 Person({/*...*/})，Person 作为普通函数接受子类的扩展包 {/*...*/}，从而使 def.js 中的 deferred._super = Person，deferred._props = {/*...*/}
3. “<”左边计算自身，执行 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 的严格模式下不可用。当然也可以修改，只是会少了些智能化。