PPK 談 JavaScript 的 this 關鍵字 [翻譯]

來源:互聯網
上載者:User
文章目錄
  • 例子-拷貝
  • 例子-指向
  • 結合

下面先講如何在event handling(事件處理)中用它,再接著是講 this 的其他用法。
自己本身

先來看看函數 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  ||     -----------------------            ||                            |----------------------------------------------------------

每次函數被調用,this 指向當前所處理的事件的那個 HTML 元素(“自己本身” doSomething() 的拷貝)。

指向(referring)

要是用 行內事件註冊呢?

<element onclick="doSomething()">

這裡沒有拷貝函數,而是指向它,有什麼不一樣呢? 這個 onclick 屬性沒有包含實際函數,而只是一個函數調用。

doSomething();

上面的意思是:“到 doSomething() 那裡去執行它”。在doSomething()裡面,this 關鍵字再次指向全域 window 對象,那麼函數會返回錯誤的訊息。

------------ window --------------------------------------|                     / \      ||                      |      ||                     this     ||  ----------------            |      ||  | HTML element | <-- this     ----------------- ||  ----------------   |      | doSomething() | ||        |     |      ----------------- ||     -----------------------     / \      ||     | go to doSomething() |     |      ||     | and execute it   | ---- reference to   ||     -----------------------    function    ||                            |----------------------------------------------------------
不一樣?

如果是用 this 去訪問 HTML 元素來處理事件的話,那麼必須肯定它實際是寫入了 onclick 屬性中。而它指向 HTML 元素的事件處理就算登入。如果這麼做:

element.onclick = doSomething;alert(element.onclick)

得到的是

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

可以看到,this 關鍵字在 onclick 方法中。它指向 HTML 元素。

但是如果這麼做:

<element onclick="doSomething()">alert(element.onclick)

得到的是

function onclick(){doSomething()}

這裡只是指向函數 doSomething()。this 關鍵字不在 onclick 方法中。它沒有指向 HTML 元素。

例子-拷貝

在下面樣本中,this 寫入 onclick 方法中:

element.onclick = function () {doSomething()}element.attachEvent('onclick',doSomething)<element onclick="doSomething()">
例子-指向

在下面樣本中,this 指向 window:

element.onclick = function () {doSomething()}element.attachEvent('onclick',doSomething)<element onclick="doSomething()">

要注意上面的 attachEvent。它的缺點是微軟事件註冊模型,它建立了指向該函數,而且沒有拷貝它。所以有時不可能弄清楚 HTML 當前的處理事件是哪個。

結合

使用行內事件註冊時,也可以把 this 發送到函數。所以可以這麼用:

<element onclick="doSomething(this)"> function doSomething(obj) {// this is present in the event handler and is sent to the function// obj now refers to the HTML element, so we can doobj.style.color = '#cc0000';}
相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在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.