摘要:有以下幾點三圖片解析是原型鏈的鏈接通過查找到,是原型的關(guān)鍵字是實例對象是構(gòu)造函數(shù)通過找到所以構(gòu)造器的原型屬于對象,也就是說是出來的。同理找到,發(fā)現(xiàn)屬性,輸出五參考資料原型與原型鏈如果有理解不對的地方,歡迎大佬指正
一、題目
我們先看一道題目
var F = function() {}; Object.prototype.a = function() { console.log("a"); }; Function.prototype.b = function() { console.log("b"); } var f = new F(); f.a(); f.b(); F.a(); F.b();二、解題關(guān)鍵
借用網(wǎng)絡(luò)上的圖片,看起來有點繞,待我們一點一點理解。有以下幾點:
__proto__ 是原型鏈的鏈接
通過 __proto__ 查找到prototype, prototype是原型的關(guān)鍵字
var f = new F()
f: 是實例對象
F: 是構(gòu)造函數(shù)
f通過__proto__ 找到F.prototype,所以f.__proto__ === F.prototype
構(gòu)造器的原型屬于對象 Object ,也就是說 F.prototype 是 new object 出來的。所以 F.prototype通過 __proto__ 可以找到 Object.prototype
即:F.prototype.__proto__ === Object.Prototype
function Function() 是函數(shù)構(gòu)造器
Function.__proto__ === Function.prototype
Function.prototype 是對象,所以Function.prototype.__proto__ === Object.prototype
終極:Objecy.prototype.__proto__ === null
四、題目解析再回過頭來看上面的題目
f.a(),f 是實例對象, f沒有a屬性,通過f.__proto__找到原型F.prototype,F.prototype上也沒有a屬性,繼續(xù)通過 F.prototype.__proto__找到Object.prototype,發(fā)現(xiàn)a屬性,所以輸出a
f.b(),同理找到 Object.prototype,發(fā)現(xiàn)Object.prototype也沒有b屬性,繼續(xù)通過__proto__查找 到了null,所以b函數(shù)不存在,瀏覽器報錯。 則 F.a(),F(xiàn).b()也不會執(zhí)行
若注釋了 f.b(),執(zhí)行F.a()。F是函數(shù),F(xiàn)上沒有a屬性,通過__proto__找到Function.prototype,發(fā)現(xiàn)Function.prototype沒有a屬性,繼續(xù)通過__proto__,找到Object.prototype,找到了a屬性,輸出a
若注釋了 f.b(),執(zhí)行F.b()。同理找到Function.prototype,發(fā)現(xiàn)b屬性,輸出b
五、參考資料
JS 原型與原型鏈
如果有理解不對的地方,歡迎大佬指正!
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/102193.html
摘要:為了防止之后自己又開始模糊,所以自己來總結(jié)一下中關(guān)于作用域鏈和原型鏈的知識,并將二者相比較看待進(jìn)一步加深理解。因此我們發(fā)現(xiàn)當(dāng)多個作用域相互嵌套的時候,就形成了作用域鏈。原型鏈原型說完了作用域鏈,我們來講講原型鏈。 畢業(yè)也整整一年了,看著很多學(xué)弟都畢業(yè)了,忽然心中頗有感慨,時間一去不復(fù)還呀。記得從去年這個時候接觸到JavaScript,從一開始就很喜歡這門語言,當(dāng)時迷迷糊糊看完了《J...
摘要:要搞清這三種關(guān)系指向之間的關(guān)系拗口,其實也就是要搞懂,構(gòu)造函數(shù)由構(gòu)造函數(shù)操作創(chuàng)造出的實例對象和構(gòu)造函數(shù)的原型對象之間的關(guān)系。 寫在前面 這篇博客來源于,有天mentor突然傳給我了這張祖?zhèn)鞯膱D片,并且發(fā)誓一定要給我講清楚,然鵝在他的一番激情講解之后,他自己也被繞懵了...于是后來我決定整理一下似乎還有點清晰的思路,記錄一下我對這張圖的理解。作為一個小白,對于js中這些比較復(fù)雜的概念的理...
摘要:而和的存在就是為了建立這種子類與父類間的聯(lián)系。創(chuàng)建一個基本對象建立新對象與原型我把它理解為類之間的連接執(zhí)行構(gòu)造函數(shù)小結(jié)可以理解為類,也就是存儲一類事物的基本信息。原型原型鏈和繼承之間的關(guān)系。 原型 原型的背景 首先,你應(yīng)該知道javascript是一門面向?qū)ο笳Z言。 是對象,就具有繼承性。 繼承性,就是子類自動共享父類的數(shù)據(jù)結(jié)構(gòu)和方法機(jī)制。 而prototype 和 __proto__...
摘要:那么什么是基礎(chǔ)對象組件呢,舉兩個例子我們再來看看屬性訪問器,就是括號操作符及點號操作符都做了什么屬性訪問器也就是說括號跟點號對解釋器而言是一樣的。 ES規(guī)范解讀之賦值操作符&屬性訪問器 原文:https://github.com/kuitos/kuitos.github.io/issues/24事情起源于某天某妹子同事在看angular文檔中關(guān)于Scope的說明Understandin...
閱讀 3509·2021-11-23 10:13
閱讀 877·2021-09-22 16:01
閱讀 921·2021-09-09 09:33
閱讀 646·2021-08-05 09:58
閱讀 1729·2019-08-30 11:14
閱讀 1972·2019-08-30 11:02
閱讀 3280·2019-08-29 16:28
閱讀 1495·2019-08-29 16:09