天天看點

先從_proto_下手了解原型--原型學習(一)

  給自己關于原型的學習分了一個大類,主要跟蹤學習js的原型。--來自《JavaScript面向對象程式設計指南》的筆記,這本書難度适中,适合我們這種js基礎不牢的人學習。

  原型這塊有兩個屬性:prototype 和 _proto_,容易别混淆,看了前面的基礎,決定從這裡開始整理我的學習筆記。

     先上上代碼了解:

var  monkey = { //聲明一個對象
    feeds : "bananas", //定義一些屬性
    breathes: "air"
};

function Human() { //建立一個構造函數 Human

} 

Human.prototype = monkey; //将Human的原型指向 monkey

var adou = new Human(); //執行個體化一個Human對象

adou.feeds = "rice"; //對這個對象添加屬性,這裡覆寫原型中的同名屬性,(因為對象自身屬性會高于原型屬性)
adou.hobby = "sleep";//添加一個原型中沒有的屬性

console.log(adou.feeds); //rice
console.log(adou.hobby); //sleep      

    以上的代碼很簡單, 最後輸出的都是我們自己知道的,包括接下來,下面這行代碼的輸出也是我們所料想的,

    console.log(adou.breathes); //air

    我們在執行個體化adou這個對象的時候,并沒有給他添加breathes這屬性,為什麼會輸出air的值呢,有人說,是因為new的時候,繼承了原型的屬性和方法,對,是這樣的,但是,它靠什麼繼承或者說靠什麼找到monkey的breathes的屬性呢?靠的就是這麼一個神秘的連結 ._proto_   。我們再來想想,adou是 human 執行個體化出來的,human 的原型指向了monkey,也就有了monkey的方法屬性,adou本身沒有這個breathes屬性的,在調用adou.breathes的時候,就先從adou這個對象中找,沒有找到,然後就去它的原型中,欸,找到了,然後就傳回了這個屬性值。 也就是說 adou._proto_ === monkey; 傳回值是 ture

先從_proto_下手了解原型--原型學習(一)

到這裡,我們就可以了解這個原型鍊了:執行個體化出來一個對象,然後查找他的屬性時候,會先從他的本身去查找,如果沒有找到,再從他的原型中去找,找到則傳回值,找不到就傳回undefined。這個查找的過程就是原型鍊查找的過程。

還有一個需要區分的是_proto_ 和prototype: _proto_是一個執行個體對象的屬性,prototype是一個構造器函數的屬性。看圖了解:

先從_proto_下手了解原型--原型學習(一)

 打開object 看看就知道了,就像這樣的

先從_proto_下手了解原型--原型學習(一)

  adou._proto_ 裡面有這個_proto_ : object 

 結束語:裡面有兩個詞 constructor 和prototype 這個是原型學習繞不開的點,我先從原型鍊中講出這個鍊到底什麼,然後再細細的将前面饒人的小點。繼續開貼!

 如有錯誤之處,敬請批評指出!

每日一句:Past studies have found that people have a tendency to use more positive-inflected words than negative ones ― "fantastic" rather than "awful"。

翻譯:以往的研究表明,相比消極性的詞彙,人們傾向于使用更具積極意味的詞彙。比如,更喜歡用“美妙的(fantastic)”而非“糟糕的(awful)”。

繼續閱讀