【Javascript】Prototype源码浅析——Class部分(一)之类

2011-12-27

说明:

在javascript中,由于缺乏传统面向对象语言的继承机制,类与继承是一个比较复杂的概念。 因此本段解析中,不就javascript中的原型、类、继承、封装进行深入探讨。 需要深入了解的可以去参考大牛的文章,另推荐几本书《javascript高级程序设计》、《javascript语言精髓与编程实践》和《javascript设计模式》,多读几遍就会对javascript的原型有深入的了解。

所以本文只就Prototype远源码涉及到的部分进行解析。

到Class这一步,需要说一下前面没有说到的单体模式,通过前面的几个部分的观察,会发现整个Prototype部分,大部分对象的方法扩展采用的都是类似下面的形式:

    var obj = (function(){
        var variable ;
        function method(){}
        return {
            method:method
        }
    })();

这就是单体模式。

不过这么做有什么好处呢?

单体简单的理解就是一个对象。比如:

    var obj = {
        name : 'xesam',
        say  : function(){
            console.log(this.name);
        }
    };
    obj.say();

此时,obj有个作用就是可以提供一个命名空间,并且组织了一部分变量和方法。

不够这样的一个去缺点就是name完全暴露在外面,可以随意修改,如果name对我们来说是私有的,那么这么样就无法满足要求了。所以鉴于JS中奇特的作用域限制,我们自然得依靠函数来帮忙,于是修改如下:

    var obj = function(){
        var name = 'xesam';
        function say(){
            console.log(name);
        }
    };
    obj.say();

此时,name变成一个局部变量,外界就无法访问了,不过此时obj.say()也会报错,因为obj已经不是一个对象(这里的对象是指普通对象,而非函数这种对象)了,因此我们再让函数自执行,返回我们需要的对象:

    var obj = (function(){
        var name = 'xesam';
        function say(){
            console.log(name);
        }
        return {
            say : say
        }
    })();
    obj.say();

于是就得到了类似Prototype中的形式,这么做的好处大概也就出来了,变量和方法的组织,数据的封装和隐藏。两外,由于匿名函数只执行(实例化)了一次,所以也不会带来内存的问题。如果愿意,也可以这么样来模拟JS中的Math对象。

现在回到Prototype的Class部分,我们来一步步实现Prototype中的Class部分。

对于最常见的类的声明,就是创建一个构造函数,然后扩展其原型。比如:

    function Person(name){
        this.name = name;
    }
    Person.prototype.say = function(){
        console.log('hello ' + this.name);
    }
    var xesam = new Person('xesam');
    xesam.say();

上面定义构造函数和添加方法分开了,现在我们把他们打包到一起。运用刚才说故偶的单体模式,我们先定义一个对象,用作命名空间:

var Class = {}

现在需要提供的是一个初始化变量和添加方法的功能。

写之前我们先得规定一下最终形式的调用方法,我们还是尊重Prototype的形式,并且以上面的Person类为例,声明Person类的形式为:

    var Person = Class.create({
        initialize:function(name){
            this.name = name;
        },
        say : function(){
            console.log('hello ' + this.name);
        }
    });
    var xesam =new Person('xesam');
    xesam.say();

如上所示,Class.create的参数是一个对象,其中initialize包含的是初始化部分(相当于普通面向对象的构造函数),其他部分(say)则是需要添加的方法

【说明:initialize是必须的,其他则可选】

在实现之前,我们先准备一个工具函数$A,作用就是获得一个对象的数组形式(转化为一个数组):

    function $A(iterable) {
        if (!iterable) return [];
        if ('toArray' in Object(iterable)) return iterable.toArray();
        var length = iterable.length || 0, results = new Array(length);
        while (length--) results[length] = iterable[length];
        return results;
    }

这个方法挺简单的,无需多说。

下面我们可以获得一个最简单的Class.create实现:

    var Class = {};
    Class.create = function(source){
        return function(){
            for(var i in source){
                this[i] = function(){
                    source[i].apply(this,$A(arguments));
                }
                //如果你还记得Function部分的内容,这里可以写成this[i] = source[i].bind();
            }
            source.initialize.apply(this,arguments);
        }
    }

    var Person = Class.create({
        initialize:function(name){
            this.name = name;
        },
        say : function(){
            console.log('hello ' + this.name);
        }
    });
    var xesam =new Person('xesam');
    xesam.say();

上面create返回的是一个匿名函数,我们还可以采用另一种方式,先声明一个函数,处理这个函数之后再返回:

    Class.create = function(source){
        var kclass = function(){
            this.initialize.apply(this,arguments);
        };
        for(var i in source){
            kclass.prototype[i] = source[i];
        }
        return kclass;
    };

这里先前的实现其实差不多,而且和最初的Person比较吻合。

分析上面的实现,你会发现定义完成之后,除了去改动初始定义,就没办法扩展了。因此我们在打包了之后再将具体实现分开,将Class分为初始化和添加方法两个部分,并使用刚才说过的单体模式来组织:

    var Class = (function(){
         function create(source){
            function kclass(){
                this.initialize.apply(this,arguments);
            };
            addMethods.call(kclass,source);//注意这里的调用
            return kclass;
        }
        function addMethods(source){
            for(var property in source){
                this.prototype[property] = source[property];
            }
        }
        return {
            create : create,
            addMethods : addMethods
        }
    })();

这么处理过之后,addMethods方法分离出来了,但是现在还是在Class对象上,并不会添加到我们新创建的Person类上面,所以我们将addMethods添加到实现中的kclass上面。

kclass.addMethods = addMethods;//(代码4-1)

注意,这里有个关于扩展性的问题。如果我们的Class并不是只有addMethods一个方法,而且有addMethods1,addMethods2,addMethods3···方法,那么我们总不能按照这个顺序一并写下去吧,所以我们可以用一个对象(比如叫Methods)来把这些方法都组织起来。所以代码4-1的形式变成:

kclass.addMethods = Methods.addMethods;

继续分析,create的参数可能是多个需要添加的方法,因此不能用一个形参source来限定死了,采用内置的arguments对象来替代。所以Class的基本骨架就出来了:

    var Class = (function(){
         function create(){
            var properties = $A(arguments);
            function kclass(){
                this.initialize.apply(this,arguments);//实例化的时候,这里自动调用了initialize方法
            };
            kclass.addMethods = Class.Methods.addMethods;
             //在Prototype中由于有一个Object方法,所以这里调用的是Object.extend(Class.Methods)方法
            for(var i = 0; i < properties.length; i++){
                kclass.addMethods(properties[i]);
            }
            if (!kclass.prototype.initialize){//这里是一个小检测,避免因找不到initialize而报错
                kclass.prototype.initialize = function(){};
            }
            return kclass;
        }
        function addMethods(source){
            for(var property in source){
                this.prototype[property] = source[property];
            }
        }
        return {
            create : create,
            Methods : { //注意这里的改动
                addMethods : addMethods
            }
        }
    })();

到此,我们有了一个Class对象(可以创建类和添加方法)和一个Person类(有name属性和say方法)。

如有问题,请咨询QQ群 723245925


文档信息 by XiaoPingYuan

版权声明:自由转载-非商用-非衍生-保持署名。发表日期:2011-12-27 by XiaoPingYuan(https://xesam.github.io/)