快捷導(dǎo)航

javascript Object與Function使用

更新時(shí)間：2010年01月11日 21:18:31 作者：

Object instanceof Function 還是 Function instance of Object，是真是假，一一道來

如今的JavaScript再也不是以前被當(dāng)做玩具的在網(wǎng)頁上運(yùn)行的花哨的腳本了。JavaScript已經(jīng)逐漸標(biāo)準(zhǔn)化，作為一門真正的編程語言廣泛地應(yīng)用在Web開發(fā)上。因此，越來越多的人開始重新認(rèn)識這門腳本語言，并在不斷地探索關(guān)于JavaScript核心思想和實(shí)現(xiàn)原理，過程中遇到了一些非?；煜膯栴}。本文著重解釋一個(gè)比較常見但是非常容易使開發(fā)人員或者是初學(xué)JavaScript的人非?；煜膯栴}，那就是兩個(gè)核心構(gòu)造函數(shù)Object和Function，他們之間到底有什么關(guān)系？為何instanceof運(yùn)算符的返回結(jié)果會讓你感到混淆？本文將為你一一道來。不過在這之前，我們需要先了解一些JavaScript中的概念和基本的運(yùn)行機(jī)制。

JavaScript的對象體系結(jié)構(gòu)

其實(shí)在JavaScript語言中，整個(gè)核心的體系結(jié)構(gòu)都圍繞著兩個(gè)構(gòu)造函數(shù)Object和Function來構(gòu)建的。我將引用來自mollypages.org的一張JavaScript對象體系結(jié)構(gòu)圖來說明。

instanceof 運(yùn)算符
instanceof是一個(gè)二元運(yùn)算符，如：A instanceof B. 其中，A必須是一個(gè)合法的JavaScript對象，B必須是一個(gè)合法的JavaScript函數(shù) (function). 判斷過程如下：
如果函數(shù)B在對象A的原型鏈 (prototype chain) 中被發(fā)現(xiàn)，那么instanceof操作符將返回true，否則返回false.
例如下面的代碼會返回true.

// return true if specified function is found// in the object's prototype chain as a constructor.alert({} instanceof Object);

JavaScript中的原型鏈(prototype chain)機(jī)制
這里簡單概括一下，因?yàn)檫@個(gè)話題需要很大篇幅去討論，本文只是引用了這個(gè)概念，重點(diǎn)并非詳細(xì)討論該機(jī)制。
JavaScript中的原型(prototype)是和函數(shù)(function)緊密相連的，因?yàn)槊總€(gè)函數(shù)默認(rèn)都會有一個(gè)屬性叫prototype, 每一個(gè)通過函數(shù)和new操作符生成的對象都具有一個(gè)屬性__proto__, 這個(gè)屬性保存了創(chuàng)建它的構(gòu)造函數(shù)的prototype屬性的引用。這個(gè)__proto__對象就是實(shí)現(xiàn)原型鏈的核心對象。JavaScript是一門面向?qū)ο蟮木幊陶Z言，它的繼承特性其實(shí)就是通過原型鏈機(jī)制來實(shí)現(xiàn)的。同時(shí)，instanceof運(yùn)算符也需要在原型鏈的支持。我們舉例說明：

代碼

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

 
// create a custom constructor Foo 
function Foo() { 
} 
// create an insatnce of Foo 
var foo = new Foo(); 

// foo is an instance of Foo 
alert(foo instanceof Foo);// true 
// foo is also an instance of Object because 
// Foo.prototype is an instance of Object. 
// the interpreter will find the constructor 
// through the prototype chain. 
alert(foo instanceof Object);// true 

// Prototype chain of the object foo 
// 
// __proto__ __proto__ __proto__ 
// foo -----------> Foo.prototype -----------> Object.prototype -----------> null 

// But foo is not an instance of Function, because 
// we could not find Function.prototype in foo's 
// prototype chain. 
alert(foo instanceof Function);// false 

// However, its constructor Foo is an instance of 
// Function. 
alert(Foo instanceof Function);// true 
// it's also an instance of Object 
alert(Foo instanceof Object);// true 

// Prototype chain of the constructor Foo 
// 
// __proto__ __proto__ __proto__ 
// Foo -----------> Function.prototype -----------> Object.prototype -----------> null 

從上面的代碼來分析，我們不難得出這樣一個(gè)結(jié)論：任何對象的原型鏈最后都能追溯到Object.prototype. 這也就是我們?yōu)槭裁凑fJavaScript中所有的對象都繼承自O(shè)bject的原因了。

為何Object instanceof Function和Function instanceof Object都返回true？
Object, Function, Array等等這些都被稱作是構(gòu)造“函數(shù)”，他們都是函數(shù)。而所有的函數(shù)都是構(gòu)造函數(shù)Function的實(shí)例。從原型鏈機(jī)制的的角度來說，那就是說所有的函數(shù)都能通過原型鏈找到創(chuàng)建他們的Function構(gòu)造函數(shù)的構(gòu)造原型Function.protorype對象，所以：

alert(Object instanceof Function);// return true
與此同時(shí)，又因?yàn)镕unction.prototype是一個(gè)對象，所以他的構(gòu)造函數(shù)是Object. 從原型鏈機(jī)制的的角度來說，那就是說所有的函數(shù)都能通過原型鏈找到創(chuàng)建他們的Object構(gòu)造函數(shù)的構(gòu)造原型Object.prototype對象，所以：

alert(Function instanceof Object);// return true
有趣的是根據(jù)我們通過原型鏈機(jī)制對instanceof進(jìn)行的分析，我們不難得出一個(gè)結(jié)論：Function instanceof Function 依然返回true, 原理是一樣的
1. Function是構(gòu)造函數(shù)，所以它是函數(shù)對象
2. 函數(shù)對象都是由Function構(gòu)造函數(shù)創(chuàng)建而來的，原型鏈機(jī)制解釋為：函數(shù)對象的原型鏈中存在Function.prototype
3. instanceof查找原型鏈中的每一個(gè)節(jié)點(diǎn)，如果Function.prototype的構(gòu)造函數(shù)Function的原型鏈中被查到，返回true
因此下面代碼依然返回true

alert(Function instanceof Function);// still true

結(jié)論
1. 在JavaScript語言中，一切的一切都是對象，它們?nèi)坷^承自O(shè)bject. 或者說所有對象的原型鏈的根節(jié)點(diǎn)都是Object.prototype
2. 理解原型鏈機(jī)制在JavaScript中式如何工作的是非常重要的。掌握了它，不管一個(gè)對象多么復(fù)雜，你總能夠輕而易舉地將它攻破。

您可能感興趣的文章: