protopype 和 __proto__的區別

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

早前在博客園發的幾篇基礎文，都是圖解系列，總結了一些JavaScript容易混淆的知識點，如今拿來在掘金分享一下吧。

原文地址：三張圖搞懂JavaScript的原型對象與原型鏈

對於新人來講，JavaScript的原型是一個很讓人頭疼的事情，一來prototype容易與__proto__混淆，二來它們之間的各類指向實在有些複雜，其實市面上已經有很是多的文章在嘗試說清楚，有一張所謂很經典的圖，上面畫了各類線條，一會鏈接這個一會鏈接那個，說實話我本身看得就很是頭暈，更談不上徹底理解了。因此我本身也想嘗試一下，看看能不能把原型中的重要知識點拆分出來，用最簡單的圖表形式說清楚。

咱們知道原型是一個對象，其餘對象能夠經過它實現屬性繼承。可是尼瑪除了prototype，又有一個__proto__是用來幹嗎的？長那麼像，讓人怎麼區分呢？它們都指向誰，那麼混亂怎麼記啊？原型鏈又是什麼鬼？相信很多初學者甚至有必定經驗的老鳥都不必定能徹底說清楚，下面用三張簡單的圖，配合一些示例代碼來理解一下。

一、prototype和__proto__的區別

 

 

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() {}

二、__proto__屬性指向誰

 

 

/*一、字面量方式*/
var a = {};
console.log(a.constructor); //function Object() { [native code] } (即構造器Object）
console.log(a.__proto__ === a.constructor.prototype); //true

/*二、構造器方式*/
var A = function (){}; var a = new A();
console.log(a.constructor); // function(){}（即構造器function A）
console.log(a.__proto__ === a.constructor.prototype); //true

/*三、Object.create()方式*/
var a1 = {a:1} 
var a2 = Object.create(a1);
console.log(a2.constructor); //function Object() { [native code] } (即構造器Object)
console.log(a2.__proto__ === a1);// true 
console.log(a2.__proto__ === a2.constructor.prototype); //false（此處即爲圖1中的例外狀況）

3、什麼是原型鏈

 

 

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