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

相关推荐
小小小小宇12 分钟前
前端 Service Worker
前端
只喜欢赚钱的棉花没有糖1 小时前
http的缓存问题
前端·javascript·http
小小小小宇1 小时前
请求竞态问题统一封装
前端
loriloy1 小时前
前端资源帖
前端
源码超级联盟1 小时前
display的block和inline-block有什么区别
前端
GISer_Jing1 小时前
前端构建工具(Webpack\Vite\esbuild\Rspack)拆包能力深度解析
前端·webpack·node.js
让梦想疯狂1 小时前
开源、免费、美观的 Vue 后台管理系统模板
前端·javascript·vue.js
海云前端2 小时前
前端写简历有个很大的误区,就是夸张自己做过的东西。
前端
葡萄糖o_o2 小时前
ResizeObserver的错误
前端·javascript·html
AntBlack2 小时前
Python : AI 太牛了 ,撸了两个 Markdown 阅读器 ,谈谈使用感受
前端·人工智能·后端