简单理解:_.debounce内部做了apply操作,箭头函数由于没有this,无法绑定this,导致最终this是undefined, 而匿名函数,成功通过applay绑定了this,所以this指向了vue组件实例。
javascript
methods: {
// 防抖动
dSave1: _.debounce(() => {
console.log(this) // undefined
this.save()
}, 500),
// 防抖动
dSave2: _.debounce(function(){
console.log('ddd:', this) // this---> vm
} , 500),
}
debounde函数:
可以看到内部incokeFunc对传入的func做了applay操作(绑定this),而匿名函数function(){}
存在this可以被apply成功绑定;反之,因为箭头函数()=>{}
本身没有this,所以applay操作无效,因此vue中使用debouncd函数,如果传入箭头函数,其this指向不是vue实例,而是undefined。
总结:
在使用 lodash.debounce 等方法的时候,为保证 this 正确的指向,回调函数推荐使用 匿名函数(function(){}
)。
箭头函数根本没有自己的 this,导致内部的 this 就是外层代码块的 this。(正因如此,call,apply,bind 就无法生效了,所以针对 this出现异常的情况,请优先考虑是否是因为箭头函数导致的。)
参考:https://blog.csdn.net/wswq2505655377/article/details/131962490