Javascript this 關鍵字

Javascript 的 this 關鍵字老是指向當前被執行函數的全部者。

換句話說，若是當前函數能夠視爲某個對象的一個方法，那麼 this 就指向該對象。

例若有這麼一個函數 doSomething()：

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

若是 doSomething() 定義全局上下文中，那麼 this 指向的就是全局變量 window。可是 window 沒有 style 屬性，因此在全局環境中執行該函數將提示錯誤。所以使用 this 關鍵字須要特別注意函數的全部者。

複製

在 JS 的事件處理中，咱們要實現 this 關鍵字正確指向某個頁面元素，則必須將函數複製該元素的某個屬性上，例如 onclick 屬性。

element.onclick = doSomething;

以上代碼演示了函數被完整地複製到了 onclick 屬性，所以當執行 doSomething 函數時，對應的 element 元素的顏色將發生改變。

引用

當你使用內聯事件註冊時。

<element onclick="doSomething()">

你沒有複製函數，你只是引用了該函數，它們之間的區別十分重要，由於 onclick 屬性沒有包含任何真正的函數代碼，而僅僅是一次函數調用。

它的意思是跳轉到 doSomething() 函數並執行它，所以當代碼執行到 doSomething() 時，this 實際上是指向 window 這個全局對象。

區別

若是你想在事件處理中正確使用 this 訪問 HTML 元素，你必須保證 this 關鍵字真正寫入到了 onclick 屬性。若是 this 關鍵字正確寫入到了 onclick 屬性，那麼你輸入：

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 = doSomething
element.addEventListenser('click', doSomething, false)
element.onclick = function() {this.style.color = '#cc0000'; }
<element onclick="this.style.color = '#cc0000';">

示例 - 引用

如下狀況 this 引用到 window：

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

混合

若是想在內聯事件註冊中使用 this，能夠按如下方法實現：

<element onclick="doSomething(this)">

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

Ref:

• The this keyword
• Understand Javascripts this with clarity and master it