圖文詳解JavaScript的原型對(duì)象及原型鏈

更新時(shí)間：2016年08月02日 14:43:02 投稿：daisy

許多人對(duì)JavaScript的原型及原型鏈仍感到困惑，網(wǎng)上的文章又大多長(zhǎng)篇大論，令讀者不明覺(jué)厲。下面小編將用最簡(jiǎn)潔明了的圖文介紹JavaScript的原型及原型鏈。

對(duì)于新人來(lái)說(shuō)，JavaScript的原型是一個(gè)很讓人頭疼的事情，一來(lái)prototype容易與__proto__混淆，二來(lái)它們之間的各種指向?qū)嵲谟行?fù)雜，其實(shí)市面上已經(jīng)有非常多的文章在嘗試說(shuō)清楚，有一張所謂很經(jīng)典的圖，上面畫(huà)了各種線條，一會(huì)連接這個(gè)一會(huì)連接那個(gè)，說(shuō)實(shí)話我自己看得就非常頭暈，更談不上完全理解了。所以我自己也想嘗試一下，看看能不能把原型中的重要知識(shí)點(diǎn)拆分出來(lái)，用最簡(jiǎn)單的圖表形式說(shuō)清楚。

我們知道原型是一個(gè)對(duì)象，其他對(duì)象可以通過(guò)它實(shí)現(xiàn)屬性繼承。但是尼瑪除了prototype，又有一個(gè)__proto__是用來(lái)干嘛的？長(zhǎng)那么像，讓人怎么區(qū)分呢？它們都指向誰(shuí)，那么混亂怎么記??？原型鏈又是什么鬼？相信不少初學(xué)者甚至有一定經(jīng)驗(yàn)的老鳥(niǎo)都不一定能完全說(shuō)清楚，下面用三張簡(jiǎn)單的圖，配合一些示例代碼來(lái)理解一下。

一、prototype和__proto__的區(qū)別

var a = {};
console.log(a.prototype); //undefined
console.log(a.__proto__); //Object {}

var b = function(){}
console.log(b.prototype); //b {}
console.log(b.__proto__); //function() {}

/*1、字面量方式*/
var a = {};
console.log(a.__proto__); //Object {}

console.log(a.__proto__ === a.constructor.prototype); //true

/*2、構(gòu)造器方式*/
var A = function(){};
var a = new A();
console.log(a.__proto__); //A {}

console.log(a.__proto__ === a.constructor.prototype); //true

/*3、Object.create()方式*/
var a1 = {a:1}
var a2 = Object.create(a1);
console.log(a2.__proto__); //Object {a: 1}

console.log(a.__proto__ === a.constructor.prototype); //false（此處即為圖1中的例外情況）

var A = function(){};
var a = new A();
console.log(a.__proto__); //A {}（即構(gòu)造器function A 的原型對(duì)象）
console.log(a.__proto__.__proto__); //Object {}（即構(gòu)造器function Object 的原型對(duì)象）
console.log(a.__proto__.__proto__.__proto__); //null

以上就是本文的全部?jī)?nèi)容了，本文用三張圖解釋了JavaScript的原型對(duì)象與原型鏈，希望對(duì)大家學(xué)習(xí)JavaScript的時(shí)候有所幫助。

您可能感興趣的文章:

相關(guān)文章

微信小程序中實(shí)現(xiàn)雙向綁定的實(shí)戰(zhàn)過(guò)程
最近在小程序的開(kāi)發(fā)過(guò)程中,需要用到雙向綁定,遇到報(bào)錯(cuò)才知道微信本身是不支持對(duì)象雙向綁定的,折騰一番找到解決方案,下面這篇文章主要給大家介紹了關(guān)于微信小程序中實(shí)現(xiàn)雙向綁定的相關(guān)資料,需要的朋友可以參考下
2023-01-01
javascript實(shí)現(xiàn)的動(dòng)態(tài)文字變換
javascript實(shí)現(xiàn)的動(dòng)態(tài)文字變換...
2007-07-07
JS回調(diào)函數(shù)簡(jiǎn)單用法示例
這篇文章主要介紹了JS回調(diào)函數(shù)簡(jiǎn)單用法,結(jié)合實(shí)例形式分析了js回調(diào)函數(shù)的定義與簡(jiǎn)單使用方法,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2017-02-02
基于JavaScript實(shí)現(xiàn)抽獎(jiǎng)系統(tǒng)
這篇文章主要為大家詳細(xì)介紹了基于JavaScript實(shí)現(xiàn)抽獎(jiǎng)系統(tǒng)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-01-01
JavaScript實(shí)現(xiàn)隨機(jī)點(diǎn)名程序
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)隨機(jī)點(diǎn)名程序，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-03-03
JavaScript實(shí)現(xiàn)復(fù)制文章自動(dòng)添加版權(quán)
自己辛辛苦苦寫(xiě)的文章，輕易就被別人復(fù)制－粘貼去了，是不是很傷心呢？小編今天給大家整理了兩個(gè)方法，讓別人復(fù)制自己的文章時(shí)，自動(dòng)在文章的結(jié)尾添加自己的版權(quán)信息。
2016-08-08
javascript中正則表達(dá)式語(yǔ)法詳解
這篇文章主要介紹了javascript中正則表達(dá)式語(yǔ)法詳解，文章通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-08-08
奇偶行高亮顯示及鼠標(biāo)劃過(guò)高亮顯示類
奇或偶數(shù)行高亮顯示及鼠標(biāo)莫過(guò)高亮顯示,一個(gè)經(jīng)常用到的效果,也能谷歌到大把的這種效果JS,但好像還沒(méi)有一個(gè)封裝成類直接用的.想象自己當(dāng)初谷歌這個(gè)類時(shí),還真沒(méi)少折騰時(shí)間.
2010-07-07
在layui中使用form表單監(jiān)聽(tīng)ajax異步驗(yàn)證注冊(cè)的實(shí)例
今天小編就為大家分享一篇在layui中使用form表單監(jiān)聽(tīng)ajax異步驗(yàn)證注冊(cè)的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2019-09-09
JavaScript中將字符串轉(zhuǎn)換為浮點(diǎn)數(shù)的技巧
在JavaScript中,parseFloat是一個(gè)內(nèi)置函數(shù),用于將一個(gè)字符串解析成浮點(diǎn)數(shù),這個(gè)方法對(duì)于處理用戶輸入、從文本文件讀取數(shù)據(jù)或者在Web API中獲取數(shù)值尤其重要,本文將詳細(xì)介紹parseFloat的工作原理、使用方法以及通過(guò)代碼案例展示其在實(shí)際開(kāi)發(fā)中的應(yīng)用
2025-02-02