JavaScript中的this

最簡單的解釋

this就是function.prototype.call()的第一個參數

第一個參數是什么

三種方法來確定call()的第一個參數
1.直接在控制臺打出console.log(this)
2.查看查看源代碼。
3.查看API文檔

通常我們通過查看文檔來理解,實際寫代碼中可以使用第一種方法來判斷
比如jQuery的.on()的文檔說明

當jQuery的調用處理程序時,this關鍵字指向的是當前正在執行事件的元素。對于直接事件而言,this 代表綁定事件的元素。對于代理事件而言,this 則代表了與 selector 相匹配的元素。(注意,如果事件是從后代元素冒泡上來的話,那么 this 就有可能不等于 event.target。)若要使用 jQuery 的相關方法,可以根據當前元素創建一個 jQuery 對象,即使用 $(this)。

再比如MDN關于this的一段文檔

DOM事件處理函數中的 this

當函數被用作事件處理函數時,它的this指向觸發事件的元素

分割線

This在箭頭函數中的應用

箭頭函數不使用this的四種標準規則,而是根據外層(函數或者全局)作用域來決定this。

我們來看一下箭頭函數的詞法作用域:

function foo() {
    // 返回一個箭頭函數
    return (a) => {
        // this繼承自foo()
        console.log(this.a)
    };
}

var obj1 = {
    a: 2
};

var obj2 = {
    a: 3
};

var bar = foo.call(obj1);
bar.call(obj2); // 2, 不是3!

foo()內部創建的箭頭函數會捕獲調用時foo()的this。由于foo()的this綁定到obj1,bar(引用箭頭函數)的this也會綁定到obj1,箭頭函數的綁定無法被修改。(new也不行!)

總結

如果要判斷一個運行中的函數的this綁定,就需要找到這個函數的直接調用位置。找到之后就可以順序應用下面這四條規則來判斷this的綁定對象。

  1. 由new調用?綁定到新創建的對象。
  2. 由call或者apply(或者bind)調用?綁定到指定的對象。
  3. 由上下文對象調用?綁定到那個上下文對象。
  4. 默認:在嚴格模式下綁定到undefined,否則綁定到全局對象。

--

參考資料
http://www.jquery123.com/on/
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/this#DOM事件處理函數中的_this

http://www.codeceo.com/article/about-javascript-this.html

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容