TypeScript中如何将$.each()的普通回调改写为箭头函数

转箭头函数失效的本质原因是箭头函数不绑定自身的this：

• 普通函数作为$.each回调时，jQuery会主动把函数内部的this指向当前遍历到的DOM元素，所以原代码里写$(this)能拿到对应节点
• 箭头函数的this永远继承自它定义位置的外层作用域，jQuery无法修改箭头函数内部的this指向，所以直接替换函数写法后，$(this)根本拿不到遍历的目标元素，逻辑自然不生效。

$.each的回调本身就接收两个参数：第一个是当前遍历的索引，第二个是当前遍历的DOM元素，你直接用第二个参数代替原来的this即可，完全不需要依赖this上下文：

$.each($("[data-static-map-image]"), (_, element) => {
    $(element).attr("src", $(element).data("mapImageUrl"));
});

代码里的_是占位符，代表你不需要用到第一个索引参数，element就是每一轮循环拿到的带data-static-map-image属性的DOM节点，和原代码里的this完全等价。

你也可以直接用jQuery对象自带的.each()实例方法，逻辑完全一致：

$("[data-static-map-image]").each((_, element) => {
    $(element).attr("src", $(element).data("mapImageUrl"));
});

后续写jQuery代码时，只要是需要把依赖this的回调改成箭头函数，都可以用回调自带的参数替代this：

• 遍历类回调：直接用回调的第二个参数拿到当前元素
• 事件绑定回调：用事件对象的currentTarget属性拿到绑定事件的元素，效果和原回调里的this完全相同

内容的提问来源于stack exchange，提问作者develop7761