1.7　箭头函数中的this指向

在传统的JavaScript函数中，this关键字的指向是动态的，取决于函数被调用的方式。但在ES6的箭头函数中，this的指向是固定的，捕获外部作用域的this值，并将其绑定到函数内部。

这个特点使得箭头函数在编写代码时更加简洁和便捷。相比之下，传统函数在使用this时则需要额外注意，经常需要使用bind()、call()、apply()等方法手动绑定this。

我们通过一个案例来详细了解箭头函数的特点。

创建一个名为Person的对象，并定义其中的方法。使用传统函数编写如下。

```javascript
function Person(name) {
  this.name = name;
  this.sayHello = function() {
    console.log("Hello, I'm " + this.name);
  }
}
var person = new Person("Tom");
person.sayHello(); // 输出：Hello, I'm Tom
```

在以上代码中，我们通过构造函数创建了一个Person对象，并为其定义了sayHello()方法。在方法内部，我们使用this关键字引用对象的属性name。

接下来，使用箭头函数进行重写。

```javascript
function Person(name) {
  this.name = name;
  this.sayHello = () => {
    console.log("Hello, I'm " + this.name);
  }
}

var person = new Person("Tom");
person.sayHello(); // 输出：Hello, I'm Tom
```

通过使用箭头函数，我们无须再关注this的指向问题，直接使用this.name即可。

对于箭头函数，重要的是，箭头函数本身并没有绑定this。如果在箭头函数中出现了this，它指向的是上级作用域中的this。通俗地讲，箭头函数被定义在哪里，箭头函数中的this就指向哪里。

接下来再看另一个案例。

```javascript
const obj = {name: "Tom"}
function fn() {
  console.log(this)
  return () => {
    console.log(this);
  }
}
const res = fn.call(obj)
res()
```

【代码解析】

在上述代码中，fn()是一个普通函数，普通函数中的this正常应该指向window。由于箭头函数定义在fn()函数中，所以箭头函数中的this也指向window。

注意，在调用fn()函数时，通过call()方法修改了this指向，此时fn()函数中的this指向了obj对象，根据“箭头函数被定义在哪里，箭头函数中的this就指向哪里”这一原则，箭头函数中的this也指向了obj对象。

另外，箭头函数还具有很多特点，例如对参数的处理更加简洁、消除了自身的arguments对象等。但需要注意的是，箭头函数不适合作为构造函数使用，也不能使用apply()、call()等方法改变其this值。

总之，在ES6中，箭头函数的引入带来了更加简洁和易用的函数写法。由于具有固定的this指向，不再需要考虑this的变化，从而减少了开发中的错误和调试时间。 zbOqNMPW7ZhHk4ezQXUCWfPnprETZmmpVZgM4e3FDrKt4yXt0xk+jCiuipkP0evT