[原]浅析Javascript中继承和Prototype的关系

JavaScript中支持类的定义，而且定义的方式与函数基本上也相同。

1
5function BaseClass() {
6 this.a="I'm BaseClass.a .";
7};
第一行的内容可以看成是一个函数，第五行可以看成是一个类。

我们继续，现在我们来看看Javascript 中的继承，以及 Prototype 与继承的关系。先来看看下面这个代码。你能想出运行的结果吗？

1 <script>
2 // author: http://meil.livebaby.cn
3 function out(val){
4 document.write(val+"<br>");
5 };
6
7 function BaseClass() {
8 this.a="I'm BaseClass.a .";
9 };
10 BaseClass.prototype.b="I'm BaseClass.prototype.b .";
11 BaseClass.c="I'm BaseClass.c .";
12
13 var cls1=function(){
14 this.a="I'm cls1.a .";
15 };
16 cls1.prototype.b="I'm cls1.prototype.b .";
17 cls1.c="I'm cls1.c .";
18
19 var cls2=function(){};
20 cls2.prototype=cls1.prototype;
21
22 out("BaseClass<br>");
23 out((new BaseClass).a);
24 out((new BaseClass).b);
25 out((new BaseClass).c);
26 out(BaseClass.c);
27 out("<hr>");
28
29 out("cls1<br>");
30 out(cls1.a);
31 out(cls1.b);
32 out(cls1.c);
33 out("<hr>");
34
35 out("new cls1<br>");
36 out((new cls1).a);
37 out((new cls1).b);
38 out((new cls1).c);
39 out("<hr>");
40
41 out("cls2<br>");
42 out((new cls2).a);
43 out((new cls2).b);
44 out((new cls2).c);
45
46 </script>

运行结果：

BaseClass

I'm BaseClass.a .
I'm BaseClass.prototype.b .
undefined
I'm BaseClass.c .

cls1

undefined
undefined
I'm cls1.c .

new cls1

I'm cls1.a .
I'm cls1.prototype.b .
undefined

cls2

undefined
I'm cls1.prototype.b .
undefined

哈哈！有点晕了！？好像不太一样。

下面来分析一下：

1.先看看这几行：
22 out("BaseClass<br>");
23 out((new BaseClass).a);
24 out((new BaseClass).b);
25 out((new BaseClass).c);
26 out(BaseClass.c);
27 out("<hr>");

25行是调用了对象的c属性，类中没有定义，所以“undefined”
26行直接调用了，类的静态属性，就正常显示了
其他的大家应该都明白了，就不多说了。

2.继续
30 out(cls1.a);
31 out(cls1.b);
32 out(cls1.c);

首先大家应该清楚cls1在这里是类，那就明了。这里cls1只有一个静态属性，就是c，其他的属性只能通过它的对象访问。用类名来访问对不起，找不到只能显示“undefined”，看下面的代码就清楚了。

3.继续
36 out((new cls1).a);
37 out((new cls1).b);
38 out((new cls1).c);

你不是说得用对象访问吗？我new这回可以了吧？恩！没问题？
不过不是都没问题这个不行-- out((new cls1).c); 那个是类的静态属性用这个 32 out(cls1.c); 就OK。

4.继续
41 out("cls2<br>");
42 out((new cls2).a);
43 out((new cls2).b);
44 out((new cls2).c);

这个的结果有点疑惑，先等等。看看我们是怎么写的

cls2.prototype=cls1.prototype;

哦！用prototype来继承的，对！
a是不能继承的，c是静态的也不能被继承。

5.在补充点内容，让你根多的了解JavaScript中继承的特性

1 var cls3=function(){};
2 cls3.prototype=BaseClass.prototype;
3
4 cls3.prototype.d="I'm cls3"
5 out((new cls3).d);
6 out((new BaseClass).d);
运行结果:
I'm cls3
I'm cls3

原来子类对象里可以同时变更父对象中的属性！强吧！！！哈哈！

结束！