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

相关推荐
hlyling2 分钟前
一键高效处理,批量缩放PNG图片,按比例轻松调整,高效工作从此开始!
javascript·python·c#·objective-c·batch·symfony
化作繁星44 分钟前
vue3项目图片压缩+rem+自动重启等plugin使用与打包配置
前端·vue·vite
u0104058361 小时前
构建可扩展的Java Web应用架构
java·前端·架构
swimxu2 小时前
npm 淘宝镜像证书过期,错误信息 Could not retrieve https://npm.taobao.org/mirrors/node/latest
前端·npm·node.js
qq_332394202 小时前
pnpm的坑
前端·vue·pnpm
雾岛听风来2 小时前
前端开发 如何高效落地 Design Token
前端
不如吃茶去2 小时前
一文搞懂React Hooks闭包问题
前端·javascript·react.js
冯宝宝^2 小时前
图书管理系统
服务器·数据库·vue.js·spring boot·后端
alwn2 小时前
新知识get,vue3是如何实现在style中使用响应式变量?
前端
来之梦2 小时前
uniapp中 uni.previewImage用法
前端·javascript·uni-app