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



我有一些输入元素,我想在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()不会在箭头函数中更改其值。(实际上,函数内部的值根本无法更改 - 它的值与调用函数时相同。)如果您需要绑定到另一个值,则需要使用一个功能表达式。

相关内容

  • 没有找到相关文章

最新更新