我所理解的原型&原型鏈

Allen 發布于2019-08-23 15:32 / 3285人閱讀

摘要：有以下幾點三圖片解析是原型鏈的鏈接通過查找到，是原型的關鍵字是實例對象是構造函數通過找到所以構造器的原型屬于對象，也就是說是出來的。同理找到，發現屬性，輸出五參考資料原型與原型鏈如果有理解不對的地方，歡迎大佬指正

一、題目

我們先看一道題目

    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();

二、解題關鍵

借用網絡上的圖片，看起來有點繞，待我們一點一點理解。有以下幾點：

三、圖片解析

__proto__ 是原型鏈的鏈接

通過 __proto__ 查找到prototype， prototype是原型的關鍵字

var f = new F()

f: 是實例對象

F：是構造函數

f通過__proto__ 找到F.prototype,所以f.__proto__ === F.prototype

構造器的原型屬于對象 Object ，也就是說 F.prototype 是 new object 出來的。所以 F.prototype通過 __proto__ 可以找到 Object.prototype

即：F.prototype.__proto__ === Object.Prototype

function Function() 是函數構造器

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屬性，繼續通過 F.prototype.__proto__找到Object.prototype,發現a屬性，所以輸出a

f.b()，同理找到 Object.prototype,發現Object.prototype也沒有b屬性，繼續通過__proto__查找到了null，所以b函數不存在，瀏覽器報錯。則 F.a()，F.b()也不會執行

若注釋了 f.b()，執行F.a()。F是函數，F上沒有a屬性，通過__proto__找到Function.prototype，發現Function.prototype沒有a屬性，繼續通過__proto__,找到Object.prototype,找到了a屬性，輸出a

若注釋了 f.b()，執行F.b()。同理找到Function.prototype，發現b屬性，輸出b

五、參考資料

JS 原型與原型鏈

如果有理解不對的地方，歡迎大佬指正！

GPU云服務器云服務器 js原型鏈的繼承原型原型鏈原型鏈原型鏈繼承

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/102193.html

我所認識的JavaScript作用域鏈和原型鏈

摘要：為了防止之后自己又開始模糊，所以自己來總結一下中關于作用域鏈和原型鏈的知識，并將二者相比較看待進一步加深理解。因此我們發現當多個作用域相互嵌套的時候，就形成了作用域鏈。原型鏈原型說完了作用域鏈，我們來講講原型鏈。　　畢業也整整一年了，看著很多學弟都畢業了，忽然心中頗有感慨，時間一去不復還呀。記得從去年這個時候接觸到JavaScript,從一開始就很喜歡這門語言，當時迷迷糊糊看完了《J...

Bmob 2019-08-20 17:36 評論0 收藏0
一張圖讓自己搞懂(mēng)原型&amp;原型鏈

摘要：要搞清這三種關系指向之間的關系拗口，其實也就是要搞懂，構造函數由構造函數操作創造出的實例對象和構造函數的原型對象之間的關系。寫在前面這篇博客來源于，有天mentor突然傳給我了這張祖傳的圖片，并且發誓一定要給我講清楚，然鵝在他的一番激情講解之后，他自己也被繞懵了...于是后來我決定整理一下似乎還有點清晰的思路，記錄一下我對這張圖的理解。作為一個小白，對于js中這些比較復雜的概念的理...

CntChen 2019-08-22 18:15 評論0 收藏0
探索 proto &amp; prototype 與繼承之間的關系

摘要：而和的存在就是為了建立這種子類與父類間的聯系。創建一個基本對象建立新對象與原型我把它理解為類之間的連接執行構造函數小結可以理解為類，也就是存儲一類事物的基本信息。原型原型鏈和繼承之間的關系。原型原型的背景首先，你應該知道javascript是一門面向對象語言。是對象，就具有繼承性。繼承性，就是子類自動共享父類的數據結構和方法機制。而prototype 和 __proto__...

dockerclub 2019-08-21 17:26 評論0 收藏0
ES規范解讀之賦值操作符&amp;屬性訪問器

摘要：那么什么是基礎對象組件呢，舉兩個例子我們再來看看屬性訪問器，就是括號操作符及點號操作符都做了什么屬性訪問器也就是說括號跟點號對解釋器而言是一樣的。 ES規范解讀之賦值操作符&屬性訪問器原文:https://github.com/kuitos/kuitos.github.io/issues/24事情起源于某天某妹子同事在看angular文檔中關于Scope的說明Understandin...

funnyZhang 2019-08-21 10:41 評論0 收藏0