理解Javascript_09_Function與Object
更新時間：2010年10月16日 00:02:31 作者：
在《理解Javascript_08_函數(shù)對象》中講解了很多函數(shù)對象的問題，同時也留下了許多疑問，今天讓我們來解答部分問題。
注：理論過于深入，本人不改保證所有的理論都是正確的，但經(jīng)過多方測試還未發(fā)現(xiàn)實際代碼與理論沖突的問題。如有錯誤，望高人指點！
Function
首先回顧一下函數(shù)對象的概念，函數(shù)就是對象,代表函數(shù)的對象就是函數(shù)對象。所有的函數(shù)對象是被Function這個函數(shù)對象構造出來的。也就是說，F(xiàn)unction是最頂層的構造器。它構造了系統(tǒng)中所有的對象，包括用戶自定義對象，系統(tǒng)內置對象，甚至包括它自已。這也表明Function具有自舉性(自已構造自己的能力)。這也間接決定了Function的[[call]]和[[constructor]]邏輯相同。
function Foo() {};
var foo = new Foo();
//Foo為foo的構造函數(shù)
alert(foo instanceof Foo); // true
//但是Function并不是foo的構造函數(shù)
alert(foo instanceof Function); // false
//Function為Foo的構造函數(shù)
alert(Foo instanceof Function);//true
上面的代碼解釋了foo和其構造函數(shù)Foo和Foo的構造函數(shù)Function的關系。(具體原理請參見Function與Object的內存關系圖)
Object
對于Object它是最頂層的對象，所有的對象都將繼承Object的原型，但是你也要明確的知道Object也是一個函數(shù)對象，所以說Object是被Function構造出來的。（關于Object并沒有太多的理論）
Function與Object
這是本文的重點，非常重要！
alert(Function instanceof Function);//true
alert(Function instanceof Object);//true
alert(Object instanceof Function);//true
function Foo() {};
var foo = new Foo();
alert(foo instanceof Foo); // true
alert(foo instanceof Function); // false
alert(foo instanceof Object); // true
alert(Foo instanceof Function); // true
alert(Foo instanceof Object); // true
你能理解這些答案嗎？那恭喜你，Javascript語言的本質你已經(jīng)理解了。
那么讓我們來看一下Object與Function實際的關系吧：
在你看圖之前，請先閱讀函數(shù)對象與instanceof原理兩篇文章，要不然內存圖很難理解。
在這，我對內存圖做一點說明：在函數(shù)對象一文中提到了函數(shù)對象的構造過程，在本文中提到Function為自舉性的，所以說函數(shù)對象Foo的構造過程和函數(shù)對象Function的構造過程是一樣的。所以在圖中給于高亮顯示，我用'|'來分隔來表示它們的構造過程相同。根據(jù)instanceof的理論，和內存圖，可以將上面的語句都推導出正確的結果。在此我們不一一講述了，讀者自已體會吧。
如果你不能理解這張復雜的內存圖的話，可以看下面的說明圖來幫助理解：
注：代碼的實際執(zhí)行流程并不完全像這張圖上描述的那樣，也就是說這張圖是有問題的(可以說是錯誤的),它無法解釋為什么Function instanceof Function 為true。 但是它易于理解Function與Object的關系。
Function
首先回顧一下函數(shù)對象的概念，函數(shù)就是對象,代表函數(shù)的對象就是函數(shù)對象。所有的函數(shù)對象是被Function這個函數(shù)對象構造出來的。也就是說，F(xiàn)unction是最頂層的構造器。它構造了系統(tǒng)中所有的對象，包括用戶自定義對象，系統(tǒng)內置對象，甚至包括它自已。這也表明Function具有自舉性(自已構造自己的能力)。這也間接決定了Function的[[call]]和[[constructor]]邏輯相同。
復制代碼 代碼如下:
function Foo() {};
var foo = new Foo();
//Foo為foo的構造函數(shù)
alert(foo instanceof Foo); // true
//但是Function并不是foo的構造函數(shù)
alert(foo instanceof Function); // false
//Function為Foo的構造函數(shù)
alert(Foo instanceof Function);//true
上面的代碼解釋了foo和其構造函數(shù)Foo和Foo的構造函數(shù)Function的關系。(具體原理請參見Function與Object的內存關系圖)
Object
對于Object它是最頂層的對象，所有的對象都將繼承Object的原型，但是你也要明確的知道Object也是一個函數(shù)對象，所以說Object是被Function構造出來的。（關于Object并沒有太多的理論）
Function與Object
這是本文的重點，非常重要！
復制代碼 代碼如下:
alert(Function instanceof Function);//true
alert(Function instanceof Object);//true
alert(Object instanceof Function);//true
function Foo() {};
var foo = new Foo();
alert(foo instanceof Foo); // true
alert(foo instanceof Function); // false
alert(foo instanceof Object); // true
alert(Foo instanceof Function); // true
alert(Foo instanceof Object); // true
你能理解這些答案嗎？那恭喜你，Javascript語言的本質你已經(jīng)理解了。
那么讓我們來看一下Object與Function實際的關系吧：
在你看圖之前，請先閱讀函數(shù)對象與instanceof原理兩篇文章，要不然內存圖很難理解。
在這，我對內存圖做一點說明：在函數(shù)對象一文中提到了函數(shù)對象的構造過程，在本文中提到Function為自舉性的，所以說函數(shù)對象Foo的構造過程和函數(shù)對象Function的構造過程是一樣的。所以在圖中給于高亮顯示，我用'|'來分隔來表示它們的構造過程相同。根據(jù)instanceof的理論，和內存圖，可以將上面的語句都推導出正確的結果。在此我們不一一講述了，讀者自已體會吧。
如果你不能理解這張復雜的內存圖的話，可以看下面的說明圖來幫助理解：
注：代碼的實際執(zhí)行流程并不完全像這張圖上描述的那樣，也就是說這張圖是有問題的(可以說是錯誤的),它無法解釋為什么Function instanceof Function 為true。 但是它易于理解Function與Object的關系。
相關文章
Day.js是一個輕量的處理時間和日期的JavaScript庫,和Moment.js的API設計保持完全一樣,這篇文章主要給大家介紹了關于js如何快速處理日期以及手寫Day.js的相關資料,需要的朋友可以參考下2024-06-06
jqgrid并沒有自帶導出表格數(shù)據(jù)的方法，這里就自己實現(xiàn)了一個，嘗試過在頁面直接將數(shù)據(jù)導出，發(fā)現(xiàn)只有IE下可以通過調用saveas來實現(xiàn)，但是別的瀏覽器不支持，于是考慮將數(shù)據(jù)傳回后臺，然后后臺返回下載文件來實現(xiàn)2013-11-11
這篇文章主要為大家詳細介紹了js實現(xiàn)上傳并壓縮圖片的相關代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-01-01
這篇文章主要為大家詳細介紹了js實現(xiàn)倒計時效果及時間對象,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-11-11
這篇文章主要為大家詳細介紹了微信小程序實現(xiàn)彈出菜單動畫，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-06-06
一個html5播放視頻的video控件只支持android的默認格式mp4和3gp
寫了個html5播放視頻的video控件，只支持mp4和3gp(android和ios默認支持的格式就寫了這個) ,需要的朋友可以參考下2014-05-05
這篇文章主要為大家詳細介紹了JS實現(xiàn)手風琴特效，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-11-11
JavaScript實現(xiàn)父子dom同時綁定兩個點擊事件,一個用捕獲,一個用冒泡時執(zhí)行順序的方法
這篇文章主要介紹了JavaScript實現(xiàn)父子dom同時綁定兩個點擊事件,一個用捕獲,一個用冒泡時執(zhí)行順序的方法,涉及javascript事件的觸發(fā)與執(zhí)行原理及相關操作技巧,需要的朋友可以參考下2017-03-03
'eval'函數(shù)是javascript中的一個內置函數(shù),它的主要作用是將傳入的字符串作為代碼來執(zhí)行,這篇文章主要介紹了為什么js中不推薦使用eval函數(shù),需要的朋友可以參考下2023-10-10
JavaScript 驗證碼的實例代碼(附效果圖)，需要的朋友可以參考一下2013-03-03