快捷導(dǎo)航

JavaScript中proto與prototype的關(guān)系深入理解

更新時間：2012年12月04日 09:55:33 作者：

本文將討論下對象的內(nèi)部原型(__proto__)和構(gòu)造器的原型（prototype）的關(guān)系，需要了解更多的朋友可以參考下

這里討論下對象的內(nèi)部原型(__proto__)和構(gòu)造器的原型（prototype）的關(guān)系。
一、所有構(gòu)造器/函數(shù)的__proto__都指向Function.prototype，它是一個空函數(shù)（Empty function）

復(fù)制代碼代碼如下:

 
Number.__proto__ === Function.prototype // true 
Boolean.__proto__ === Function.prototype // true 
String.__proto__ === Function.prototype // true 
Object.__proto__ === Function.prototype // true 
Function.__proto__ === Function.prototype // true 
Array.__proto__ === Function.prototype // true 
RegExp.__proto__ === Function.prototype // true 
Error.__proto__ === Function.prototype // true 
Date.__proto__ === Function.prototype // true 

JavaScript中有內(nèi)置(build-in)構(gòu)造器/對象共計12個（ES5中新加了JSON），這里列舉了可訪問的8個構(gòu)造器。剩下如Global不能直接訪問，Arguments僅在函數(shù)調(diào)用時由JS引擎創(chuàng)建，Math，JSON是以對象形式存在的，無需new。它們的__proto__是Object.prototype。如下

復(fù)制代碼代碼如下:

 
Math.__proto__ === Object.prototype // true 
JSON.__proto__ === Object.prototype // true 

上面說的“所有構(gòu)造器/函數(shù)”當然包括自定義的。如下

復(fù)制代碼代碼如下:

 
// 函數(shù)聲明 
function Person() {} 
// 函數(shù)表達式 
var Man = function() {} 
console.log(Person.__proto__ === Function.prototype) // true 
console.log(Man.__proto__ === Function.prototype) // true 

這說明什么呢？
所有的構(gòu)造器都來自于Function.prototype，甚至包括根構(gòu)造器Object及Function自身。所有構(gòu)造器都繼承了Function.prototype的屬性及方法。如length、call、apply、bind（ES5）。
Function.prototype也是唯一一個typeof XXX.prototype為 “function”的prototype。其它的構(gòu)造器的prototype都是一個對象。如下

復(fù)制代碼代碼如下:

 
console.log(typeof Function.prototype) // function 
console.log(typeof Object.prototype) // object 
console.log(typeof Number.prototype) // object 
console.log(typeof Boolean.prototype) // object 
console.log(typeof String.prototype) // object 
console.log(typeof Array.prototype) // object 
console.log(typeof RegExp.prototype) // object 
console.log(typeof Error.prototype) // object 
console.log(typeof Date.prototype) // object 
console.log(typeof Object.prototype) // object 

噢，上面還提到它是一個空的函數(shù)，alert(Function.prototype) 下看看。
知道了所有構(gòu)造器（含內(nèi)置及自定義）的__proto__都是Function.prototype，那Function.prototype的__proto__是誰呢？
相信都聽說過JavaScript中函數(shù)也是一等公民，那從哪能體現(xiàn)呢？如下

復(fù)制代碼代碼如下:

console.log(Function.prototype.__proto__ === Object.prototype) // true

這說明所有的構(gòu)造器也都是一個普通JS對象，可以給構(gòu)造器添加/刪除屬性等。同時它也繼承了Object.prototype上的所有方法：toString、valueOf、hasOwnProperty等。
最后Object.prototype的__proto__是誰？

復(fù)制代碼代碼如下:

Object.prototype.__proto__ === null // true

已經(jīng)到頂了，為null。
二、所有對象的__proto__都指向其構(gòu)造器的prototype
上面測試了所有內(nèi)置構(gòu)造器及自定義構(gòu)造器的__proto__，下面再看看所有這些構(gòu)造器的實例對象的__proto__指向誰？
先看看JavaScript引擎內(nèi)置構(gòu)造器

復(fù)制代碼代碼如下:

 
var obj = {name: 'jack'} 
var arr = [1,2,3] 
var reg = /hello/g 
var date = new Date 
var err = new Error('exception') 
console.log(obj.__proto__ === Object.prototype) // true 
console.log(arr.__proto__ === Array.prototype) // true 
console.log(reg.__proto__ === RegExp.prototype) // true 
console.log(date.__proto__ === Date.prototype) // true 
console.log(err.__proto__ === Error.prototype) // true 

再看看自定義的構(gòu)造器，這里定義了一個Person

復(fù)制代碼代碼如下:

 
function Person(name) { 
this.name = name 
} 
var p = new Person('jack') 
console.log(p.__proto__ === Person.prototype) // true 

p是Person的實例對象，p的內(nèi)部原型總是指向其構(gòu)造器Person的prototype。
每個對象都有一個constructor屬性，可以獲取它的構(gòu)造器，因此以下打印結(jié)果也是恒等的

復(fù)制代碼代碼如下:

 
function Person(name) { 
this.name = name 
} 
var p = new Person('jack') 
console.log(p.__proto__ === p.constructor.prototype) // true 

上面的Person沒有給其原型添加屬性或方法，這里給其原型添加一個getName方法

復(fù)制代碼代碼如下:

 
function Person(name) { 
this.name = name 
} 
// 修改原型 
Person.prototype.getName = function() {} 
var p = new Person('jack') 
console.log(p.__proto__ === Person.prototype) // true 
console.log(p.__proto__ === p.constructor.prototype) // true 

可以看到p.__proto__與Person.prototype，p.constructor.prototype都是恒等的，即都指向同一個對象。
如果換一種方式設(shè)置原型，結(jié)果就有些不同了

復(fù)制代碼代碼如下:

 
function Person(name) { 
this.name = name 
} 
// 重寫原型 
Person.prototype = { 
getName: function() {} 
} 
var p = new Person('jack') 
console.log(p.__proto__ === Person.prototype) // true 
console.log(p.__proto__ === p.constructor.prototype) // false 

這里直接重寫了Person.prototype（注意：上一個示例是修改原型）。輸出結(jié)果可以看出p.__proto__仍然指向的是Person.prototype，而不是p.constructor.prototype。
這也很好理解，給Person.prototype賦值的是一個對象直接量{getName: function(){}}，使用對象直接量方式定義的對象其構(gòu)造器（constructor）指向的是根構(gòu)造器Object，Object.prototype是一個空對象{}，{}自然與{getName: function(){}}不等。如下

復(fù)制代碼代碼如下:

 
var p = {} 
console.log(Object.prototype) // 為一個空的對象{} 
console.log(p.constructor === Object) // 對象直接量方式定義的對象其constructor為Object 
console.log(p.constructor.prototype === Object.prototype) // 為true，不解釋 

上面代碼中用到的__proto__目前在IE6/7/8/9中都不支持。IE9中可以使用Object.getPrototypeOf(ES5)獲取對象的內(nèi)部原型。

復(fù)制代碼代碼如下:

 
var p = {} 
var __proto__ = Object.getPrototypeOf(p) 
console.log(__proto__ === Object.prototype) // true 

您可能感興趣的文章:

相關(guān)文章

JavaScript_object基礎(chǔ)入門(必看篇)
下面小編就為大家?guī)硪黄狫avaScript_object基礎(chǔ)入門(必看篇)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-06-06
關(guān)于textarea提交的內(nèi)容無法換行的解決辦法
本篇文章小編為大家介紹，關(guān)于textarea提交的內(nèi)容無法換行的解決辦法，有需要的朋友可以參考一下
2013-04-04
JavaScript中的setUTCDate()方法使用詳解
這篇文章主要介紹了JavaScript中的setUTCDate()方法使用詳解,是JS入門學習中的基礎(chǔ)知識,需要的朋友可以參考下
2015-06-06
JS創(chuàng)建事件的三種方法(實例代碼)
下面小編就為大家?guī)硪黄狫S創(chuàng)建事件的三種方法(實例代碼)。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-05-05
javascript object oriented 面向?qū)ο缶幊坛醪?..
2007-01-01