_.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

相关推荐
Hexene...1 分钟前
【前端Vue】如何快速直观地查看引入的前端依赖?名称版本、仓库地址、开源协议、作者、依赖介绍、关系树...(Node Modules Inspector)
前端·javascript·vue.js
fanruitian3 分钟前
div水平垂直居中
前端·javascript·html
旭久6 分钟前
react+antd实现一个支持多种类型及可新增编辑搜索的下拉框
前端·javascript·react.js
摘星编程6 分钟前
用React Native开发OpenHarmony应用:Loading加载状态组件
javascript·react native·react.js
aesthetician16 分钟前
Spotify 网页版前端技术全面解析
前端
咩图17 分钟前
Sketchup软件二次开发+Ruby+VisualStudioCode
java·前端·ruby
Можно29 分钟前
从零开始:Vue 框架安装全指南
前端·javascript·vue.js
阿蒙Amon35 分钟前
TypeScript学习-第9章:类型断言与类型缩小
javascript·学习·typescript
福大大架构师每日一题40 分钟前
agno v2.4.7发布!新增Else条件分支、AWS Bedrock重排器、HITL等重大升级全解析
javascript·云计算·aws
.清和.44 分钟前
【js】Javascript事件循环机制
开发语言·javascript·ecmascript