在javascript中为事件处理程序使用胖箭头语法并不起作用

Question

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

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

现在handleUpdate处理程序函数在定义为这样的命名函数时起作用：

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

但是当与胖箭头语法一起使用时，这不起作用：

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

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

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

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

Answer 1

es6 fat箭头表示法将“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);

https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind

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