理解Javascript_10_對象模型
更新時間:2010年10月16日 00:06:20 作者:
什么都不想說,一段代碼兩張圖,解釋一切。注:在此之前請閱讀前面的系列博文
對象模型

紅色虛線表示隱式Prototype鏈。
這張對象模型圖中包含了太多東西,不少地方需要仔細體會,可以寫些測試代碼進行驗證。徹底理解了這張圖,對JavaScript語言的了解也就差不多了。下面是一些補充說明:
1. 圖中有好幾個地方提到build-in Function constructor,這是同一個對象,可以測試驗證:
//Passed in FF2.0, IE7, Opera9.25, Safari3.0.4
Function==Function.constructor //result: true
Function==Function.prototype.constructor //result: true
Function==Object.constructor //result: true
//Function also equals to Number.constructor, String.constructor, Array.constructor, RegExp.constructor, etc.
function fn(){}
Function==fn.constructor //result: true
這說明了幾個問題: Function指向系統(tǒng)內(nèi)置的函數(shù)構(gòu)造器(build-in Function constructor);Function具有自舉性;系統(tǒng)中所有函數(shù)都是由Function構(gòu)造。
2. 左下角的obj1, obj2...objn范指用類似這樣的代碼創(chuàng)建的對象: function fn1(){}; var obj1=new fn1();這些對象沒有本地constructor方法,但它們將從Prototype鏈上得到一個繼承的constructor方法,即fn.prototype.constructor,從函數(shù)對象的構(gòu)造過程可以知道,它就是fn本身了。
3.右下角的obj1, obj2...objn范指用類似這樣的代碼創(chuàng)建的對象: var obj1=new Object();或var obj1={};或var obj1=new Number(123);或obj1=/\w+/;等等。所以這些對象Prototype鏈的指向、從Prototype鏈繼承而來的 constructor的值(指它們的constructor是build-in Number constructor還是build-in Object constructor等)等依賴于具體的對象類型。另外注意的是,var obj=new Object(123);這樣創(chuàng)建的對象,它的類型仍然是Number,即同樣需要根據(jù)參數(shù)值的類型來確定。同樣它們也沒有本地constructor,而是從Prototype鏈上獲得繼承的constructor方法,即build-in *** constructor,具體是哪一個由數(shù)據(jù)類型確定。
示例代碼
//自定義對象代表,對應(yīng)Javascript Object Model中的use defined functions
function Foo(){}
//自定義對象創(chuàng)建的對象實例的代表,對應(yīng)Javascript Object Model中的objects that created by user defined functions
var foo = new Foo();
//String內(nèi)置函數(shù)代表
//str為內(nèi)置函數(shù)創(chuàng)建的對象實例的代表,對應(yīng)Javascript Object Model中的objects that created by build-in constructors
var str = new String("string");
內(nèi)存展現(xiàn)

你會發(fā)現(xiàn),它和《理解Javascript_09_Function與Object》中的內(nèi)存分析圖是一樣的,為什么呢?在《數(shù)據(jù)模型》中提到過,內(nèi)置對象都可以看作是函數(shù)的派生類型,例如Number instanceof Function為true,Number instanceof Object為true。在這個意義上,可以將它們跟用戶定義的函數(shù)等同看待。所以內(nèi)置對象和自定義對象的創(chuàng)建流程是一樣的。
在篇博文是在理解了《Function與Object》的基礎(chǔ)上寫的,因此要理解本文必須理解Function與Object的關(guān)系!
最后寫一點感言:令人發(fā)狂的理論!

