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

相关推荐
北辰alk5 分钟前
Vue Router 404页面配置:从基础到高级的完整指南
vue.js
北辰alk9 分钟前
Vue 中的 MVVM、MVC 和 MVP:现代前端架构模式深度解析
vue.js
北辰alk13 分钟前
为什么 Vue 中的 data 必须是一个函数?深度解析与实战指南
vue.js
北辰alk14 分钟前
Vue 的 <template> 标签:不仅仅是包裹容器
vue.js
Nan_Shu_61420 分钟前
学习: Threejs (2)
前端·javascript·学习
北辰alk23 分钟前
为什么不建议在 Vue 中同时使用 v-if 和 v-for?深度解析与最佳实践
vue.js
北辰alk25 分钟前
Vue 模板中保留 HTML 注释的完整指南
vue.js
G_G#28 分钟前
纯前端js插件实现同一浏览器控制只允许打开一个标签,处理session变更问题
前端·javascript·浏览器标签页通信·只允许一个标签页
北辰alk38 分钟前
Vue 组件 name 选项:不只是个名字那么简单
vue.js
北辰alk40 分钟前
Vue 计算属性与 data 属性同名:优雅的冲突还是潜在的陷阱?
vue.js