我有一些输入元素,我想在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中使用脂肪箭语法的正确方法,还是不建议首先使用它们?
es6 fat箭头符号将" this"的值保持在创建函数的上下文中。如果要更改函数内部"此"的值,则应在函数上使用"绑定"。和
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/functions/function/bind
方法调用(),apply()和bind()不会在箭头函数中更改其值。(实际上,函数内部的值根本无法更改 - 它的值与调用函数时相同。)如果您需要绑定到另一个值,则需要使用一个功能表达式。