javascript Object與Function使用

來源:互聯網
上載者:User

如今的JavaScript再也不是以前被當做玩具的在網頁上啟動並執行花哨的指令碼了。JavaScript已經逐漸標準化,作為一門真正的程式設計語言廣泛地應用在Web開發上。因此,越來越多的人開始重新認識這門指令碼語言,並在不斷地探索關於JavaScript核心思想和實現原理,過程中遇到了一些非常混淆的問題。本文著重解釋一個比較常見但是非常容易使開發人員或者是初學JavaScript的人非常混淆的問題,那就是兩個核心建構函式Object和Function,他們之間到底有什麼關係?為何instanceof運算子的返回結果會讓你感到混淆?本文將為你一一道來。不過在這之前,我們需要先瞭解一些JavaScript中的概念和基本的運行機制。

JavaScript的對象體繫結構

其實在JavaScript語言中,整個核心的體繫結構都圍繞著兩個建構函式Object和Function來構建的。我將引用來自mollypages.org的一張JavaScript對象體繫結構圖來說明。

instanceof 運算子
instanceof是一個二元運算子,如:A instanceof B. 其中,A必須是一個合法的JavaScript對象,B必須是一個合法的JavaScript函數 (function). 判斷過程如下:
如果函數B在對象A的原型鏈 (prototype chain) 中被發現,那麼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)機制
這裡簡單概括一下,因為這個話題需要很大篇幅去討論,本文只是引用了這個概念,重點並非詳細討論該機制。
JavaScript中的原型(prototype)是和函數(function)緊密相連的,因為每個函數預設都會有一個屬性叫prototype, 每一個通過函數和new操作符產生的對象都具有一個屬性__proto__, 這個屬性儲存了建立它的建構函式的prototype屬性的引用。這個__proto__對象就是實現原型鏈的核心對象。JavaScript是一門物件導向的程式設計語言,它的繼承特性其實就是通過原型鏈機制來實現的。同時,instanceof運算子也需要在原型鏈的支援。我們舉例說明:

代碼 複製代碼 代碼如下:// 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

從上面的代碼來分析,我們不難得出這樣一個結論:任何對象的原型鏈最後都能追溯到Object.prototype. 這也就是我們為什麼說JavaScript中所有的對象都繼承自Object的原因了。

為何Object instanceof Function和Function instanceof Object都返回true?
Object, Function, Array等等這些都被稱作是構造“函數”,他們都是函數。而所有的函數都是建構函式Function的執行個體。從原型鏈機制的的角度來說,那就是說所有的函數都能通過原型鏈找到建立他們的Function建構函式的構造原型Function.protorype對象,所以:

alert(Object instanceof Function);// return true
與此同時,又因為Function.prototype是一個對象,所以他的建構函式是Object. 從原型鏈機制的的角度來說,那就是說所有的函數都能通過原型鏈找到建立他們的Object建構函式的構造原型Object.prototype對象,所以:

alert(Function instanceof Object);// return true
有趣的是根據我們通過原型鏈機制對instanceof進行的分析,我們不難得出一個結論:Function instanceof Function 依然返回true, 原理是一樣的
1. Function是建構函式,所以它是函數對象
2. 函數對象都是由Function建構函式建立而來的,原型鏈機制解釋為:函數對象的原型鏈中存在Function.prototype
3. instanceof尋找原型鏈中的每一個節點,如果Function.prototype的建構函式Function的原型鏈中被查到,返回true
因此下面代碼依然返回true

alert(Function instanceof Function);// still true

結論
1. 在JavaScript語言中,一切的一切都是對象,它們全部繼承自Object. 或者說所有對象的原型鏈的根節點都是Object.prototype
2. 理解原型鏈機制在JavaScript中式如何工作的是非常重要的。掌握了它,不管一個對象多麼複雜,你總能夠輕而易舉地將它攻破。

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.