原型與原型鏈

Coly 發布于2019-08-22 11:11 / 1771人閱讀

摘要：注是的一個方法，是中唯一一個處理屬性但是不查找原型鏈的函數。如果此時在該顯示屬性中還沒有找到，會繼續在的原型的原型中查找，找到直接終止，沒有找到一直向上找出，直到到達頂部會終止查找。

知識點：
對象是一個屬性的集合，有顯示和隱式屬性，并且都擁有一個多帶帶的原型對象[prototype object]，一般用__proto__表示。
當查找一個對象的屬性時，JavaScript 會先在顯示屬性中查找，找不到會向上遍歷原型鏈，直到找到給定名稱的屬性為止。到查找到達原型鏈的頂部——也就是 Object.__proto__ ，但是仍然沒有找到指定的屬性，就會返回 undefined。
注：
hasOwnProperty是Object.prototype的一個方法，?是 JavaScript 中唯一一個處理屬性但是不查找原型鏈的函數。
函數中prototype是一個顯示的屬性，創建實例對象（也就是new）的時候除了創建對象外，還做了另一件有用的事情——自動為創建的新對象設置了原型對象(prototype object)。

例1：

var parent = {
    label:"parent"
}
var child = {
    name:"child"
}
//設置原型
child.__proto__ = parent;

console.log(child.name);      //child
console.log(child.label);     //parent

以上代碼中演示了對象屬性查找。當訪問child.name時，name存在child顯示屬性中，終止查找返回字符串child。當訪問child.label時，先在child的顯示屬性中查找，沒有找到然后在child的原型（child的原型__proto__為parent）中找，在child的原型中找到顯示屬性label，直接返回字符串parent。如果此時在該顯示屬性中還沒有找到，會繼續在child的原型（parent）的原型中查找，找到直接終止，沒有找到一直向上找出，直到到達頂部Object.__proto__會終止查找。

例2：

function Parent(){
            
}
Parent.prototype.label = "parent";

var child = new Parent();

console.log(child.__proto__ === Parent.prototype);  //true
console.log(child.label);   //parent

以上代碼中，prototype是Parent的顯示屬性。當實例child(new Parent())的時候，先創建一個新對象，然后吧Parent中的prototype屬性賦值到新對象的__proto__屬性。當訪問child的label屬性時，依據對象屬性查找的規則，現在child的顯示屬性中查找，沒有找到然后在child的原型（__proto__）中找（也就是Parent.prototype.label），這兒找到了然后直接終止返回字符串parent。

云服務器 GPU云服務器原型原型鏈原型鏈原型鏈繼承原型鏈圖

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

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

《javascript高級程序設計》筆記：原型圖解

摘要：不理解沒關系，下面會結合圖例分析上一篇高級程序設計筆記創建對象下一篇高級程序設計筆記繼承參考之原型鏈的解讀三張圖搞懂的原型對象與原型鏈繼承與原型鏈文章直接從原型圖解開始的，如果對一些概念不太清除，可以結合后面幾節查看 1. 圖解原型鏈 1.1 鐵三角關系（重點） function Person() {}; var p = new Person(); showImg(https://s...

vspiders 2019-08-21 17:29 評論0 收藏0
【5】JavaScript 函數高級——原型與原型鏈深入理解（圖解）

摘要：探索是如何判斷的表達式如果函數的顯式原型對象在對象的隱式原型鏈上，返回，否則返回是通過自己產生的實例案例案例重要注意的顯示原型和隱式原型是一樣的。面試題測試題測試題報錯對照下圖理解原型與原型鏈深入理解（圖解）原型（prototype）函數的 prototype 屬性（圖）每個函數都有一個prototype屬性，它默認指向一個Object空對象（即稱為：原型對象）原型對象中有...

馬龍駒 2019-08-23 17:17 評論0 收藏0
JavaScript中的原型與原型鏈

摘要：前言作為前端高頻面試題之一，相信很多小伙伴都有遇到過這個問題。前言作為前端高頻面試題之一，相信很多小伙伴都有遇到過這個問題。那么你是否清楚完整的了解它呢？國際慣例，讓我們先拋出問題：什么是原型、原型鏈它們有什么特點它們能做什么怎么確定它們的關系或許你已經有答案，或許你開始有點疑惑，無論是 get 新技能或是簡單的溫習一次，讓我們一起去探究一番吧如果文章中有出現紕...

laoLiueizo 2019-08-23 16:58 評論0 收藏0
進擊JavaScript之（四）原型與原型鏈

摘要：每一個由構造函數創建的對象都會默認的連接到該神秘對象上。在構造方法中也具有類似的功能，因此也稱其為類實例與對象實例一般是指某一個構造函數創建出來的對象，我們稱為構造函數的實例實例就是對象。表示該原型是與什么構造函數聯系起來的。本文您將看到以下內容：傳統構造函數的問題一些相關概念認識原型構造、原型、實例三角結構圖對象的原型鏈函數的構造函數Function 一句話說明什么...

XBaron 2019-08-20 10:45 評論0 收藏0
原型鏈一：原型與原型鏈

摘要：說白了，原型就是構造函數用來構造新實例的模板對象。什么是原型鏈先回答什么是原型。例如這個原型的原型就是這個構造函數的，既這個原型對象。這些原型對象通過像鏈子一樣連起來，就叫做原型鏈。原型鏈初步學習這篇博客只是我初步理解原型鏈的一個個人學習筆記,寫的比較粗略,且有的地方可能理解錯誤. 更多更專業的關于原型鏈的解釋請看JavaScript深入之從原型到原型鏈和阮一峰的博客:Javas...

MudOnTire 2019-08-22 17:04 評論0 收藏0
JavaScript系列--淺析原型鏈與繼承

摘要：綜上所述有原型鏈繼承，構造函數繼承經典繼承，組合繼承，寄生繼承，寄生組合繼承五種方法，寄生組合式繼承，集寄生式繼承和組合繼承的優點于一身是實現基于類型繼承的最有效方法。一、前言繼承是面向對象（OOP）語言中的一個最為人津津樂道的概念。許多面對對象（OOP）語言都支持兩種繼承方式:：接口繼承和實現繼承。接口繼承只繼承方法簽名,而實現繼承則繼承實際的方法。由于js中方法沒有簽名...

draveness 2019-08-23 18:06 評論0 收藏0