JS-箭头函数中的this的指向

  • Post author:
  • Post category:其他


一直以来对于ES6中箭头函数有些疑虑,其中一项就是this的指向问题,所以不敢放手去使用。因为跟之前我所熟悉掌握的函数内部this的指向是有些地方不同的,但是在箭头函数中this到底指向谁,这块儿模模糊糊的。所以为了搞清楚这个问题,就特意查阅了相关的资料,现总结下来。

在JavaScript语言里面,this的用途很广泛。在这里,对this的含义以及原理就不做解释和说明,因为本文的目的是阐明箭头函数中this的指向问题。一般的,this的典型应用场景有如下四个:

  1. 普通函数中,this指向window对象;
  2. 函数作为对象的属性,函数中的this指向调用函数的对象;
  3. 在构造函数中。此时this指向构造函数的实例对象;
  4. 在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 版权协议,转载请附上原文出处链接和本声明。