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

相关推荐
米开朗积德1 分钟前
项目多文件JSON数值比对
javascript
sorryhc6 分钟前
【AI解读源码系列】ant design mobile——Image图片
前端·javascript·react.js
老猴_stephanie6 分钟前
Sentry On-Premise 21.7 问题排查与处理总结
前端
sorryhc35 分钟前
【AI解读源码系列】ant design mobile——Button按钮
前端·javascript·react.js
VOLUN36 分钟前
PageLayout布局组件封装技巧
前端·javascript·vue.js
掘金安东尼36 分钟前
React 的 use() API 或将取代 useContext
前端·javascript·react.js
牛马喜喜37 分钟前
记录一次el-table+sortablejs的拖拽bug
前端
一枚前端小能手41 分钟前
⚡ Vite开发体验还能更爽?这些配置你试过吗
前端·vite
anyup1 小时前
🔥 🔥 为什么我建议你使用 uView Pro 来开发 uni-app 项目?
前端·vue.js·uni-app
Skelanimals1 小时前
Elpis全栈框架开发总结
前端