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

相关推荐
REDcker7 分钟前
前端打包工具 - Rollup 打包工具笔记
前端·笔记
前端大卫9 分钟前
动态监听DOM元素高度变化
前端·javascript
Cxiaomu20 分钟前
React Native App 图表绘制完整实现指南
javascript·react native·react.js
前端大卫24 分钟前
Webpack 老项目的优化实践
前端
开利网络31 分钟前
合规底线:健康产品营销的红线与避坑指南
大数据·前端·人工智能·云计算·1024程序员节
yinuo42 分钟前
纯CSS&JS实现:丝滑渐变过渡的动态导航栏
前端
qq. 280403398443 分钟前
vue介绍
前端·javascript·vue.js
未来之窗软件服务1 小时前
未来之窗昭和仙君(五十五)标签票据打印模板设计器——东方仙盟筑基期
前端·打印设计器·仙盟创梦ide·东方仙盟·昭和仙君·东方仙盟架构
Mr.Jessy1 小时前
Web APIs 学习第五天:日期对象与DOM节点
开发语言·前端·javascript·学习·html
前端大卫1 小时前
如何统一前端项目的 Node 版本和包管理器?
前端