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

相关推荐
爱迪斯通4 分钟前
MANUS:用于视觉、语言、行动模型创建的高保真第一人称数据采集设备
前端
bjzhang757 分钟前
使用 HTML + JavaScript 实现在线知识挑战
前端·javascript·html
全栈王校长10 分钟前
Vue.js 3 模板语法与JSX语法详解
vue.js
薛定谔的猫222 分钟前
Cursor 系列(3):关于MCP
前端·cursor·mcp
全栈王校长30 分钟前
Vue.js 3 项目构建:从 Webpack 到 Vite 的转变之路
vue.js
sheji341632 分钟前
【开题答辩全过程】以 基于web的拍卖系统设计与实现为例,包含答辩的问题和答案
前端
明月_清风1 小时前
模仿 create-vite / create-vue 风格写一个现代脚手架
前端·后端
aou1 小时前
让表格式录入像 Excel 一样顺滑
前端·ai编程
前端付豪1 小时前
必知 Express和 MVC
前端·node.js·全栈
重铸码农荣光1 小时前
CSS 也能“私有化”?揭秘模块化 CSS 的防坑指南(附 Vue & React 实战)
前端·css·vue.js