简单理解:_.debounce内部做了apply操作,箭头函数由于没有this,无法绑定this,导致最终this是undefined, 而匿名函数,成功通过applay绑定了this,所以this指向了vue组件实例。
methods: {// 防抖动dSave1: _.debounce(() => {console.log(this) // undefinedthis.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