箭头函数 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

相关推荐
三翼鸟数字化技术团队9 分钟前
websocket及SSE原理解析
前端
白鲸开源34 分钟前
Apache SeaTunnel Zeta Engine 的 Basic Auth 是怎么工作的?
java·vue.js·github
妙码生花35 分钟前
从 PHP 到 AI + Golang,程序员自救转型手记(八):设计管理员模型、热重载配置
前端·后端·go
卤蛋fg640 分钟前
vue 甘特图 vxe-gantt 的使用(四):周视图的渲染
vue.js
政采云技术41 分钟前
Chrome 高阶调试技巧
前端
牧艺41 分钟前
HTML-in-Canvas 深度解析:让 Canvas 真正「吃上」HTML 这碗饭
前端·html·canvas
卤蛋fg643 分钟前
vue 甘特图 vxe-gantt 的使用(三):月视图的渲染
vue.js
秦瑜华1 小时前
前端页面添加AI自动翻译按钮
前端·openai·ai编程
沉浸学习的匿名网友1 小时前
什么是 .gitignore?为什么每个 Git 项目几乎都离不开它?
前端·git
Apifox1 小时前
从 Postman 迁移到 Apifox:Workspace、Collection、Environment 现在可以一起导入了
前端·后端·程序员