如何使用箭头函数在更改事件上传递参数“this”[重复]

Posted 2023-05-07

【中文标题】如何使用箭头函数在更改事件上传递参数“this”[重复]

【英文标题】：How pass parameter "this" on change event using Arrow Function [duplicate]

【发布时间】：2017-04-15 02:06:37

【问题描述】：

我通常有这样的代码：

HTML 代码：

<select id="mySelectOne">
   <option value="1">1</option>
   <option value="2">2</option>
   <option value="3">3</option>
</select>

JS 代码：

$("#mySelectOne").on("change",function()
    var value = $(this).val(); // Return the value selected
    alert(value); 
);

使用箭头函数：

$("#mySelectTwo").on("change", () => 
    var value = $(this).val(); //"this" is undefined
    alert(value);
);

演示： https://jsfiddle.net/cmedina/kr1hxxtm/

当我使用箭头函数时，this 的值为undefined（应该参考选择元素）。

如何传递参数？

【参考方案1】：

你不能。这是箭头函数的一半，它们关闭了this，而不是拥有自己的，由它们的调用方式设置。对于问题中的用例，如果您希望在调用处理程序时由jQuery设置this，则处理程序需要是function函数。

但如果您有使用箭头的理由（也许您想使用 this 来表示箭头之外的含义），如果您愿意，可以使用 e.currentTarget 而不是 this：

$("#mySelectTwo").on("change", e =>       // Note `e` argument
    var value = $(e.currentTarget).val();  // ...and using it here
    alert(value);
);

事件对象上的 currentTarget 与 jQuery 在调用处理程序时设置的 this 相同。

【讨论】：

这是一个很好的答案！

@CMedina：很高兴有帮助！但是，如果您不接受它，我已将其发布到 Rory 链接的较早问题中，因此我将在此处将其删除。