_.debounce防抖函数在vue中使用this问题，应该传匿名函数而不是箭头函数

蓝with黑2024-03-25 22:52

简单理解：_.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

_.debounce防抖函数 在vue中使用this问题，应该传匿名函数而不是箭头函数

_.debounce防抖函数在vue中使用this问题，应该传匿名函数而不是箭头函数