[原]淺析Javascript中繼承和Prototype的關係

     JavaScript中支援類的定義，而且定義的方式與函數基本上也相同。

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

原來子類對象裡可以同時變更父物件中的屬性！強吧！！！哈哈！

結束！