紅色虛線表示隱式Prototype鏈。
這張對象模型圖中包含了太多東西,不少地方需要仔細體會,可以寫些測試代碼進行驗證。徹底理解了這張圖,對JavaScript語言的了解也就差不多了。下面是一些補充說明:
1. 圖中有好幾個地方提到build-in Function constructor,這是同一個對象,可以測試驗證:
復(fù)制代碼 代碼如下:
//Passed in FF2.0, IE7, Opera9.25, Safari3.0.4
Function==Function.constructor //result: true
Function==Function.prototype.constructor //result: true
Function==Object.constructor //result: true
//Function also equals to Number.constructor, String.constructor, Array.constructor, RegExp.constructor, etc.
function fn(){}
Function==fn.constructor //result: true
這說明了幾個問題: Function指向系統(tǒng)內(nèi)置的函數(shù)構(gòu)造器(build-in Function constructor);Function具有自舉性;系統(tǒng)中所有函數(shù)都是由Function構(gòu)造。
2. 左下角的obj1, obj2...objn范指用類似這樣的代碼創(chuàng)建的對象: function fn1(){}; var obj1=new fn1();這些對象沒有本地constructor方法,但它們將從Prototype鏈上得到一個繼承的constructor方法,即fn.prototype.constructor,從函數(shù)對象的構(gòu)造過程可以知道,它就是fn本身了。
3.右下角的obj1, obj2...objn范指用類似這樣的代碼創(chuàng)建的對象: var obj1=new Object();或var obj1={};或var obj1=new Number(123);或obj1=/\w+/;等等。所以這些對象Prototype鏈的指向、從Prototype鏈繼承而來的 constructor的值(指它們的constructor是build-in Number constructor還是build-in Object constructor等)等依賴于具體的對象類型。另外注意的是,var obj=new Object(123);這樣創(chuàng)建的對象,它的類型仍然是Number,即同樣需要根據(jù)參數(shù)值的類型來確定。同樣它們也沒有本地constructor,而是從Prototype鏈上獲得繼承的constructor方法,即build-in *** constructor,具體是哪一個由數(shù)據(jù)類型確定。
示例代碼
復(fù)制代碼 代碼如下:
//自定義對象代表,對應(yīng)Javascript Object Model中的use defined functions
function Foo(){}
//自定義對象創(chuàng)建的對象實例的代表,對應(yīng)Javascript Object Model中的objects that created by user defined functions
var foo = new Foo();
//String內(nèi)置函數(shù)代表
//str為內(nèi)置函數(shù)創(chuàng)建的對象實例的代表,對應(yīng)Javascript Object Model中的objects that created by build-in constructors
var str = new String("string");
內(nèi)存展現(xiàn)

你會發(fā)現(xiàn),它和《理解Javascript_09_Function與Object》中的內(nèi)存分析圖是一樣的,為什么呢?在《數(shù)據(jù)模型》中提到過,內(nèi)置對象都可以看作是函數(shù)的派生類型,例如Number instanceof Function為true,Number instanceof Object為true。在這個意義上,可以將它們跟用戶定義的函數(shù)等同看待。所以內(nèi)置對象和自定義對象的創(chuàng)建流程是一樣的。
在篇博文是在理解了《Function與Object》的基礎(chǔ)上寫的,因此要理解本文必須理解Function與Object的關(guān)系!
最后寫一點感言:令人發(fā)狂的理論!
您可能感興趣的文章:
相關(guān)文章
javascript中的數(shù)據(jù)類型檢測方法詳解
這篇文章主要介紹了javascript中的數(shù)據(jù)類型檢測方法,結(jié)合實例形式分析了javascript數(shù)據(jù)類型并總結(jié)分析了常見的數(shù)據(jù)類型檢測操作技巧,需要的朋友可以參考下2019-08-08淺談Javascript中的函數(shù)、this以及原型
下面小編就為大家?guī)硪黄獪\談Javascript中的函數(shù)、this以及原型。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-10-10BootStrap實現(xiàn)響應(yīng)式布局導(dǎo)航欄折疊隱藏效果(在小屏幕、手機屏幕瀏覽時自動折疊隱藏)
這篇文章主要介紹了BootStrap實現(xiàn)導(dǎo)航欄的響應(yīng)式布局,當在小屏幕、手機屏幕瀏覽時自動折疊隱藏的效果,非常不錯,具有參考借鑒價值,對bootstrap 響應(yīng)式布局導(dǎo)航欄功能感興趣的朋友一起學(xué)習(xí)吧2016-11-11javascript操作cookie的文章(設(shè)置,刪除cookies)
一篇javascript處理cookie的文章,腳本之家之前發(fā)布過很多這樣的文章。2010-04-04Javascript aop(面向切面編程)之a(chǎn)round(環(huán)繞)分析
這篇文章主要介紹了Javascript aop(面向切面編程)之a(chǎn)round(環(huán)繞) ,需要的朋友可以參考下2015-05-05使用Require.js封裝原生js輪播圖的實現(xiàn)代碼
這篇文章主要介紹了使用Require.js封裝原生js輪播圖的實現(xiàn)代碼,需要的朋友可以參考下2017-06-06js字符串截取函數(shù)slice、substring和substr的比較
這篇文章主要震碎js字符串截取函數(shù)slice、substring和substr進行比較,感興趣的小伙伴們可以參考一下2016-05-05