Question

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

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

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

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

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

Answer 1

这是因为您正在使用箭头功能。箭头函数没有自己的this。使用正常功能将起作用。根据{{3}}

箭头函数表达式在语法上比常规函数表达式更紧凑，尽管并没有自己绑定到this

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

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

第二，当您使用addEventListener并传递函数时，附加了事件的元素会自动绑定到给定的函数。请参见代码段

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”不等于调用该函数的对象？

1 个答案: