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

創(chuàng)新互聯(lián)公司是專業(yè)的北川羌族網(wǎng)站建設(shè)公司，北川羌族接單;提供成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè),網(wǎng)頁設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行北川羌族網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來合作!

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

 
 
 
 

  
  
  
  
 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 
 
 
 
 

【本文為專欄作者“謝軍”的原創(chuàng)稿件，轉(zhuǎn)載可通過作者微信公眾號(jingfeng18)獲取聯(lián)系】

文章名稱：三張圖搞懂JavaScript的原型對象與原型鏈
文章路徑：http://uogjgqi.cn/article/djepcds.html