JavaScript箭头函数下Drag API事件回调不生效问题排查

问题原因解答 #

你遇到的现象和箭头函数的this指向没有关联，本质是函数声明提升规则和const声明的暂时性死区特性的差异导致的：

• 使用function关键字声明的普通函数存在完整的函数提升效果：函数的完整定义会被提升到当前作用域的最顶部，所以哪怕你把dragStart、dragEnd的定义写在forEach绑定事件的代码之后，执行绑定逻辑时这两个函数已经完成初始化，可以正常作为回调函数传入，因此拖拽事件触发后能正常执行打印逻辑。
• 当你把两个函数改成箭头函数时，本质是用const声明了存储函数的变量：const和let的声明只会被提升，但不会提前初始化，在声明代码执行前访问这些变量会进入暂时性死区，此时变量的取值为undefined。你在forEach里绑定事件时传入的dragStart、dragEnd实际是undefined，相当于没有给事件绑定有效的回调函数，因此拖拽触发后没有任何反应。

你调整代码顺序后功能恢复正常的原因也很明确：你把箭头函数的声明逻辑移到了forEach绑定事件的代码之前，执行绑定逻辑时两个函数已经完成初始化，可以正常作为回调传入，自然就能正常执行了。

如果你想验证这个逻辑，可以做个小测试：如果用var声明箭头函数（即var dragStart = () => {console.log("drag start")}），哪怕声明写在forEach之后，绑定事件时也不会抛出变量未定义的错误，但因为var声明的变量提升只会默认初始化为undefined，所以事件还是不会有响应，进一步证明问题和箭头函数本身的特性无关，只是声明顺序和变量提升规则的差异。

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