JavaScript箭头函数没有this ?

1. 传统函数中的 this 绑定问题

• 在传统的 JavaScript 对象方法中，如果方法内部包含一个回调函数（例如事件处理程序或定时器），那么在回调函数中，this 的指向可能会发生变化。
• 默认情况下，普通函数的 this 是动态绑定的，取决于调用它的上下文。如果回调函数被直接调用（而不是作为对象方法调用），this 通常会指向全局对象（如 window）或 undefined（严格模式下）。

const obj = {
  name: "example",
  greet: function () {
    setTimeout(function () {
      console.log(this.name); // this 指向 window 或 undefined
    }, 1000);
  },
};
obj.greet(); // 输出 undefined

为了解决这个问题，开发者通常会在外部保存对 this 的引用，比如使用 self：

const obj = {
  name: "example",
  greet: function () {
    const self = this; // 保存 this 引用
    setTimeout(function () {
      console.log(self.name); // 使用 self 访问正确的上下文
    }, 1000);
  },
};
obj.greet(); // 输出 example

2. 箭头函数的引入

• 箭头函数（Arrow Function）是 ES6 引入的一种新的函数定义方式，它的一个重要特性是 没有自己的 this，而是继承自定义时所在的上下文（即词法作用域）。
• 这一特性使得箭头函数非常适合用于回调函数场景，因为它不会改变 this 的指向。

javascript
const obj = {
  name: "example",
  greet: function () {
    setTimeout(() => {
      console.log(this.name); // this 指向定义时的上下文（即 obj）
    }, 1000);
  },
};
obj.greet(); // 输出 example

3. 为什么 self 不再需要

• 箭头函数的引入解决了传统函数中 this 动态绑定的问题，因此开发者不再需要手动保存 this 的引用（如使用 self）。
• 这种简化的语法不仅减少了代码冗余，还提高了代码的可读性和维护性。

总结

箭头函数通过其词法作用域绑定 this 的特性，消除了传统函数中 this 动态绑定带来的问题。这使得在对象方法中使用回调函数时，不再需要额外的变量（如 self）来保存 this 的引用，从而简化了代码结构并提升了开发效率。