當前位置:才華齋>設計>網頁設計>

對javascript的理解

網頁設計 閱讀(2.8W)

物件模型

對javascript的理解

紅色虛線表示隱式Prototype鏈。

這張物件模型圖中包含了太多東西,不少地方需要仔細體會,可以寫些測試程式碼進行驗證。徹底理解了這張圖,對JavaScript語言的瞭解也就差不多了。下面是一些補充說明:

1. 圖中有好幾個地方提到build-in Function constructor,這是同一個物件,可以測試驗證:

複製程式碼 程式碼如下:

//Passed in FF2.0, IE7, Opera9.25, Safari3.0.4

Function==tructor //result: true

Function==tructor //result: true

Function==tructor //result: true

//Function also equals to tructor, tructor, tructor, tructor, etc.

function fn(){}

Function==tructor //result: true

這說明了幾個問題: Function指向系統內建的函式構造器(build-in Function constructor);Function具有自舉性;系統中所有函式都是由Function構造。

2. 左下角的obj1, 範指用類似這樣的程式碼建立的物件: function fn1(){}; var obj1=new fn1();這些物件沒有本地constructor方法,但它們將從Prototype鏈上得到一個繼承的constructor方法,即tructor,從函式物件的構造過程可以知道,它就是fn本身了。

3.右下角的obj1, 範指用類似這樣的程式碼建立的物件: 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);這樣建立的物件,它的型別仍然是Number,即同樣需要根據引數值的型別來確定。同樣它們也沒有本地constructor,而是從Prototype鏈上獲得繼承的constructor方法,即build-in *** constructor,具體是哪一個由資料型別確定。

示例程式碼

複製程式碼 程式碼如下:

//自定義物件代表,對應Javascript Object Model中的use defined functions

function Foo(){}

//自定義物件建立的物件例項的代表,對應Javascript Object Model中的objects that created by user defined functions

var foo = new Foo();

//String內建函式代表

//str為內建函式建立的物件例項的代表,對應Javascript Object Model中的objects that created by build-in constructors

var str = new String("string");

記憶體展現

你會發現,它和《理解Javascript_09_Function與Object》中的記憶體分析圖是一樣的,為什麼呢?在《資料模型》中提到過,內建物件都可以看作是函式的派生型別,例如Number instanceof Function為true,Number instanceof Object為true。在這個意義上,可以將它們跟使用者定義的函式等同看待。所以內建物件和自定義物件的建立流程是一樣的。

在理解了《Function與Object》的基礎上寫的,因此要理解本文必須理解Function與Object的關係!