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

相关推荐
午安~婉6 分钟前
GitHub Token/ GitHub Stats统计显示图异常
前端·github·vercel·github token
码云之上22 分钟前
AI Agent 工程化总览篇:从 Prompt 到 Harness
前端·人工智能
2501_9269783323 分钟前
以说明书 DNA 为模板——完整 AGI 的结构图景
前端·人工智能·经验分享·笔记·ai写作
IT_陈寒33 分钟前
Vite静态资源引用这个坑我踩得有点疼
前端·人工智能·后端
程序员黑豆1 小时前
鸿蒙应用开发:AttributeModifier 使用教程
前端·harmonyos
codeniu2 小时前
TRAE Work 实战 | 从"有个想法"到线上Demo,我全程只靠对话就完成了
前端·trae
妙码生花2 小时前
从 PHP 到 AI + Golang,程序员自救转型手记(五十):增加管理员角色组管理
前端·后端·ai编程
飘尘2 小时前
一文讲清楚前端面试会问到的所有缓存
前端·javascript·面试
老王以为2 小时前
走进 AI Agent
前端·人工智能·架构
妙码生花2 小时前
从 PHP 到 AI + Golang,程序员自救转型手记(五十一):管理员和角色组的关联
前端·后端·ai编程