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

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

相关推荐
呆呆小雅4 分钟前
二、创建第一个VUE项目
前端·javascript·vue.js
m0_7482393310 分钟前
前端(Ajax)
前端·javascript·ajax
Fighting_p14 分钟前
【记录】列表自动滚动轮播功能实现
前端·javascript·vue.js
前端Hardy15 分钟前
HTML&CSS:超炫丝滑的卡片水波纹效果
前端·javascript·css·3d·html
技术思考者19 分钟前
HTML速查
前端·css·html
缺少动力的火车19 分钟前
Java前端基础—HTML
java·前端·html
Domain-zhuo32 分钟前
Git和SVN有什么区别?
前端·javascript·vue.js·git·svn·webpack·node.js
雪球不会消失了37 分钟前
SpringMVC中的拦截器
java·开发语言·前端
李云龙I1 小时前
解锁高效布局:Tab组件最佳实践指南
前端
m0_748237051 小时前
Monorepo pnpm 模式管理多个 web 项目
大数据·前端·elasticsearch