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

相关推荐
Wcowin1 分钟前
【2】 Zensical配置详解
前端·github
用户1085932993417 分钟前
Options API 与 Composition API 对照表
vue.js
REDcker13 分钟前
Web 音视频流媒体 API 全景
前端·音视频
phltxy16 分钟前
Vue进阶实战:自定义指令与插槽的核心用法及实战案例
前端·javascript·vue.js
西门吹-禅18 分钟前
【iFLow skills】
前端·chrome
春波petal19 分钟前
MacOS 13.7.8版本-前端环境一键搭建指南
前端·macos
Never_Satisfied34 分钟前
在JavaScript / HTML中,触发某个对象的click事件
开发语言·javascript·html
许同1 小时前
JS-WPS 自动化办公(5)多Sheet整合
开发语言·前端·javascript
_OP_CHEN1 小时前
【前端开发之JavaScript】(四)JS基础语法下篇:函数与对象核心要点深度解析
开发语言·前端·javascript·界面开发·前端开发·网页开发·语法基础
henry1010101 小时前
通过GitHub Page服务免费部署静态Web网站
前端·html·github·html5