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

相关推荐
王晓枫7 分钟前
flutter接入三方库运行报错:Error running pod install
前端·flutter
符方昊7 分钟前
React 19 对比 React 16 新特性解析
前端·react.js
ssshooter13 分钟前
又被 Safari 差异坑了:textContent 拿到的值居然没换行?
前端
曲折27 分钟前
Cesium-气象要素PNG色斑图叠加
前端·cesium
Forever7_34 分钟前
Electron 淘汰!新的桌面端框架 更强大、更轻量化
前端·vue.js
不会敲代码143 分钟前
前端组件化样式隔离实战:React CSS Modules、styled-components 与 Vue scoped 对比
css·vue.js·react.js
Angelial44 分钟前
Vue3 嵌套路由 KeepAlive:动态缓存与反向配置方案
前端·vue.js
jiayu1 小时前
Angular学习笔记24:Angular 响应式表单 FormArray 与 FormGroup 相互嵌套
前端
jiayu1 小时前
Angular6学习笔记13:HTTP(3)
前端
小码哥_常1 小时前
Kotlin抽象类与接口:相爱相杀的编程“CP”
前端