为什么 "this" 不等于调用该函数的对象？

Question

我有一个附加到 dom 对象的函数。我希望能够从函数中引用 dom 对象，但是当我从事件中调用它时，this 不等于正确的东西。

var main = document.getElementById('main');

main.testFunction = () => {
  console.log('this',this);
}

main.addEventListener('click', main.testFunction);

相反，它等于 window。为什么是这样？如何引用该方法所属的对象？

Answer 1

这是因为您使用了箭头函数。箭头函数没有自己的this。使用正常功能它会工作。根据MDN

An arrow function expression is a syntactically compact alternative to a regular function expression, although without its own bindings to the this

var main = document.getElementById('main');
main.testFunction = function() {
  console.log('this',this);
}
main.addEventListener('click', main.testFunction);

<button id="main"> main</button>

其次，当您使用 addEventListener 并传递函数时，附加事件的元素会自动绑定到给定的 function.See 代码段

var main = document.getElementById('main');
function testFunction(){
  console.log('this',this);
}
main.addEventListener('click', testFunction);

<button id="main"> main</button>

如果要访问箭头函数中的元素，请使用 event.target 而不是 this

var main = document.getElementById('main');
main.testFunction = (e) => {
  console.log('this',e.target);
}
main.addEventListener('click', main.testFunction);

<button id="main"> main</button>

为什么 "this" 不等于调用该函数的对象？

Why isn't "this" equal to the object that called the function?

javascript

methods

events

window

object