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

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

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

    Open-Source World

    let's learn and study.
    posts - 28, comments - 23, trackbacks - 0, articles - 1
    目前 javascript的實現(xiàn)繼承方式并不是通過“extend”關鍵字來實現(xiàn)的,而是通過constructor function和prototype屬性來實現(xiàn)繼承。首先我們創(chuàng)建一個animal
    js 代碼
     
    1.  var = function(){  //這就是constructor function 了 
    2.    this.name = 'pipi';    
    3.    this.age = 10;      
    4.    this.height = 0;      
    5. }      
    6.  //建立一個動物的實例    
    7.  var a1 =  new animal ();   

    構造函數(shù)與其他普通函數(shù)區(qū)別在于,1.構造函數(shù)里有 this關鍵字,2.調(diào)用構造函數(shù)是使用的new關鍵字。通過new運算符調(diào)用構造函數(shù)animal 后,系統(tǒng)就會返回一個對象,這個對象就相當于
    js 代碼
    1. var a1 = { name:'pipi' ,age:10,height:0 }  
    2.   
    3. //或者  
    4. var a1 = new Object();  
    5. a1.name='pipi';  
    6. a1.age = 10;  
    7. a1.height = 0; 
    等同這樣的方式來產(chǎn)生js對象。

    到這里我們知道如何在js中定義一個類了,接下來我們展示如何寫一個cat

    js 代碼
     
    1. var cat = function(){    
    2. this.play = function(){     
    3.  alert('cat play')    
    4.  }    
    5.  }    
    6.  cat .prototype = new animal ();    
    7.  //prototype 屬性指向一個對象 
    8. var c1 = new cat();

    到這里,cat就繼承了animal 對象,類cat的一個實例對象c1擁有屬性name,age,height,和方法play了。
    那么
    prototype起到了一個什么樣的作用呢?
    prototype就好比一個指針,它指向一個object,這個object就稱為子類對象的原型。當cat的對象被創(chuàng)建的時候,由于cat的構造函數(shù)擁有prototype屬性,那么cat的實例就會間接指向這個原型對象了(說成間接的是因為每個object都有一個constructor 屬性指向它的構造函數(shù))。
    那么問題來了,“當我們修改對象 c1 的name屬性的時候,會不會修改它prototype的name屬性值呢?”,答案是否定的。
    接下來詳細解析:
    1.訪問name屬性: 首先當我們第一次訪問c1.name的屬性的時候,我們會得到值“pipi”,這個和我們預料中的一樣。但是計算過程你未必知道。
    它計算的過程是這樣的:第一步:檢查c1對象中是否有name屬性,找到的話就返回值,沒有就跳到第二步,顯然沒有找到,因為cat的構造函數(shù)中沒有定義。第二步:當?shù)谝徊經(jīng)]有找時,去間接訪問
    prototype對象所指向的object,如果在prototype對象中找到的name屬性的話,就返回找到的屬性值。如果還是沒有找到的話,再去遞歸地尋找prototype對象的prototype對象(去找它的爺爺),一直到找到name屬性或者沒有prototype對象為止。如果到最后還是沒有找到name屬性的話就返回undefined。

    2.設定name屬性:當我們設定c1對象的name屬性時,及調(diào)用 c1.name= ' new name';  這個過程就簡單多了。首先檢查是否對象已有該屬性,若已存在則修改當前值,若不存在則為該對象新增一個屬性并設定當前值。值得一提的是,在設定值的過程中沒有去訪問
    prototype屬性。

    為了加深理解,我們再看一個 read-write-read 的過程,第一次read的時候,由于自己的對象沒有name屬性,那么就會返回的原型對象的name屬性的值。第二步,寫入name的值,同樣沒發(fā)現(xiàn)本身對象有name屬性,那么就在本身對象上新建一個name屬性,然后賦值。第三步,再次讀取name屬性,由于在第二步中已經(jīng)新建了name屬性,此時就返回在第二步中設定的值。值得一提的是,在這三步中沒有改變原型對象的值。

    好了,到此詳細分析了 javascript對象是如果實現(xiàn)繼承的,其實和其他的面向?qū)ο笳Z言不一樣的是,javascript的繼承機制是對象的原型繼承而不是類型繼承。

    Feedback

    # re: 詳解javascript類繼承機制的原理   回復  更多評論   

    2009-03-21 22:16 by jimi
    請說明文章轉(zhuǎn)載出處!!!

    只有注冊用戶登錄后才能發(fā)表評論。


    網(wǎng)站導航:
     
    主站蜘蛛池模板: 91亚洲va在线天线va天堂va国产 | 亚洲视频在线免费播放| 亚洲另类激情综合偷自拍图| 高潮内射免费看片| va亚洲va日韩不卡在线观看| 特黄特色大片免费| 久久久久亚洲AV成人网人人网站| 一区二区3区免费视频| 中文字幕精品亚洲无线码二区| 怡红院免费的全部视频| 亚洲成a人片在线观看无码专区| 久久这里只精品99re免费| 亚洲精品日韩中文字幕久久久| 18女人水真多免费高清毛片| 亚洲手机中文字幕| 成人性生活免费视频| 日韩国产精品亚洲а∨天堂免| 亚洲精品无码久久久| 国产午夜免费高清久久影院| 亚洲美女免费视频| 青苹果乐园免费高清在线| 国产精品亚洲а∨无码播放麻豆 | 性xxxx视频播放免费| 国产精品亚洲片在线花蝴蝶| 91麻豆国产自产在线观看亚洲 | 精品视频一区二区三区免费| 亚洲第一永久在线观看| 搡女人免费视频大全| 特黄特色的大片观看免费视频| 亚洲人精品午夜射精日韩 | 亚洲性69影院在线观看| 免费鲁丝片一级观看| 国产一区二区三区免费观在线| 亚洲欧洲精品视频在线观看| 国产免费私拍一区二区三区| 韩日电影在线播放免费版| 亚洲av午夜精品无码专区| 亚洲午夜精品一级在线播放放| 97免费人妻在线视频| 美女扒开尿口给男人爽免费视频| 亚洲精品国产精品乱码不99|