javascript - 为什么 "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 并传递函数时，附加事件的元素将自动绑定(bind)到给定函数。请参阅代码片段

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>