箭头函数 为什么不用绑定this

箭头函数（Arrow Functions）在JavaScript中不绑定自己的this值，而是继承自父执行上下文中的this值。这意味着箭头函数没有自己的this，它的this是在函数定义时的外层作用域中确定的，并且在函数执行时不会改变。

以下是为什么箭头函数不绑定this的几个原因：

1. 语法简洁性

箭头函数的设计旨在简化函数表达式的写法，尤其是对于那些不关心this绑定的情况。对于一些简短的回调函数，没有必要每次都创建一个新的this上下文。

2. 避免传统函数的this绑定问题

在传统的JavaScript函数中，this的值取决于函数是如何被调用的。例如，如果函数作为对象的方法被调用，this指向该对象；如果作为普通函数调用，this通常指向全局对象（在严格模式下为undefined）。这种this绑定有时会导致混淆和错误。

3. 保持词法作用域

箭头函数遵循词法作用域（lexical scoping），这意味着它们的this值是由它们被定义时的上下文决定的，而不是执行时的上下文。这使得箭头函数中的this更易于理解和预测。

4. 适用性

箭头函数特别适用于那些不需要特定this值的场景，例如回调函数、数组操作中的映射和过滤函数、或者那些简单地使用闭包而不需要改变this指向的场合。

示例

function Person() {
  this.age = 0;

  // 传统函数
  setInterval(function growUp() {
    this.age++; // 在非严格模式下，这里的this指向全局对象，严格模式下为undefined
  }, 1000);

  // 箭头函数
  setInterval(() => {
    this.age++; // 这里的this指向Person的实例，因为箭头函数从父作用域继承了this
  }, 1000);
}

var person = new Person();

在这个例子中，使用传统函数时，this.age将不会按预期工作，因为this指向了全局对象（或者undefined）。而使用箭头函数，this正确地指向了Person的实例。

总的来说，箭头函数的设计是为了提供一种不绑定this的函数写法，使得代码更加清晰、简洁，并避免了一些与this相关的常见错误。