<rt id="bn8ez"></rt>
<label id="bn8ez"></label>

  • <span id="bn8ez"></span>

    <label id="bn8ez"><meter id="bn8ez"></meter></label>

    最愛Java

    書山有路勤為徑,學海無涯苦作舟

    javascript面向對象技術基礎(四)

            本文轉載于javaeye(http://www.javaeye.com/wiki/Object_Oriented_JavaScript/1279-javascript-object-oriented-technology-one),只進行了重新排版以便收藏。
            文中所有英文語句(程序語句除外),都引自<<javascript-the definitive guide,5th edition>>。

    ------------------------------------------------------------------------------------
    類、構造函數、原型

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

    構造函數:
            new操作符用來生成一個新的對象。new后面必須要跟上一個函數,也就是我們常說的構造函數。構造函數的工作原理又是怎樣的呢?先看一個例子:
    1function Person(name,sex) {   
    2    this.name = name;   
    3    this.sex = sex;   
    4}
       
    5var per = new Person("sdcyst","male");   
    6alert("name:"+per.name+"_sex:"+per.sex); //name:sdcyst_sex:male  

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

            prototype(原型)--在這里會反復提到"原型對象"和"原型屬性",注意區分這兩個概念。
            在javascript中,每個對象都有一個prototype屬性,這個屬性指向了一個prototype對象。上面我們提到了用new來創建一個對象的過程,事實上在這個過程中,當創建了空對象后,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對象的屬性(包括方法)。看個具體的例子吧:
     1function Person(name,sex) {  //構造函數   
     2    this.name = name;   
     3    this.sex = sex;   
     4}
       
     5Person.prototype.age = 12;   //為prototype屬性對應的prototype對象的屬性賦值   
     6Person.prototype.print = function() //添加方法   
     7    alert(this.name+"_"+this.sex+"_"+this.age);   
     8}
    ;   
     9  
    10var p1 = new Person("name1","male");   
    11var p2 = new Person("name2","male");   
    12p1.print();  //name1_male_12   
    13p2.print();  //name2_male_12   
    14  
    15Person.prototype.age = 18;  //改變prototype對象的屬性值,注意是操作構造函數的prototype屬性   
    16p1.print();  //name1_male_18   
    17p2.print();  //name2_male_18  

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

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

    posted on 2009-10-20 11:27 Brian 閱讀(212) 評論(0)  編輯  收藏 所屬分類: JScript

    公告


    導航

    <2009年10月>
    27282930123
    45678910
    11121314151617
    18192021222324
    25262728293031
    1234567

    統計

    常用鏈接

    留言簿(4)

    隨筆分類

    隨筆檔案

    收藏夾

    搜索

    最新評論

    閱讀排行榜

    評論排行榜

    主站蜘蛛池模板: 老司机精品视频免费| WWW国产亚洲精品久久麻豆| 中文字幕av无码不卡免费| 国产偷国产偷亚洲高清日韩| 特级毛片全部免费播放| 免费一级一片一毛片| 牛牛在线精品免费视频观看| 国产精品四虎在线观看免费| 国产区图片区小说区亚洲区| 国产一区二区三区无码免费| 美美女高清毛片视频黄的一免费| 免费在线观看黄网站| 成人毛片100免费观看| 亚洲精品高清国产一线久久| 久久久久国色av免费看| 亚洲最大的视频网站| 性一交一乱一视频免费看| 国产精品亚洲综合天堂夜夜| 亚洲精品和日本精品| a级成人毛片免费视频高清| 中文字幕亚洲精品| 我想看一级毛片免费的| 免费又黄又爽又猛大片午夜| 亚洲午夜福利AV一区二区无码| 亚洲国产一成久久精品国产成人综合| 又长又大又粗又硬3p免费视频| 免费观看成人毛片a片2008| 亚洲欧美国产精品专区久久| 24小时在线免费视频| 国产午夜亚洲精品国产| 亚洲AV永久无码精品一区二区国产| 国产美女视频免费观看的网站| 久久久亚洲欧洲日产国码aⅴ | 亚洲最大av资源站无码av网址| 国产美女精品视频免费观看 | 国产精品成人啪精品视频免费| 中文字幕亚洲综合久久菠萝蜜 | a视频在线免费观看| 亚洲午夜电影在线观看| 免费v片在线观看无遮挡| 久久99热精品免费观看动漫|