三張圖帶你搞懂JavaScript的原型對象與原型鏈

更新時間：2022年07月05日 15:23:10 作者：水乙

這篇文章介紹了JavaScript的原型對象與原型鏈，文中通過示例代碼介紹的非常詳細。對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下

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

我們知道原型是一個對象，其他對象可以通過它實現(xiàn)屬性繼承。但是尼瑪除了prototype，又有一個__proto__是用來干嘛的？長那么像，讓人怎么區(qū)分呢？它們都指向誰，那么混亂怎么記?。吭玩溣质鞘裁垂?？相信不少初學者甚至有一定經(jīng)驗的老鳥都不一定能完全說清楚，下面用三張簡單的圖，配合一些示例代碼來理解一下。

一、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 的原型對象）
console.log(a.__proto__.__proto__); //Object {}（即構(gòu)造器function Object 的原型對象）
console.log(a.__proto__.__proto__.__proto__); //null

到此這篇關(guān)于JavaScript原型對象與原型鏈的文章就介紹到這了。希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: