深入淺出理解javaScript原型鏈
本文實(shí)例講述了javaScript的原型鏈。分享給大家供大家參考。具體分析如下：
對于javascript原型鏈，以前都覺得是個(gè)很深的東西，一直沒有理解很明白，今天看了一些介紹后，發(fā)現(xiàn)這張圖，表示再沒有什么語言能比這張圖說得清楚了。
看了這張圖后突然對javascript有了質(zhì)的理解。
javascript的原型鏈有顯式和隱式兩種：
顯式原型鏈：即我們常見的prototype；
隱式原型鏈：在一般環(huán)境下無法訪問，即不可見，在FireFox下可以通過__proto__方式訪問；隱式原型鏈用于javascript引擎內(nèi)部對原型鏈的搜尋，通過顯示原型鏈來設(shè)置；
一、prototype和__proto__的概念
prototype是函數(shù)的一個(gè)屬性（每個(gè)函數(shù)都有一個(gè)prototype屬性），這個(gè)屬性是一個(gè)指針，指向一個(gè)對象。它是顯示修改對象的原型的屬性。
__proto__是一個(gè)對象擁有的內(nèi)置屬性（請注意：prototype是函數(shù)的內(nèi)置屬性，__proto__是對象的內(nèi)置屬性），是JS內(nèi)部使用尋找原型鏈的屬性。
用chrome和FF都可以訪問到對象的__proto__屬性，IE不可以。
二、new 的過程
var Person = function(){};
var p = new Person();
new的過程拆分成以下三步：
(1) var p={}; 也就是說，初始化一個(gè)對象p
(2) p.__proto__ = Person.prototype;
(3) Person.call(p); 也就是說構(gòu)造p，也可以稱之為初始化p
關(guān)鍵在于第二步，我們來證明一下：
var Person = function(){};
var p = new Person();
alert(p.__proto__ === Person.prototype);
這段代碼會返回true。說明我們步驟2是正確的。
三、示例
var Person = function(){};
Person.prototype.sayName = function() {
alert("My Name is Jacky");
};
Person.prototype.age = 27;
var p = new Person();
p.sayName();
p是一個(gè)引用指向Person的對象。我們在Person的原型上定義了一個(gè)sayName方法和age屬性，當(dāng)我們執(zhí)行p.age時(shí)，會先在this的內(nèi)部查找（也就是構(gòu)造函數(shù)內(nèi)部），如果沒有找到然后再沿著原型鏈向上追溯。
這里的向上追溯是怎么向上的呢？這里就要使用__proto__屬性來鏈接到原型（也就是Person.prototype）進(jìn)行查找。最終在原型上找到了age屬性。
希望本文所述對大家的javascript程序設(shè)計(jì)有所幫助。
相關(guān)文章
元素的內(nèi)聯(lián)事件處理函數(shù)的特殊作用域在各瀏覽器中存在差異
在一個(gè)元素的屬性中綁定事件，實(shí)際上就創(chuàng)建了一個(gè)內(nèi)聯(lián)事件處理函數(shù)（如<h1 onclick="alert(this);"...>...</h1>）,內(nèi)聯(lián)事件處理函數(shù)有其特殊的作用域鏈，并且各瀏覽器的實(shí)現(xiàn)細(xì)節(jié)也有差異。2011-01-01
JavaScript實(shí)現(xiàn)twitter puddles算法實(shí)例
這篇文章主要介紹了JavaScript實(shí)現(xiàn)twitter puddles算法實(shí)例,本文源自twitter的一道面試題,本文使用js解開了這首題,需要的朋友可以參考下2014-12-12
這篇文章主要介紹了百度小程序之間的頁面通信,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-07-07
JavaScript如何整合不規(guī)范的接口數(shù)據(jù)
接口返回的數(shù)據(jù)格式通常是非規(guī)范化的,這會導(dǎo)致在后端或前端處理數(shù)據(jù)時(shí)出現(xiàn)困難,所以本文為大家介紹了在JavaScript如何整合不規(guī)范的接口數(shù)據(jù),需要的可以參考下2025-02-02
webpack是一個(gè)強(qiáng)大的模塊打包工具，在處理依賴、模塊上都很優(yōu)秀，本文從bundle.js文件分析出發(fā)去探索了不同模塊方案的加載機(jī)制，初步去理解webpack，并且對webpack3特性進(jìn)行闡述2017-09-09
深入理解JavaScript系列(10) JavaScript核心（晉級高手必讀篇）
本篇是ECMA-262-3 in detail系列的一個(gè)概述（本人后續(xù)會翻譯整理這些文章到本系列（第11-19章）。每個(gè)章節(jié)都有一個(gè)更詳細(xì)的內(nèi)容鏈接，你可以繼續(xù)讀一下每個(gè)章節(jié)對應(yīng)的詳細(xì)內(nèi)容鏈接進(jìn)行更深入的了解2012-01-01
快速學(xué)習(xí)JavaScript的6個(gè)思維技巧
在這篇文章中，我將介紹六個(gè)思維技巧來幫助你更快地學(xué)習(xí)JavaScript，并成為一個(gè)更快樂、更富有成效的程序員。2015-10-10
javascript仿php的print_r函數(shù)輸出json數(shù)據(jù)
輸出json數(shù)據(jù)，php的print_r函數(shù)可以輕松實(shí)現(xiàn)，下面為大家介紹下javascript也可以模仿print_r函數(shù)輸出json數(shù)據(jù)，具體實(shí)現(xiàn)如下，感興趣的朋友可以了解下2013-09-09
本文為大家介紹下如何使用js循環(huán)json數(shù)據(jù)的列，簡單幾步輕松實(shí)現(xiàn)2013-09-09
有了 With 語句，在存取對象屬性和方法時(shí)就不用重復(fù)指定參考對象，下面為大家介紹下With 語句的語法格式及使用2014-08-08