addEventListener、箭头函数和`this` [重复]

Question

我正在经历 JavaScript30 挑战，在 lesson 3 中，他有一些事件监听器调用一个函数，该函数引用它作为 this 调用的元素：

const inputs = document.querySelectorAll('.controls input');
function handleUpdate() {
  const suffix = this.dataset.sizing || '';
  document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix);
}
inputs.forEach(input => input.addEventListener('change', handleUpdate));
inputs.forEach(input => input.addEventListener('mousemove', handleUpdate));

我正在尝试使用 ES6 箭头函数重写它，但我无法让 this 正常工作。我有一个使用target 的解决方法：

const handleUpdate = (e) => {
  const that = e.target;
  const newValue = `${that.value}${that.dataset.sizing || ''}`;
  etc.
}

但我首先尝试像这样绑定函数：

input.addEventListener('change', handleUpdate.bind(this));

但是函数内部的this仍然指向window，我不明白为什么。

在这种情况下是否没有“正确”的方式将函数绑定到元素？

Answer 1

这是什么？

this是Javascript中的一个特殊关键字，指的是函数的执行环境：

• 如果在全局范围内执行函数，this 将绑定到窗口
• 如果将函数传递给事件处理程序的回调，this 将绑定到引发事件的 DOM 元素

绑定

bind 方法基本上是说，当你调用函数时，用我的参数替换它。所以，例如：

let a = {}
function test_this() {
     return this === a;
}  

test_this(); // false
test_this.bind(a)(); // true (.bind() returns the bound function so we need to call the bound function to see the result)

此外，箭头函数只是将函数的this 绑定到this 的当前值的语法糖。例如，

let b = () => { /* stuff */ }

和

一样

let b = (function () { /* stuff */}).bind(this);

（基本上，我知道这是过于简单化了）

你的困境

在正常的事件过程中（不使用箭头函数），this 绑定到 DOM 元素。

当您执行创建事件处理程序input.addEventListener('change', handleUpdate.bind(this)); 时，您正在全局范围内运行（所以this === window）。所以你有效地运行input.addEventListener('change', handleUpdate.bind(window));（这是你注意到的行为）。而使用箭头函数也是一样的。

如果你想用匿名函数替换回调，你应该这样做：

const handleUpdate = function (e) {
  const that = e.target;
  const newValue = `${that.value}${that.dataset.sizing || ''}`;
  // etc.
}