JavaScript原型鏈?zhǔn)纠窒?/h1>

 更新時(shí)間：2014年01月26日 15:08:45   作者：  

這篇文章主要介紹了JavaScript原型鏈?zhǔn)纠?，有需要的朋友可以參考一?/div>

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

<mce:script type="text/javascript"><!--
/*
   每個(gè)對(duì)象實(shí)例都有個(gè)屬性成員用于指向到它的instanceof 對(duì)象(暫稱(chēng)為父對(duì)象)的原型(prototype)
   我們把這種層層指向父原型的關(guān)系稱(chēng)為[原型鏈 prototype chian]
   原型也具有父原型，因?yàn)樗彩且粋€(gè)對(duì)象實(shí)例，除非我們?nèi)藶榈厝ジ淖兯?BR>   在JavaScript中，"一切都是對(duì)象，函數(shù)是第一型。"
   Function和Object都是函數(shù)的實(shí)例。
   Function的父原型指向到Function的原型，F(xiàn)unction.prototype的父原型是Object的原型
   Object的父原型也指向到Function的原型，Object.prototype是所有父原型的頂層
   在spiderMonkey引擎中，父原型可以通過(guò) __proto__ 進(jìn)行訪(fǎng)問(wèn)
*/
Function.prototype.hi = function(){alert('hi Function');}
Object.prototype.hi = function(){alert('hi Object');}
var a = function(){
    this.txt = "a";
}
a.prototype = {
    say:function(){alert('a');}
}
alert(a instanceof Function);//a是Function的實(shí)例;
alert(a.__proto__ === Function.prototype);//a的父原型指向到Function的原型;
alert(Function instanceof Object);//Function是Object的實(shí)例;
alert(Function.__proto__ === Function.prototype);//Function的父原型指向到Function的原型;
alert(Function.prototype.__proto__ === Object.prototype);//Function的原型的父原型指向到Object的原型
alert(Object.__proto__ === Function.prototype);//Object的父原型指向到Function的原型;
alert(Object.prototype.__proto__);//Object的原型是所有父原型的頂端，它不再具有父原型;

alert(a.prototype instanceof Object);//a的原型也是一個(gè)對(duì)象
alert(a.prototype.__proto__ === Object.prototype);//a的原型的父原型指向Object的原型

var A = function(){};
A.prototype = new a();
A.prototype.say = function(){
    alert('A');
}
alert(A instanceof Function);//A是Function的實(shí)例
alert(A.__proto__ === Function.prototype);//A的父原型指向到Function的原型
alert(A.prototype instanceof a);//A的原型是a的實(shí)例
alert(A.prototype.__proto__ === a.prototype);//A的原型的父原型指向到a的原型

var iA = new A();//iA是A的實(shí)例,iA.__proto__ === A.prototype
var iB = new a();//iB是a的實(shí)例,iB.__proto__ === a.prototype
iA.hi();
/*
iA本身沒(méi)有hi方法（構(gòu)造中沒(méi)有，自己也沒(méi)有定義過(guò)），
于是找iA.__proto__即A.prototype，也沒(méi)有找到，
于是再找A.prototype.__proto__即a.prototype，仍然沒(méi)有發(fā)現(xiàn)，
繼續(xù)查找a.prototype.__proto__即Object.prototype，哇，發(fā)現(xiàn)了hi，于是調(diào)用它，停止查找
輸出：hi Object
*/
iB.hi();
/*
iB本身沒(méi)有hi方法（構(gòu)造中沒(méi)有，自己也沒(méi)有定義過(guò)），
于是找iB.__proto__即a.prototype，仍然沒(méi)有發(fā)現(xiàn)，
繼續(xù)查找a.prototype.__proto__即Object.prototype，哇，發(fā)現(xiàn)了hi，于是調(diào)用它，停止查找
輸出：hi Object
*/
a.hi();
/*
a本身沒(méi)有hi方法（構(gòu)造中沒(méi)有，自己也沒(méi)有定義過(guò)），
于是找a.__proto__既Function.prototype，哇，發(fā)現(xiàn)了hi，于是調(diào)用它，停止查找
輸出：hi Function
*/
iA.say();
/*
iA本身沒(méi)有say方法（構(gòu)造中沒(méi)有，自己也沒(méi)有定義過(guò)），
于是找iA.__proto__即A.prototype，哇，發(fā)現(xiàn)了say，于是調(diào)用它，停止查找
所以，這里調(diào)用的是A.prototype.say
輸出：A
*/
iB.say();
/*
iB本身沒(méi)有say方法（構(gòu)造中沒(méi)有，自己也沒(méi)有定義過(guò)），
于是找iB.__proto__即a.prototype，哇，發(fā)現(xiàn)了say，于是調(diào)用它，停止查找
所以，這里調(diào)用的是a.prototype.say
輸出：a
*/
iA.bad();
/*
iA本身沒(méi)有bad方法（構(gòu)造中沒(méi)有，自己也沒(méi)有定義過(guò)），
于是找iA.__proto__即A.prototype，也沒(méi)有找到，
于是再找A.prototype.__proto__即a.prototype，仍然沒(méi)有發(fā)現(xiàn)，
繼續(xù)查找a.prototype.__proto__即Object.prototype，終于是找不到了，停止查找
返回錯(cuò)誤，iA.bad不是一個(gè)function
*/
// --></mce:script>

