一直以来对于ES6中箭头函数有些疑虑,其中一项就是this的指向问题,所以不敢放手去使用。因为跟之前我所熟悉掌握的函数内部this的指向是有些地方不同的,但是在箭头函数中this到底指向谁,这块儿模模糊糊的。所以为了搞清楚这个问题,就特意查阅了相关的资料,现总结下来。
在JavaScript语言里面,this的用途很广泛。在这里,对this的含义以及原理就不做解释和说明,因为本文的目的是阐明箭头函数中this的指向问题。一般的,this的典型应用场景有如下四个:
- 普通函数中,this指向window对象;
- 函数作为对象的属性,函数中的this指向调用函数的对象;
- 在构造函数中。此时this指向构造函数的实例对象;
- 在call和apply中,this指向第一个参数,即被扩展的作用域对象;
为了方便理解,特借助以上四种场景,对比function函数和箭头函数中this的指向的异同。
1. 普通函数中的this
1.1 function函数
var a = 0;
function foo(){
console.log(this);
console.log(this.a);
}
foo(); // 1. window; 2. 0
1.2 箭头函数
// 在箭头函数中
var foo = () => {
console.log(this);
console.log(this.a)
};
foo();// 1. window; 2. 0
在普通函数中,不论是function函数还是
版权声明:本文为zhq2005095原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。