JS物件導向2

來源:互聯網
上載者:User

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

  1. <SPAN style="FONT-SIZE: medium">
  2. function Person(name,sex) {   
  3.     this.name = name;   
  4.     this.sex = sex;   
  5. }   
  6. var per = new Person("sdcyst","male");   
  7. alert("name:"+per.name+"_sex:"+per.sex); //name:sdcyst_sex:male</SPAN>

下面說明一下這個工作的步驟:
開始建立了一個函數(不是方法,只是一個普通的函數),注意用到了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屬性所在的方
法.

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

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

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

  19. <SPAN style="FONT-SIZE: medium">function Person(name,sex) {  //Person類的建構函式   
  20.     this.name = name;   
  21.     this.sex = sex;   
  22. }   
  23. Person.prototype.age = 12;   //為Person類的prototype屬性對應的prototype對象的屬性賦值,   
  24.                              //相當於為Person類的父類添加屬性   
  25. Person.prototype.print = function() { //為Person類的父類添加方法   
  26.     alert(this.name+"_"+this.sex+"_"+this.age);   
  27. };   
  28.   
  29. var p1 = new Person("name1","male"); //p1的age屬性繼承子Person類的父類(即prototype對象)   
  30. var p2 = new Person("name2","male");   
  31.   
  32. p1.print();  //name1_male_12   
  33. p2.print();  //name2_male_12   
  34.   
  35. p1.age = 34; //改變p1執行個體的age屬性   
  36. p1.print();  //name1_male_34   
  37. p2.print();  //name2_male_12   
  38.   
  39. Person.prototype.age = 22;  //改變Person類的超類的age屬性   
  40. p1.print();  //name1_male_34(p1的age屬性並沒有隨著prototype屬性的改變而改變)   
  41. p2.print();  //name2_male_22(p2的age屬性發生了改變)   
  42.   
  43. p1.print = function() {  //改變p1對象的print方法   
  44.     alert("i am p1");   
  45. }   
  46.   
  47. p1.print();  //i am p1(p1的方法發生了改變)   
  48. p2.print();  //name2_male_22(p2的方法並沒有改變)   
  49.   
  50. Person.prototype.print = function() { //改變Person超類的print方法   
  51.     alert("new print method!");   
  52. }   
  53.   
  54. p1.print();  //i am p1(p1的print方法仍舊是自己的方法)   
  55. p2.print();  //new print method!(p2的print方法隨著超類方法的改變而改變)</SPAN> 

 

 

 

 

 

 

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.