javascript物件導向技術基礎(四)

類、建構函式、原型

先來說明一點:在上面的內容中提到,每一個函數都包含了一個prototype屬性,這個屬性指向了一個prototype對象(Every
function has a prototype property that refers to a predefined prototype object  --section8.6.2).注意不要
搞混了.

建構函式:
new操作符用來產生一個新的對象.new後面必須要跟上一個函數,也就是我們常說的建構函式.建構函式的工作原理又是怎樣的呢?
先看一個例子:

Js代碼

1. function Person(name,sex) {   
2.     this.name = name;   
3.     this.sex = sex;   
4. }   
5. var per = new Person("sdcyst","male");   
6. alert("name:"+per.name+"_sex:"+per.sex); //name:sdcyst_sex:male  

function Person(name,sex) {    this.name = name;    this.sex = sex;}var per = new Person("sdcyst","male");alert("name:"+per.name+"_sex:"+per.sex); //name:sdcyst_sex:male

 

下面說明一下這個工作的步驟:
開始建立了一個函數(不是方法,只是一個普通的函數),注意用到了this關鍵字.以前我們提到過this關鍵字表示調用該方法的對象,也就
是說通過對象調用"方法"的時候,this關鍵字會指向該對象(不使用對象直接調用該函數則this指向整個的script域,或者函數所在的域,在此
我們不做詳細的討論).當我們使用new操作符時,javascript會先建立一個空的對象,然後這個對象被new後面的方法(函數)的this關鍵字引用!然後在方法中
通過操作this,就給這個新建立的對象相應的賦予了屬性.最後返回這個經過處理的對象.這樣上面的例子就很清楚:先建立一個Null 物件,然後
調用Person方法對其進行賦值,最後返回該對象,我們就得到了一個per對象.

prototype(原型)--在這裡會反覆提到"原型對象"和"原型屬性",注意區分這兩個概念.
在javascript中,每個對象都有一個prototype屬性,這個屬性指向了一個prototype對象.
上面我們提到了用new來建立一個對象的過程,事實上在這個過程中,當建立了Null 物件後,new會接著操作剛產生的這個對象的prototype屬性.
每個方法都有一個prototype屬性(因為方法本身也是對象),new操作符產生的新對象的prototype屬性值和構造方法的prototype屬性值是一致的.構造方
法的prototype屬性指向了一個prototype對象,這個prototype對象初始只有一個屬性constructor,而這個constructor屬性又指向了prototype屬性所在的方
法(In the previous section, I showed that the new operator creates a new, empty object and then invokes a constructor
function as a method of that object. This is not the complete story, however. After creating the empty object,
new sets the prototype of that object. The prototype of an object is the value of the prototype property of its
constructor function. All functions have a prototype property that is automatically created and initialized when
the function is defined. The initial value of the prototype property is an object with a single property. This property
is named constructor and refers back to the constructor function with which the prototype is associated. this is why every
object has a constructor property. Any properties you add to this prototype object will appear to be properties of
objects initialized by the constructor. -----section9.2)
有點暈,看下面的圖:

 

 

這樣,當用建構函式建立一個新的對象時,它會擷取建構函式的prototype屬性所指向的prototype對象的所有屬性.對建構函式對應的prototype對象
所做的任何操作都會反應到它所產生的對象身上,所有的這些對象共用建構函式對應的prototype對象的屬性(包括方法).
看個具體的例子吧:

Js代碼

1. function Person(name,sex) {  //建構函式   
2.     this.name = name;   
3.     this.sex = sex;   
4. }   
5. Person.prototype.age = 12;   //為prototype屬性對應的prototype對象的屬性賦值   
6. Person.prototype.print = function() { //添加方法   
7.     alert(this.name+"_"+this.sex+"_"+this.age);   
8. };   
9.   
10. var p1 = new Person("name1","male");   
11. var p2 = new Person("name2","male");   
12. p1.print();  //name1_male_12   
13. p2.print();  //name2_male_12   
14.   
15. Person.prototype.age = 18;  //改變prototype對象的屬性值,注意是操作建構函式的prototype屬性   
16. p1.print();  //name1_male_18   
17. p2.print();  //name2_male_18  

