箭头函数 this

箭头函数中,是没有this的,所以写在箭头函数中的this,会自动向当前作用域的上一层作用域寻找,是否含有this,如果有就指代,没有就继续找上一层。

javascript 复制代码
new Vue({
	el:'#root',
	data:{
		firstName:'张',
		lastName:'三',
		fullName:'张-三'
	},
	watch:{
		firstName(val){
			setTimeout(()=>{
				this.fullName = val + '-' + this.lastName
			},1000);
		},
		lastName(val){
			this.fullName = this.firstName + '-' + val
		}
	}
})

举个简单的例子,以上述Vue代码为例

setTimeout函数,是箭头函数

JS的window对象调用setTimeout函数

setTimeout箭头函数中没有this可以指代的对象

向上一层作用域寻找

上一层作用域是Vue实例对象vm的监视属性watch

所以watch中的this指代的是Vue实例对象vm

所以setTimeout函数中的this指代的就是Vue实例对象vm

相关推荐
San30.5 分钟前
Vue 3 + DeepSeek 实现 AI 流式对话的完整指南
前端·vue.js·人工智能
枣把儿11 分钟前
「zotepad」用Gemini3pro写出一个高效写作和发文的记事本应用
android·前端·nuxt.js
前端开发爱好者13 分钟前
VSCode 推出 绿色版!更强!更智能!
前端·javascript·visual studio code
明川14 分钟前
Android Gradle 学习 - 生命周期和Task
android·前端·gradle
VX:Fegn089514 分钟前
计算机毕业设计|基于springboot + vue图书商城系统(源码+数据库+文档)
数据库·vue.js·spring boot·后端·课程设计
吃好喝好玩好睡好16 分钟前
Flutter与Electron在OpenHarmony生态的融合实践:构建下一代跨平台应用
javascript·flutter·electron
小熊哥^--^20 分钟前
WebSocket客户端封装类
前端·websocket
一个小小开发1 小时前
在大型项目中为什么更推荐Composition API?它解决了哪些工程化问题?
vue.js
四眼肥鱼1 小时前
全网最全的 qiankun 基于 react18+(主应用)、vue3.4+(微应用)实现页签缓存,页面缓存
前端·javascript
dorisrv1 小时前
优雅地处理前端错误边界
前端