箭头函数搭配call/apply/bind规则及防抖代码中apply作用问询

你示例代码中的apply是否生效，取决于你传入防抖函数的fn类型：

• 如果传入的是像示例里getData这样的箭头函数：apply绑定this的逻辑完全失效，但传入参数的逻辑仍然有效
• 如果传入的是普通函数：apply的两个作用（绑定运行上下文、传入参数）都正常生效

具体原因拆解 #

1. 首先明确MDN规则的适用范围：call/bind/apply对箭头函数失效，指的是这三个方法传入的第一个参数（要绑定的this对象）不会被箭头函数接收，箭头函数的this永远是定义时继承的父作用域this，运行时无法修改。但这三个方法传入的后续参数，依然会正常传递给箭头函数，不会失效。
2. 再看这段防抖代码的逻辑：
   防抖返回的是普通函数，这个普通函数的this是调用时动态绑定的（比如作为DOM事件回调时this指向触发事件的元素），代码里提前把这个this存在了context变量里，就是为了后续给传入的fn绑定正确的运行上下文。
   当你给debounce传入普通函数作为参数时，fn.apply(context, arguments)就能把原函数的this绑定到触发回调的上下文，同时把调用防抖函数时传入的所有参数都透传给原函数，完全符合预期。
   只有当你传入的是箭头函数时，context参数才会被忽略，但是arguments对应的参数列表依然会正常传入到fn里。
3. 为什么教程里都这么写？
   因为防抖工具函数需要兼容所有传入的函数类型，不能假设使用者一定会传箭头函数，保留apply写法可以同时支持普通函数的上下文绑定需求，就算传入箭头函数也不会报错，只是不绑定this而已，不会影响其他逻辑。

补充小细节：你代码里setTimeout回调里直接用了arguments，因为箭头函数没有自己的arguments，所以这里的arguments实际继承的是外层返回的普通函数的arguments，和你提前存的args是同一个值，逻辑是对的，不过一般推荐直接用提前存好的args，避免上下文理解歧义。

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