JavaScript原型鏈?zhǔn)纠窒?/h1>
更新時間:2014年01月26日 15:08:45 作者:
這篇文章主要介紹了JavaScript原型鏈?zhǔn)纠?,有需要的朋友可以參考一?/div>
復(fù)制代碼 代碼如下:
<mce:script type="text/javascript"><!--
/*
每個對象實(shí)例都有個屬性成員用于指向到它的instanceof 對象(暫稱為父對象)的原型(prototype)
我們把這種層層指向父原型的關(guān)系稱為[原型鏈 prototype chian]
原型也具有父原型,因?yàn)樗彩且粋€對象實(shí)例,除非我們?nèi)藶榈厝ジ淖兯?BR> 在JavaScript中,"一切都是對象,函數(shù)是第一型。"
Function和Object都是函數(shù)的實(shí)例。
Function的父原型指向到Function的原型,F(xiàn)unction.prototype的父原型是Object的原型
Object的父原型也指向到Function的原型,Object.prototype是所有父原型的頂層
在spiderMonkey引擎中,父原型可以通過 __proto__ 進(jì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的原型也是一個對象
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本身沒有hi方法(構(gòu)造中沒有,自己也沒有定義過),
于是找iA.__proto__即A.prototype,也沒有找到,
于是再找A.prototype.__proto__即a.prototype,仍然沒有發(fā)現(xiàn),
繼續(xù)查找a.prototype.__proto__即Object.prototype,哇,發(fā)現(xiàn)了hi,于是調(diào)用它,停止查找
輸出:hi Object
*/
iB.hi();
/*
iB本身沒有hi方法(構(gòu)造中沒有,自己也沒有定義過),
于是找iB.__proto__即a.prototype,仍然沒有發(fā)現(xiàn),
繼續(xù)查找a.prototype.__proto__即Object.prototype,哇,發(fā)現(xiàn)了hi,于是調(diào)用它,停止查找
輸出:hi Object
*/
a.hi();
/*
a本身沒有hi方法(構(gòu)造中沒有,自己也沒有定義過),
于是找a.__proto__既Function.prototype,哇,發(fā)現(xiàn)了hi,于是調(diào)用它,停止查找
輸出:hi Function
*/
iA.say();
/*
iA本身沒有say方法(構(gòu)造中沒有,自己也沒有定義過),
于是找iA.__proto__即A.prototype,哇,發(fā)現(xiàn)了say,于是調(diào)用它,停止查找
所以,這里調(diào)用的是A.prototype.say
輸出:A
*/
iB.say();
/*
iB本身沒有say方法(構(gòu)造中沒有,自己也沒有定義過),
于是找iB.__proto__即a.prototype,哇,發(fā)現(xiàn)了say,于是調(diào)用它,停止查找
所以,這里調(diào)用的是a.prototype.say
輸出:a
*/
iA.bad();
/*
iA本身沒有bad方法(構(gòu)造中沒有,自己也沒有定義過),
于是找iA.__proto__即A.prototype,也沒有找到,
于是再找A.prototype.__proto__即a.prototype,仍然沒有發(fā)現(xiàn),
繼續(xù)查找a.prototype.__proto__即Object.prototype,終于是找不到了,停止查找
返回錯誤,iA.bad不是一個function
*/
// --></mce:script>
</script>
感謝simon提出的修正意見!所有實(shí)例在查找屬性方法時不會去查找自己的prototype(實(shí)例的prototype不在原型鏈內(nèi),只能作為一個屬性)!
您可能感興趣的文章:- javascript學(xué)習(xí)筆記(九)javascript中的原型(prototype)及原型鏈的繼承方式
- 深入理解JavaScript系列(6) 強(qiáng)大的原型和原型鏈
- javascript中的原型鏈深入理解
- JavaScript繼承基礎(chǔ)講解(原型鏈、借用構(gòu)造函數(shù)、混合模式、原型式繼承、寄生式繼承、寄生組合式繼承)
- 深入理解javascript原型鏈和繼承
- Javascript原型鏈和原型的一個誤區(qū)
- JavaScript中原型和原型鏈詳解
- 深入淺出理解javaScript原型鏈
- 淺談javascript原型鏈與繼承
- 理解javascript中的原型和原型鏈
相關(guān)文章
-
JavaScript將字符串轉(zhuǎn)換成字符編碼列表的方法
這篇文章主要介紹了JavaScript將字符串轉(zhuǎn)換成字符編碼列表的方法,實(shí)例分析了javascript中charCodeAt函數(shù)的使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下 2015-03-03
-
微信小程序動態(tài)添加和刪除組件的現(xiàn)實(shí)
這篇文章主要介紹了微信小程序動態(tài)添加和刪除組件的現(xiàn)實(shí),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧 2020-02-02
-
Javascript無參數(shù)和有參數(shù)類繼承問題解決方法
這篇文章主要介紹了Javascript無參數(shù)和有參數(shù)類繼承問題解決方法,本文講解了無參數(shù)類繼承的問題和有參類繼承的問題,并給出了解決方案,需要的朋友可以參考下 2015-03-03
-
javascript實(shí)現(xiàn)簡約的頁面右下角點(diǎn)擊彈出窗口示例【測試可用】
這篇文章主要介紹了javascript實(shí)現(xiàn)的頁面右下角點(diǎn)擊彈出窗口功能,結(jié)合實(shí)例形式詳細(xì)分析了javascript頁面右下角點(diǎn)擊彈出窗口功能的相關(guān)步驟、原理與注意事項(xiàng),需要的朋友可以參考下 2023-07-07
-
JavaScript給每一個li節(jié)點(diǎn)綁定點(diǎn)擊事件的實(shí)現(xiàn)方法
這篇文章主要介紹了JavaScript給每一個li節(jié)點(diǎn)綁定點(diǎn)擊事件的實(shí)現(xiàn)方法,包括js循環(huán)給li綁定參數(shù)不同的點(diǎn)擊事件,需要的朋友可以參考下 2016-12-12
-
動態(tài)顯示可輸入的字?jǐn)?shù)提示還可以輸入的字?jǐn)?shù)
這篇文章主要介紹了動態(tài)顯示可輸入的字?jǐn)?shù)提示還可以輸入的字?jǐn)?shù),需要的朋友可以參考下 2014-04-04
-
ES6基礎(chǔ)之解構(gòu)賦值(destructuring assignment)
這篇文章主要介紹了ES6基礎(chǔ)之解構(gòu)賦值(destructuring assignment),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧 2019-02-02
-
javascript實(shí)現(xiàn)促銷倒計時+fixed固定在底部
一個不錯的示例使用javascript實(shí)現(xiàn)的促銷倒計時且同時擁有fixed固定在底部,而且兼容ie6,喜歡的朋友可以參考下 2013-09-09
最新評論
<mce:script type="text/javascript"><!--
/*
每個對象實(shí)例都有個屬性成員用于指向到它的instanceof 對象(暫稱為父對象)的原型(prototype)
我們把這種層層指向父原型的關(guān)系稱為[原型鏈 prototype chian]
原型也具有父原型,因?yàn)樗彩且粋€對象實(shí)例,除非我們?nèi)藶榈厝ジ淖兯?BR> 在JavaScript中,"一切都是對象,函數(shù)是第一型。"
Function和Object都是函數(shù)的實(shí)例。
Function的父原型指向到Function的原型,F(xiàn)unction.prototype的父原型是Object的原型
Object的父原型也指向到Function的原型,Object.prototype是所有父原型的頂層
在spiderMonkey引擎中,父原型可以通過 __proto__ 進(jì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的原型也是一個對象
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本身沒有hi方法(構(gòu)造中沒有,自己也沒有定義過),
于是找iA.__proto__即A.prototype,也沒有找到,
于是再找A.prototype.__proto__即a.prototype,仍然沒有發(fā)現(xiàn),
繼續(xù)查找a.prototype.__proto__即Object.prototype,哇,發(fā)現(xiàn)了hi,于是調(diào)用它,停止查找
輸出:hi Object
*/
iB.hi();
/*
iB本身沒有hi方法(構(gòu)造中沒有,自己也沒有定義過),
于是找iB.__proto__即a.prototype,仍然沒有發(fā)現(xiàn),
繼續(xù)查找a.prototype.__proto__即Object.prototype,哇,發(fā)現(xiàn)了hi,于是調(diào)用它,停止查找
輸出:hi Object
*/
a.hi();
/*
a本身沒有hi方法(構(gòu)造中沒有,自己也沒有定義過),
于是找a.__proto__既Function.prototype,哇,發(fā)現(xiàn)了hi,于是調(diào)用它,停止查找
輸出:hi Function
*/
iA.say();
/*
iA本身沒有say方法(構(gòu)造中沒有,自己也沒有定義過),
于是找iA.__proto__即A.prototype,哇,發(fā)現(xiàn)了say,于是調(diào)用它,停止查找
所以,這里調(diào)用的是A.prototype.say
輸出:A
*/
iB.say();
/*
iB本身沒有say方法(構(gòu)造中沒有,自己也沒有定義過),
于是找iB.__proto__即a.prototype,哇,發(fā)現(xiàn)了say,于是調(diào)用它,停止查找
所以,這里調(diào)用的是a.prototype.say
輸出:a
*/
iA.bad();
/*
iA本身沒有bad方法(構(gòu)造中沒有,自己也沒有定義過),
于是找iA.__proto__即A.prototype,也沒有找到,
于是再找A.prototype.__proto__即a.prototype,仍然沒有發(fā)現(xiàn),
繼續(xù)查找a.prototype.__proto__即Object.prototype,終于是找不到了,停止查找
返回錯誤,iA.bad不是一個function
*/
// --></mce:script>
</script>
感謝simon提出的修正意見!所有實(shí)例在查找屬性方法時不會去查找自己的prototype(實(shí)例的prototype不在原型鏈內(nèi),只能作為一個屬性)!
- javascript學(xué)習(xí)筆記(九)javascript中的原型(prototype)及原型鏈的繼承方式
- 深入理解JavaScript系列(6) 強(qiáng)大的原型和原型鏈
- javascript中的原型鏈深入理解
- JavaScript繼承基礎(chǔ)講解(原型鏈、借用構(gòu)造函數(shù)、混合模式、原型式繼承、寄生式繼承、寄生組合式繼承)
- 深入理解javascript原型鏈和繼承
- Javascript原型鏈和原型的一個誤區(qū)
- JavaScript中原型和原型鏈詳解
- 深入淺出理解javaScript原型鏈
- 淺談javascript原型鏈與繼承
- 理解javascript中的原型和原型鏈
相關(guān)文章
JavaScript將字符串轉(zhuǎn)換成字符編碼列表的方法
這篇文章主要介紹了JavaScript將字符串轉(zhuǎn)換成字符編碼列表的方法,實(shí)例分析了javascript中charCodeAt函數(shù)的使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03微信小程序動態(tài)添加和刪除組件的現(xiàn)實(shí)
這篇文章主要介紹了微信小程序動態(tài)添加和刪除組件的現(xiàn)實(shí),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02Javascript無參數(shù)和有參數(shù)類繼承問題解決方法
這篇文章主要介紹了Javascript無參數(shù)和有參數(shù)類繼承問題解決方法,本文講解了無參數(shù)類繼承的問題和有參類繼承的問題,并給出了解決方案,需要的朋友可以參考下2015-03-03javascript實(shí)現(xiàn)簡約的頁面右下角點(diǎn)擊彈出窗口示例【測試可用】
這篇文章主要介紹了javascript實(shí)現(xiàn)的頁面右下角點(diǎn)擊彈出窗口功能,結(jié)合實(shí)例形式詳細(xì)分析了javascript頁面右下角點(diǎn)擊彈出窗口功能的相關(guān)步驟、原理與注意事項(xiàng),需要的朋友可以參考下2023-07-07JavaScript給每一個li節(jié)點(diǎn)綁定點(diǎn)擊事件的實(shí)現(xiàn)方法
這篇文章主要介紹了JavaScript給每一個li節(jié)點(diǎn)綁定點(diǎn)擊事件的實(shí)現(xiàn)方法,包括js循環(huán)給li綁定參數(shù)不同的點(diǎn)擊事件,需要的朋友可以參考下2016-12-12動態(tài)顯示可輸入的字?jǐn)?shù)提示還可以輸入的字?jǐn)?shù)
這篇文章主要介紹了動態(tài)顯示可輸入的字?jǐn)?shù)提示還可以輸入的字?jǐn)?shù),需要的朋友可以參考下2014-04-04ES6基礎(chǔ)之解構(gòu)賦值(destructuring assignment)
這篇文章主要介紹了ES6基礎(chǔ)之解構(gòu)賦值(destructuring assignment),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2019-02-02javascript實(shí)現(xiàn)促銷倒計時+fixed固定在底部
一個不錯的示例使用javascript實(shí)現(xiàn)的促銷倒計時且同時擁有fixed固定在底部,而且兼容ie6,喜歡的朋友可以參考下2013-09-09