箭头函数 this

箭头函数中,是没有this的,所以写在箭头函数中的this,会自动向当前作用域的上一层作用域寻找,是否含有this,如果有就指代,没有就继续找上一层。

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

    2024-06-11 19:56:01       28 阅读
  2. 箭头函数this指向问题

    2024-06-11 19:56:01       84 阅读
  3. js中使用箭头函数以及setTimeout时this的指向问题

    2024-06-11 19:56:01       23 阅读
  4. ES6 箭头函数

    2024-06-11 19:56:01       58 阅读
  5. ES6 => 箭头函数

    2024-06-11 19:56:01       29 阅读
  6. 箭头函数与普通函数的差异

    2024-06-11 19:56:01       53 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-06-11 19:56:01       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-06-11 19:56:01       100 阅读
  3. 在Django里面运行非项目文件

    2024-06-11 19:56:01       82 阅读
  4. Python语言-面向对象

    2024-06-11 19:56:01       91 阅读

热门阅读

  1. 高通Android 12应用保活时序问题踩坑

    2024-06-11 19:56:01       29 阅读
  2. R语言中的dplyr包函数总结

    2024-06-11 19:56:01       33 阅读
  3. 多人中招!企业裁员前的十大征兆!

    2024-06-11 19:56:01       25 阅读
  4. 这些Linux知识可不是靠背就会的!

    2024-06-11 19:56:01       29 阅读
  5. web前端开发转正申请:成长、挑战与未来展望

    2024-06-11 19:56:01       30 阅读
  6. 项目开发流程规范,请查收!

    2024-06-11 19:56:01       30 阅读
  7. WPF用C#代码实现设置Border颜色的渐变

    2024-06-11 19:56:01       28 阅读
  8. VSFTP虚拟用户访问-设置

    2024-06-11 19:56:01       30 阅读
  9. 用链表实现的C语言队列

    2024-06-11 19:56:01       31 阅读