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

说明:

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

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

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

1
2
3
4
5
6
7
var obj = (function(){
var variable ;
function method(){}
return {
method:method
}
})();

这就是单体模式。

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

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

1
2
3
4
5
6
7
var obj = {
name : 'xesam',
say : function(){
console.log(this.name);
}
};
obj.say();

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

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

1
2
3
4
5
6
7
var obj = function(){
var name = 'xesam';
function say(){
console.log(name);
}
};
obj.say();

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

1
2
3
4
5
6
7
8
9
10
var obj = (function(){
var name = 'xesam';
function say(){
console.log(name);
}
return {
say : say
}
})();
obj.say();

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

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

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

1
2
3
4
5
6
7
8
function Person(name){
this.name = name;
}
Person.prototype.say = function(){
console.log('hello ' + this.name);
}
var xesam = new Person('xesam');
xesam.say();

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

1
var Class = {}

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

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

1
2
3
4
5
6
7
8
9
10
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,作用就是获得一个对象的数组形式(转化为一个数组):

1
2
3
4
5
6
7
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实现:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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返回的是一个匿名函数,我们还可以采用另一种方式,先声明一个函数,处理这个函数之后再返回:

1
2
3
4
5
6
7
8
9
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分为初始化和添加方法两个部分,并使用刚才说过的单体模式来组织:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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上面。

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

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

1
kclass.addMethods = Methods.addMethods;

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
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方法)。