自己本身

先來看看函數 doSomething() 里的 this 到底是指向(refer to)了什么？

function doSomething() {  this.style.color = '#cc0000';}

JavaScript的 this 總指向所運行的函數“自己本身”。也就是說，它是一種指向函數對象的方法。在頁面中定義 doSomething() 函數，自己本身是指頁面。也就是說，是指 JavaScript 的 window 對象(全局對象)。而 onclick 屬性它自己本身是屬 HTML 元素所有。

這個“所有權”是 JavaScript 的 OO(面向對象)特性的后果。在 把對象作關聯數組 頁面中有更多信息。

------------ window --------------------------------------|                     / /      ||                      |      ||                     this     ||  ----------------            |      ||  | HTML element | <-- this     ----------------- ||  ----------------   |      | doSomething() | ||        |     |      ----------------- ||     --------------------             ||     | onclick property |             ||     --------------------             ||                            |----------------------------------------------------------

如果 doSomething() 運行時沒有任何與之預留相關的話，關鍵字 this 指向 window(窗口) ，該函數將會改動 window 的 style.color。而 window 沒有 style 這樣的對象，所以該函數會引發 JavaScript 的錯誤。

拷貝(copying)

因此，用好 this 有些難度。像在函數中使用的上面例子的這種情況，它應該指向 HTML 元素“自己本身”。換個說法是，有個函數拷貝指向 onclick 屬性。 我們來看看在傳統事件注冊中的情況。

element.onclick = doSomething;

因為函數拷貝全指向了 onclick 屬性(現在變成了方法)，所以在事件處理執行時，this 指向 HTML 元素并將 color 改動。

------------ window --------------------------------------|                            ||                            ||                            ||  ----------------                   ||  | HTML element | <-- this     ----------------- ||  ----------------   |      | doSomething() | ||        |     |      ----------------- ||     -----------------------     |      ||     |copy of doSomething()| <-- copy function  ||     -----------------------            ||                            |----------------------------------------------------------

這可以讓我們為多個事件處理給它函數拷貝。每次 this 將指向正確的 HTML 元素：

------------ window --------------------------------------|                            ||                            ||                            ||  ----------------                   ||  | HTML element | <-- this     ----------------- ||  ----------------   |      | doSomething() | ||        |     |      ----------------- ||     -----------------------     |      ||     |copy of doSomething()| <-- copy function  ||     -----------------------     |      ||                      |      ||  -----------------------         |      ||  | another HTML element| <-- this    |      ||  -----------------------   |      |      ||        |        |      |      ||     -----------------------     |      ||     |copy of doSomething()| <-- copy function  ||     -----------------------            ||                            |----------------------------------------------------------