JavaScript中支持类的定义,而且定义的方式与函数基本上也相同。
![ExpandedBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![ContractedBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
![dot.gif](https://www.cnblogs.com/Images/dot.gif)
2
![InBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
3
![ExpandedBlockEnd.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
4
![None.gif](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
5
![ExpandedBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![ContractedBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
![dot.gif](https://www.cnblogs.com/Images/dot.gif)
6
![InBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
7
![ExpandedBlockEnd.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
我们继续,现在我们来看看Javascript 中的继承,以及 Prototype 与继承的关系。先来看看下面这个代码。你能想出运行的结果吗?
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中继承的特性
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
原来子类对象里可以同时变更父对象中的属性!强吧!!!哈哈!
结束!