浅析Javascript中继承和Prototype的关系http://www.cnblogs.com/meil/archive/2007/06/22/792895.aspx

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

1 function  out(val) {
2  document.write(val+"<br>");
3}
;
4
5 function  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

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

结束! 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值