理解js原型與原型鏈(一)

1、什么是原型戒良,原型鏈?

參照《javascript權(quán)威教程》原型的解釋為:每一個(gè)對象(除null外)都有另一個(gè)對象與之相關(guān)聯(lián),這個(gè)另一個(gè)對象便稱之為“原型”(prototype)萨螺,每個(gè)對象都是從原型繼承屬性。原型鏈?zhǔn)侵?strong>一系列鏈接的原型對象的鏈稱為“原型鏈”(prototype chain)愧驱。
從上面的描述我們可以得到幾點(diǎn):
1慰技、原型也是一個(gè)對象
2、對象通過原型鏈的方式實(shí)現(xiàn)了相關(guān)聯(lián)(即我們常稱作原型鏈的方式實(shí)現(xiàn)了繼承

2组砚、實(shí)例說明

1吻商、首先定義一個(gè)構(gòu)造函數(shù)Person,然后對這個(gè)構(gòu)造函數(shù)實(shí)例化了一個(gè)對象person1糟红。( Person稱為person1的原型艾帐, person1稱為Person實(shí)例)

image.png
  • 注: 每個(gè)構(gòu)造函數(shù)都有一個(gè)prototype屬性,該prototype屬性指向一個(gè)prototype對象改化,而這個(gè)prototype對象中保存著構(gòu)造函數(shù)的原型屬性和一個(gè)constructor屬性掩蛤,該constructor屬性又指向了構(gòu)造函數(shù)Person本身,
    以Person為例陈肛,person.prototype對象如下圖所示
image.png

ps:其中__proto__是瀏覽器提供的訪問其原型對象的屬性(每個(gè)對象都具有)揍鸟,后續(xù)會介紹。
對于第5行代碼new的過程可分為三步理解
1句旱、實(shí)例化一個(gè)空的person1對象:var person1= {}阳藻;(則person1具有__proto__屬性)
2、將person1.__proto__屬性指向了其構(gòu)造函數(shù)Person的prototype屬性(即prototype對象) 等同于 person1.__proto__=Person.prototype
3谈撒、構(gòu)造函數(shù)類似于調(diào)用call或apply方法 Person.call(person1腥泥,“張三”)改變了Person中this指向,使其指向了person1啃匿,最后返回person1蛔外。
通過以上分析我們可以明白person通過其__proto__屬性指向了Person的prototype屬性,而person1.prototype又保存著構(gòu)造函數(shù)的原型屬性和一個(gè)constructor屬性(指向了構(gòu)造函數(shù)本身)溯乒,這樣我們實(shí)現(xiàn)了person1對Person的繼承夹厌。
console.log("person1.name") //輸出張三;
console.log("person2.name") //輸出李四裆悄;
person1和person2是兩個(gè)相互不同的實(shí)例矛纹,相互不影響。

3光稼、屬性的查找方式總是基于原型鏈向上尋找

image.png

1或南、對上面代碼進(jìn)行擴(kuò)充孩等,我們對構(gòu)造函數(shù)Person增加原型屬性sex,
2采够、第8肄方、9行代碼,對于兩個(gè)實(shí)例person1吁恍、person2由于其并沒有sex屬性扒秸,所以向上查找其原型Person的sex屬性,輸出為都女冀瓦;
3、執(zhí)行完第10行写烤,給person1添加了sex屬性翼闽,輸出person1.sex(查找到自身具有了sex屬性,不在向上查找其原型對象的屬性洲炊,輸出本身sex屬性 男)感局,而person2依然沒有sex屬性,繼續(xù)查找其原型對象的屬性暂衡,輸出女
4询微,執(zhí)行13行代碼,刪除person1.sex是刪除了其本身的sex屬性狂巢,所以再次輸出person1.sex和person2.sex都將查找原型屬性撑毛,都輸出女。

4唧领、加深理解constructor藻雌,protototype,__proto__斩个,constructor.prototype屬性

  • 構(gòu)造函數(shù)的prototype屬性指向prototype對象胯杭,該prototype對象中constructor屬性指向構(gòu)造函數(shù)本身
  • 對于每個(gè)實(shí)例化的對象,無prototype屬性受啥,但是瀏覽器提供了__proto__來訪問原型
  • 實(shí)例化對象的constructor指向其構(gòu)造函數(shù)
  • obj instanceof Object 判斷obj是否在Object的原型鏈上
  • Object.getPrototypeof(obj)判斷obj的原型對象


    image.png
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末做个,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子滚局,更是在濱河造成了極大的恐慌居暖,老刑警劉巖,帶你破解...
    沈念sama閱讀 221,198評論 6 514
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件核畴,死亡現(xiàn)場離奇詭異膝但,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)谤草,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,334評論 3 398
  • 文/潘曉璐 我一進(jìn)店門跟束,熙熙樓的掌柜王于貴愁眉苦臉地迎上來莺奸,“玉大人,你說我怎么就攤上這事冀宴∶鸫” “怎么了?”我有些...
    開封第一講書人閱讀 167,643評論 0 360
  • 文/不壞的土叔 我叫張陵略贮,是天一觀的道長甚疟。 經(jīng)常有香客問我,道長逃延,這世上最難降的妖魔是什么览妖? 我笑而不...
    開封第一講書人閱讀 59,495評論 1 296
  • 正文 為了忘掉前任,我火速辦了婚禮揽祥,結(jié)果婚禮上讽膏,老公的妹妹穿的比我還像新娘。我一直安慰自己拄丰,他們只是感情好府树,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,502評論 6 397
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著料按,像睡著了一般奄侠。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上载矿,一...
    開封第一講書人閱讀 52,156評論 1 308
  • 那天垄潮,我揣著相機(jī)與錄音,去河邊找鬼恢准。 笑死魂挂,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的馁筐。 我是一名探鬼主播涂召,決...
    沈念sama閱讀 40,743評論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼敏沉!你這毒婦竟也來了果正?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,659評論 0 276
  • 序言:老撾萬榮一對情侶失蹤盟迟,失蹤者是張志新(化名)和其女友劉穎秋泳,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體攒菠,經(jīng)...
    沈念sama閱讀 46,200評論 1 319
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡迫皱,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,282評論 3 340
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片卓起。...
    茶點(diǎn)故事閱讀 40,424評論 1 352
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡和敬,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出戏阅,到底是詐尸還是另有隱情昼弟,我是刑警寧澤,帶...
    沈念sama閱讀 36,107評論 5 349
  • 正文 年R本政府宣布奕筐,位于F島的核電站舱痘,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏离赫。R本人自食惡果不足惜芭逝,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,789評論 3 333
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望笆怠。 院中可真熱鬧铝耻,春花似錦、人聲如沸蹬刷。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,264評論 0 23
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽办成。三九已至,卻和暖如春搂漠,著一層夾襖步出監(jiān)牢的瞬間迂卢,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,390評論 1 271
  • 我被黑心中介騙來泰國打工桐汤, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留而克,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 48,798評論 3 376
  • 正文 我出身青樓怔毛,卻偏偏與公主長得像员萍,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個(gè)殘疾皇子拣度,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,435評論 2 359

推薦閱讀更多精彩內(nèi)容