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

相关推荐
少云清39 分钟前
【UI自动化测试】12_web自动化测试 _验证码处理和cookie
前端·python·web自动化测试
linux_cfan1 小时前
2026版 WordPress 视频插件终极选型:知识付费创作者如何低成本打造专业在线课堂?
前端·javascript·音视频·html5
pas1362 小时前
46-mini-vue 实现编译 template 为 render 函数
前端·javascript·vue.js
木斯佳2 小时前
前端八股文面经大全:京东零售前端实习一面(2026-1-20)·面经深度解析
前端·状态模式·零售
YuMiao2 小时前
把 WebSocket 服务迁移到 Cloudflare Durable Objects —— 以一次协同编辑实战为例
javascript·node.js
zheshiyangyang2 小时前
前端面试基础知识整理【Day-8】
前端·面试·职场和发展
a1117762 小时前
优雅简历(html开源)
前端·开源·html
Cache技术分享2 小时前
330. Java Stream API - 处理 Optional 对象:像流一样优雅地使用 Optional
前端·后端
感性的程序员小王2 小时前
别再手撸架构图了!我写了个 AI 工具,把 Spring Boot 代码一键变成 Draw.io 流程图
前端·后端
左夕2 小时前
深度解析vue的生命周期
vue.js