箭头函数 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 分钟前
项目全景 + 第一条完整后端链路
java·前端
小新11010 分钟前
vue架的网站修改端口
前端·javascript·vue.js
暗不需求13 分钟前
从零实现一个 Vue Todos 任务清单:深入响应式编程与组合式 API
前端·vue.js·面试
超绝大帅哥13 分钟前
TTFB, FP, FCP, LCP, CLS, INP,TBT, TTI性能指标
前端
用户17335980753717 分钟前
纯前端 PDF 处理避坑指南:5 个线上真实问题的解决方案
前端·javascript
Csvn19 分钟前
前端项目管理:需求拆解、排期与风险控制
前端
陈_杨21 分钟前
鸿蒙APP开发-带你走近分构App的分子数据
前端·javascript
Goodbye22 分钟前
深入理解 JavaScript 变量提升(Hoisting)—— 从现象到原理
javascript
橘子星23 分钟前
从零上手!Node.js 快速搭建生成式 AI 后端项目|密钥安全 + 完整可运行代码
前端·后端
陈_杨23 分钟前
鸿蒙APP开发-带你开发锻艺册APP的材料清单功能
前端·javascript