function Person(name,sex) {  //建構函式    this.name = name;    this.sex = sex;}Person.prototype.age = 12;   //為prototype屬性對應的prototype對象的屬性賦值Person.prototype.print = function() { //添加方法    alert(this.name+"_"+this.sex+"_"+this.age);};var p1 = new Person("name1","male");var p2 = new Person("name2","male");p1.print();  //name1_male_12p2.print();  //name2_male_12Person.prototype.age = 18;  //改變prototype對象的屬性值,注意是操作建構函式的prototype屬性p1.print();  //name1_male_18p2.print();  //name2_male_18

 

到目前為止,我們已經類比出了簡單的類的實現,我們有了建構函式,有了類屬性,有了類方法,可以建立"執行個體".
在下面的文章中,我們就用"類"這個名字來代替構造方法,但是,這僅僅是類比,並不是真正的物件導向的"類".
在下一步的介紹之前,我們先來看看改變對象的prototype屬性和設定prototype屬性的注意事項:
給出一種不是很恰當的解釋,或許有助於我們理解:當我們new了一個對象之後,這個對象就會獲得建構函式的prototype屬
性(包括函數和變數),可以認為是建構函式(類)繼承了它的prototype屬性對應的prototype對象的函數和變數,也就是說,
prototype對象類比了一個超類的效果.聽著比較拗口,我們直接看個執行個體吧:

Js代碼

1. function Person(name,sex) {  //Person類的建構函式   
2.     this.name = name;   
3.     this.sex = sex;   
4. }   
5. Person.prototype.age = 12;   //為Person類的prototype屬性對應的prototype對象的屬性賦值,   
6.                              //相當於為Person類的父類添加屬性   
7. Person.prototype.print = function() { //為Person類的父類添加方法   
8.     alert(this.name+"_"+this.sex+"_"+this.age);   
9. };   
10.   
11. var p1 = new Person("name1","male"); //p1的age屬性繼承子Person類的父類(即prototype對象)   
12. var p2 = new Person("name2","male");   
13.   
14. p1.print();  //name1_male_12   
15. p2.print();  //name2_male_12   
16.   
17. p1.age = 34; //改變p1執行個體的age屬性   
18. p1.print();  //name1_male_34   
19. p2.print();  //name2_male_12   
20.   
21. Person.prototype.age = 22;  //改變Person類的超類的age屬性   
22. p1.print();  //name1_male_34(p1的age屬性並沒有隨著prototype屬性的改變而改變)   
23. p2.print();  //name2_male_22(p2的age屬性發生了改變)   
24.   
25. p1.print = function() {  //改變p1對象的print方法   
26.     alert("i am p1");   
27. }   
28.   
29. p1.print();  //i am p1(p1的方法發生了改變)   
30. p2.print();  //name2_male_22(p2的方法並沒有改變)   
31.   
32. Person.prototype.print = function() { //改變Person超類的print方法   
33.     alert("new print method!");   
34. }   
35.   
36. p1.print();  //i am p1(p1的print方法仍舊是自己的方法)   
37. p2.print();  //new print method!(p2的print方法隨著超類方法的改變而改變)  

function Person(name,sex) {  //Person類的建構函式    this.name = name;    this.sex = sex;}Person.prototype.age = 12;   //為Person類的prototype屬性對應的prototype對象的屬性賦值,                             //相當於為Person類的父類添加屬性Person.prototype.print = function() { //為Person類的父類添加方法    alert(this.name+"_"+this.sex+"_"+this.age);};var p1 = new Person("name1","male"); //p1的age屬性繼承子Person類的父類(即prototype對象)var p2 = new Person("name2","male");p1.print();  //name1_male_12p2.print();  //name2_male_12p1.age = 34; //改變p1執行個體的age屬性p1.print();  //name1_male_34p2.print();  //name2_male_12Person.prototype.age = 22;  //改變Person類的超類的age屬性p1.print();  //name1_male_34(p1的age屬性並沒有隨著prototype屬性的改變而改變)p2.print();  //name2_male_22(p2的age屬性發生了改變)p1.print = function() {  //改變p1對象的print方法    alert("i am p1");}p1.print();  //i am p1(p1的方法發生了改變)p2.print();  //name2_male_22(p2的方法並沒有改變)Person.prototype.print = function() { //改變Person超類的print方法    alert("new print method!");}p1.print();  //i am p1(p1的print方法仍舊是自己的方法)p2.print();  //new print method!(p2的print方法隨著超類方法的改變而改變)

 

看過一篇文章介紹說javascript中對象的prototype屬性相當於java中的static變數,可以被這個類下的所有對象
共用.而上面的例子似乎表明實際情況並不是這樣:
在JS中,當我們用new操作符建立了一個類的執行個體對象後,它的方法和屬性確實繼承了類的prototype屬性,類的prototype屬性
中定義的方法和屬性,確實可以被這些執行個體對象直接引用.但是,當我們對這些執行個體對象的屬性和方法重新賦值或定義後,那麼
執行個體對象的屬性或方法就不再指向類的prototype屬性中定義的屬性和方法,此時,即使再對類的prototype屬性中相應的方法或
屬性做修改,也不會反應在執行個體對象身上.這就解釋了上面的例子:
一開始,用new操作符產生了兩個對象p1,p2,他們的age屬性和print方法都來自(繼承於)Person類的prototype屬性.然後,我們
修改了p1的age屬性,後面對Person類的prototype屬性中的age重新賦值(Person.prototype.age = 22),p1的age屬性並不會
隨之改變,但是p2的age屬性卻隨之發生了變化,因為p2的age屬性還是引自Person類的prototype屬性.同樣的情況在後面的
print方法中也體現了出來.

通過上面的介紹,我們知道prototype屬性在javascript中類比了父類(超類)的角色,在js中體現物件導向的思想,prototype屬性
是非常關鍵的.