最簡單的解釋
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的綁定對象。
- 由new調用?綁定到新創建的對象。
- 由call或者apply(或者bind)調用?綁定到指定的對象。
- 由上下文對象調用?綁定到那個上下文對象。
- 默認:在嚴格模式下綁定到undefined,否則綁定到全局對象。
--
參考資料
http://www.jquery123.com/on/
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/this#DOM事件處理函數中的_this