快捷導(dǎo)航

圖文詳解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ì)連接這個(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í)候有所幫助。

您可能感興趣的文章: