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

相关推荐
ai工具集合几秒前
老项目位图图标放大模糊?PNG 一键转 SVG 矢量化实操,附前端避坑指南
前端
2601_968708033 分钟前
DreamsChat Web – Chat, Audio, Video Web APP with Admin Dashboard
前端·架构
Ai-_Man5 分钟前
Microsoft Copilot对话数据怎么导入到另外一个Microsoft Copilot账号里去?AI导出鸭
开发语言·javascript·人工智能·microsoft·chatgpt·ecmascript·copilot
小大宇7 分钟前
Vue知识点8-Watch
前端·javascript·vue.js
垆边人似月.8 分钟前
选型与快速跑通(Tesseract / EasyOCR / PaddleOCR)
前端·python
IT_陈寒10 分钟前
一文搞懂Java的核心概念
前端·人工智能·后端
铁皮饭盒13 分钟前
workbuddy和codebuddy免费送1000积分, 10秒钟搞定
前端·后端
aloha_78916 分钟前
HTML、JavaScript 与 TypeScript 基础速查
javascript·typescript·html
风骏时光牛马22 分钟前
从零到落地的AI系统学习进阶路线
前端
橙光成长3 小时前
PDF离线工具箱深度解析:4MB纯前端单文件,40+功能全本地运行,文件绝不上传
前端·pdf·1024程序员节