</script>

感謝simon提出的修正意見(jiàn)！所有實(shí)例在查找屬性方法時(shí)不會(huì)去查找自己的prototype(實(shí)例的prototype不在原型鏈內(nèi)，只能作為一個(gè)屬性)！

您可能感興趣的文章:

• javascript學(xué)習(xí)筆記（九）javascript中的原型(prototype)及原型鏈的繼承方式
• 深入理解JavaScript系列(6) 強(qiáng)大的原型和原型鏈
• javascript中的原型鏈深入理解
• JavaScript繼承基礎(chǔ)講解(原型鏈、借用構(gòu)造函數(shù)、混合模式、原型式繼承、寄生式繼承、寄生組合式繼承)
• 深入理解javascript原型鏈和繼承
• Javascript原型鏈和原型的一個(gè)誤區(qū)
• JavaScript中原型和原型鏈詳解
• 深入淺出理解javaScript原型鏈
• 淺談javascript原型鏈與繼承
• 理解javascript中的原型和原型鏈

• JavaScript
• 原型鏈

相關(guān)文章

• 

  JavaScript基于replace+正則實(shí)現(xiàn)ES6的字符串模版功能

  這篇文章主要介紹了JavaScript基于replace+正則實(shí)現(xiàn)ES6的字符串模版功能,結(jié)合實(shí)例形式分析了replace結(jié)合正則實(shí)現(xiàn)ES6字符串模板功能的具體步驟與相關(guān)操作技巧,需要的朋友可以參考下

  2017-04-04
• 

  詳解webpack的clean-webpack-plugin插件報(bào)錯(cuò)

  這篇文章主要介紹了詳解webpack的clean-webpack-plugin插件報(bào)錯(cuò)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

  2020-10-10
• 

  簡(jiǎn)單了解three.js 著色器材質(zhì)

  這篇文章主要介紹了three.js 著色器材質(zhì)的相關(guān)資料，文中講解非常詳細(xì)，代碼幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下

  2020-08-08
• 

  一文詳解JavaScript數(shù)組對(duì)象和字符串對(duì)象

  這篇文章主要介紹了JavaScript數(shù)組對(duì)象和字符串對(duì)象，文章中有詳細(xì)的代碼示例，對(duì)學(xué)習(xí)或工作有一定的幫助，需要的小伙伴可以參考一下

  2023-04-04
• 

  Vue.js實(shí)現(xiàn)頁(yè)面后退時(shí)還原滾動(dòng)位置的操作方法

  Vuet看起來(lái)也不是很復(fù)雜，只需要定義好模塊狀態(tài)，然后在組件中設(shè)置對(duì)應(yīng)的規(guī)則來(lái)更新模塊的狀態(tài)即可，這篇文章主要介紹了Vue.js實(shí)現(xiàn)頁(yè)面后退時(shí)還原滾動(dòng)位置的實(shí)現(xiàn)方法,需要的朋友可以參考下

  2022-07-07

• 這篇文章主要為大家詳細(xì)介紹了JavaScript仿京東搜索框?qū)嵗?，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

  2022-03-03

js數(shù)組去重的方法匯總

本文給大家匯總介紹了3種javascript數(shù)組去重的方法以及示例，十分的簡(jiǎn)單實(shí)用，有需要的小伙伴可以參考下。

2015-07-07

用微信小程序?qū)崿F(xiàn)計(jì)算器功能

這篇文章主要為大家詳細(xì)介紹了用微信小程序?qū)崿F(xiàn)計(jì)算器功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

2021-07-07

uni-app小程序分享功能實(shí)現(xiàn)方法舉例

這篇文章主要給大家介紹了關(guān)于uni-app小程序分享功能實(shí)現(xiàn)方法的相關(guān)資料,uni-app中有分享的API接口,但是需要現(xiàn)在QQ或者微信等開(kāi)發(fā)者平臺(tái)上注冊(cè)賬號(hào),驗(yàn)證公司信息,而且只能分享圖片或者文本等內(nèi)容,需要的朋友可以參考下

2023-07-07

footer定位頁(yè)面底部（代碼分享）

本文主要分享了footer定位頁(yè)面底部的實(shí)例代碼，具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧

2017-03-03

最新評(píng)論