无法将此绑定到功能答案

【问题标题】：can't bind this to function无法将此绑定到功能
【发布时间】：2021-09-20 17:39:28
【问题描述】：

我有一个 DOM 元素 btn 并且有 setTimeout 的函数来监听这个元素。我想在函数运行时删除我的监听器，以防止多次调用 setTimeout 和时间重叠，但是在我的回调函数中是 window?我尝试使用绑定，但它不起作用

const checkTable = () => {
  this.removeEventListener('click', checkTable);
  console.log(this); // i get "window"
  setTimeout(() => {
     //some code
  }, 3000);
};

const app = () => {
  const checkBtn = document.querySelector('.check-btn');
  checkBtn.addEventListener('click', checkTable.bind(checlBtn))
};

app();

与 onclick 事件的结果相同

【问题讨论】：

使用 addEventListener 和 function: jsfiddle.net/7tvgen9w 箭头函数并不是编写函数或替代“传统”函数的酷炫新方法，它们有特定的用途。

标签： javascript events

【解决方案1】：

您不能通过arrow function 呼叫.bind()。箭头函数用于自动使用定义位置的this 值。为此，您的 checkTable 必须是“正常”函数。

function checkTable() {
  this.removeEventListener('click', checkTable);
  console.log(this); // i get "window"
  setTimeout(() => {
     //some code
  }, 3000);
}

【讨论】：