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）
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。如下
Math.__proto__ === Object.prototype // true
JSON.__proto__ === Object.prototype // true
上面說的“所有構(gòu)造器/函數(shù)”當然包括自定義的。如下
// 函數(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都是一個對象。如下
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)呢？如下
console.log(Function.prototype.__proto__ === Object.prototype) // true
這說明所有的構(gòu)造器也都是一個普通JS對象，可以給構(gòu)造器添加/刪除屬性等。同時它也繼承了Object.prototype上的所有方法：toString、valueOf、hasOwnProperty等。
最后Object.prototype的__proto__是誰？
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)造器
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
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é)果也是恒等的
function Person(name) {
this.name = name
}
var p = new Person('jack')
console.log(p.__proto__ === p.constructor.prototype) // true
上面的Person沒有給其原型添加屬性或方法，這里給其原型添加一個getName方法
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é)果就有些不同了
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(){}}不等。如下
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)部原型。
var p = {}
var __proto__ = Object.getPrototypeOf(p)
console.log(__proto__ === Object.prototype) // true
一、所有構(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-prototype繼承
- javascript prototype的深度探索不是原型繼承那么簡單
- javascript prototype 原型鏈
- javascript Prototype 對象擴展
- JavaScript isPrototypeOf和hasOwnProperty使用區(qū)別
- JavaScript中的prototype使用說明
- JavaScript為對象原型prototype添加屬性的兩種方式
- javascript中的prototype屬性實例分析說明
- javascript中的prototype屬性使用說明(函數(shù)功能擴展)
- javascript Array.prototype.slice使用說明
- 擴展javascript的Date方法實現(xiàn)代碼(prototype)
- javascript 進階篇3 Ajax 、JSON、 Prototype介紹
- JavaScript面向?qū)ο笾甈rototypes和繼承
- JavaScript prototype屬性深入介紹
- JavaScript中幾個重要的屬性(this、constructor、prototype)介紹
- JavaScript prototype 使用介紹
- JavaScript子類用Object.getPrototypeOf去調(diào)用父類方法解析
- JavaScript中的prototype.bind()方法介紹
- Javascript中Array.prototype.map()詳解
- javascript 中__proto__和prototype詳解
- JavaScript通過prototype給對象定義屬性用法實例
- 跟我學習javascript的prototype,getPrototypeOf和__proto__
相關(guān)文章
本篇文章是對JavaScript中的標簽語句進行了詳細的分析介紹，需要的朋友參考下2013-06-06
JavaScript操作HTML DOM節(jié)點的基礎(chǔ)教程
這篇文章主要介紹了JavaScript操作HTML DOM節(jié)點的基礎(chǔ)入門教程,包括對節(jié)點的創(chuàng)建修改刪除等操作,還特別提到了其中appendChild()與insertBefore()插入節(jié)點時需注意的問題,需要的朋友可以參考下2016-03-03
本篇文章，小編將與大家談?wù)凧avaScript中的函數(shù)與閉包，有需要的朋友可以參考一下2013-04-04
深入理解JavaScript系列（41）：設(shè)計模式之模板方法詳解
這篇文章主要介紹了深入理解JavaScript系列（41）：設(shè)計模式之模板方法詳解,模板方法（TemplateMethod）定義了一個操作中的算法的骨架,而將一些步驟延遲到子類中,模板方法使得子類可以不改變一個算法的結(jié)構(gòu)即可重定義該算法的某些特定步驟,需要的朋友可以參考下2015-03-03
JS實現(xiàn)的生成隨機數(shù)的4個函數(shù)分享
這篇文章主要介紹了JS實現(xiàn)的生成隨機數(shù)的4個函數(shù)分享,本文直接給出實現(xiàn)代碼,需要的朋友可以參考下2015-02-02
這篇文章主要詳細介紹了DOM中的事件流，包括冒泡型事件、事件監(jiān)聽、標準DOM事件監(jiān)聽這三個方面，十分詳細，推薦給大家。2015-01-01
本文是每日十條JavaScript經(jīng)驗技巧系列文章的第一篇，給大家匯總介紹一些在JavaScript使用過程中的注意事項，非常的簡單，都是個人在平時項目中的一點小小的總結(jié)，希望對大家能夠有所幫助2016-06-06
javascript基礎(chǔ)語法——全面理解變量和標識符
下面小編就為大家?guī)硪黄猨avascript基礎(chǔ)語法——全面理解變量和標識符。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考，一起跟隨小編過來看看吧2016-06-06
Javascript WebSocket使用實例介紹（簡明入門教程）
網(wǎng)絡(luò)套接字是下一代WEB應(yīng)用程序雙向通信技術(shù)，它是基于一個獨立的socket并且需要客戶端瀏覽器支持HTML52014-04-04
這篇文章主要介紹了關(guān)于前端要知道的?AST知識,在計算機科學中，抽象語法樹是源代碼語法結(jié)構(gòu)的一種抽象表示,需要的朋友可以參考下2023-04-04