箭头函数的this指向谁

先看1个重要原则：

        由Vue管理的函数，一定不要写箭头函数，箭头函数的this就不再是Vue实例了

箭头函数的 this 指向在定义时确定，继承自外层作用域（即定义时的上下文）的 this，且无法通过 call、apply  或  bind 改变。以下是关键点总结：

1. 词法作用域的 this

• 箭头函数没有自己的 this，它使用外层非箭头函数作用域的 this 值。若外层没有函数，则指向全局对象（如 window 或 global）。

• 示例：

  const obj = {
    value: 42,
    getValue: function() {
      // 普通函数中的 this 指向 obj
      const arrowFn = () => this.value;
      return arrowFn();
    }
  };
  console.log(obj.getValue()); // 输出 42

  2. 与普通函数的区别

• 普通函数：this 由调用方式决定（如对象方法、构造函数、事件监听等）。

• 箭头函数：this 固定为定义时的外层 this。

• 示例对比：

  // 普通函数（this 指向调用者）
  const obj1 = {
    value: 10,
    fn: function() { console.log(this.value); }
  };
  setTimeout(obj1.fn, 100); // 输出 undefined（this 指向全局）
  
  // 箭头函数（this 继承外层）
  const obj2 = {
    value: 10,
    fn: function() {
      setTimeout(() => console.log(this.value), 100); // 继承外层 this（obj2）
    }
  };
  obj2.fn(); // 输出 10

  3. 无法通过绑定方法修改

• 使用 call、apply 或 bind 无法改变箭头函数的 this。

• 示例：

  const outerThis = { name: "Outer" };
  const arrowFn = () => console.log(this.name);
  arrowFn.call({ name: "New" }); // 输出 "Outer"（若外层 this 指向全局则可能输出 undefined）

  4. 对象字面量中的陷阱

• 对象字面量不创建作用域，内部箭头函数的 this 指向全局。

• 示例：

  const obj = {
    value: "Hello",
    getValue: () => console.log(this.value) // this 指向全局（如 window）
  };
  obj.getValue(); // 输出 undefined（假设外层为全局）

  5. 在构造函数中的行为

• 箭头函数作为构造函数会报错（不能 new）。

• 但若在构造函数内定义，箭头函数会继承实例的 this：

  function Person() {
    this.age = 0;
    setInterval(() => {
      this.age++; // this 指向 Person 的实例
    }, 1000);
  }
  const p = new Person(); // age 每秒自增

  6.总结

• 箭头函数的 this：继承自定义时的外层作用域，且不可更改。

• 使用场景：需要固定 this 时（如回调、事件处理、setTimeout）。

• 避免场景：需要动态 this 时（如对象方法、构造函数）。

通过理解箭头函数的词法 this 特性，可以更灵活地控制代码中的上下文绑定。