在 javascript 中对事件处理程序使用粗箭头语法不起作用

Question

我有一些输入元素，我想在 change 事件上附加事件侦听器，如下所示：

inputs.forEach(input => input.addEventListener('change', handleUpdate));

现在，handleUpdate 处理函数在定义为这样的命名函数时可以工作：

function handleUpdate() {
  console.log(this.value);
}

但是当与像这样的粗箭头语法一起使用时，这不起作用：

const handleUpdate = () => console.log(this.value)

现在我知道 this 已设置为 window 对象，解决此问题的一种方法是：

const handleUpdate = (ev) => console.log(ev.target.value);

但这是在 Javascript 中为事件处理程序使用粗箭头语法的正确方法还是不建议首先使用它们？

Answer 1

es6 粗箭头符号将 "this" 的值保留到创建函数的上下文中。如果你想在函数内改变 "this" 的值，你应该在函数上使用 "bind" 。并且

const handleUpdate = () => console.log(this.value)

不是匿名函数。这是一个名为 "handleUpdate" 的函数。匿名函数是一个没有分配名称的函数，因此您不能在它定义的上下文中使用它来调用它。例子

target.addEventListener('click', () => { doSomeStuff() };

因此您的问题不会在您发布的代码的上下文中计算。

编辑绑定用法：

var handleUpdate = function() {console.log(this.value)};
handleUpdate = handleUpdate.bind(whatever_you_want_this_to_mean_inside_the_function);

方法call()、apply()和bind()不会改变箭头函数中this的值。（事实上，函数内部 this 的值根本无法更改——它将与调用函数时的值相同。）如果需要绑定到不同的值，则需要使用函数表达式.

Using fat arrow syntax for event handlers in javascript doesn't work