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

相关推荐
树上有只程序猿5 分钟前
如果单表数据量大,只能考虑分库分表吗?
前端
程序员易晶5 分钟前
vue2添加背景水印-手动实现(无组件模式)
javascript·vue.js·elementui
蘑菇头爱平底锅13 分钟前
数字孪生-DTS-孪创城市-前端用代码实现行政区划分
前端·数据可视化
安迪小宝16 分钟前
python基础语法13-装饰器
开发语言·前端·python
Moon_su35 分钟前
vue中路由回退数据缓存的最佳实践
vue.js
鸿蒙场景化示例代码技术工程师37 分钟前
实现文件List拖动鸿蒙示例代码
前端
Rachel_wang43 分钟前
React 使用 i18next 实现国际语言切换翻译
前端
小白探索世界欧耶!~43 分钟前
【踩坑】GitHub Actions 运行的 Linux 环境中,文件名是大小写敏感的
linux·运维·服务器·前端·vue.js·笔记·github
Simon—欧阳1 小时前
C#异步方法返回Task<T>的同步调用
开发语言·前端·javascript
天生我材必有用_吴用1 小时前
vue3实战三、Axios封装结合mock数据,vite跨域及环境变量配置 入口
前端