【JavaScript】普通函数与箭头函数中的 this 详解

在 JavaScript 中，this 是一个复杂且容易让人困惑的概念，尤其在不同类型的函数中表现得不尽相同。普通函数和箭头函数是 JavaScript 中常用的两类函数，它们在处理 this 关键字时有显著差异。理解这些差异对于编写更加健壮的 JavaScript 代码至关重要。本文将深入解析这两种函数的 this 表现方式，帮助你在项目中灵活运用。

一、JavaScript 中的 this 概述

1. 什么是 this？

this 是 JavaScript 中的一个特殊关键字，通常用来引用函数执行时的上下文（context）。这个上下文指的是当前代码执行时，this 所指向的对象。不同的执行环境和调用方式会导致 this 指向不同的对象，因此 this 具有动态绑定的特点。

2. 普通函数中的 this

在普通函数中，this 的值取决于函数的调用方式。函数可以作为对象的方法、构造函数、全局函数或通过 call、apply 和 bind 等方法调用，每种情况下 this 的指向都有所不同。

3. 箭头函数中的 this

与普通函数不同，箭头函数的 this 是在函数定义时绑定的，也就是说，箭头函数的 this 指向它所在的词法环境。它不会像普通函数一样根据调用方式来动态改变 this 的指向。

二、普通函数与箭头函数的区别

1. 普通函数中的 this 动态绑定

在普通函数中，this 取决于函数的调用方式。以下代码展示了普通函数如何根据不同的调用方式绑定 this。

function normalFunction() {
  console.log(this);
}

// 作为方法调用，this 指向调用它的对象
const obj = {
  name: 'Object',
  method: normalFunction
};
obj.method(); // this 指向 obj

// 作为全局函数调用，this 指向全局对象（在浏览器中为 window）
normalFunction(); // 在严格模式下，this 为 undefined；否则为 window

2. 箭头函数中的 this 词法绑定

箭头函数的 this 在函数定义时就已经确定，不再根据调用方式改变。下面的代码展示了箭头函数的 this 行为。

const arrowFunction = () => {
  console.log(this);
};

// 无论如何调用，箭头函数的 this 始终指向定义时的外层上下文
arrowFunction(); // this 指向箭头函数定义时所在的上下文

在这段代码中，无论 arrowFunction 是在全局环境中还是作为对象的方法调用，this 都会保持不变。箭头函数中的 this 始终与外层环境一致。

三、详细对比：普通函数与箭头函数中的 this

1. 普通函数的 this 绑定规则

普通函数的 this 根据调用方式可以有以下几种情况：

• 全局调用：在非严格模式下，this 指向全局对象（浏览器中为 window）；在严格模式下，this 为 undefined。

  function globalThis() {
    console.log(this);
  }
  globalThis(); // 非严格模式下为 window，严格模式下为 undefined
  

• 作为方法调用：当函数作为对象的方法调用时，this 指向调用它的对象。

  const obj = {
    method: function() {
      console.log(this);
    }
  };
  obj.method(); // this 指向 obj
  

• 构造函数调用：当使用 new 关键字调用普通函数时，this 指向新创建的实例对象。

  function Constructor() {
    console.log(this);
  }
  const instance = new Constructor(); // this 指向新创建的 instance
  

• 通过 call 或 apply 调用：可以通过 call 或 apply 手动指定 this 的指向。

  function withThis() {
    console.log(this);
  }
  const obj = { name: 'Object' };
  withThis.call(obj); // this 指向 obj
  

2. 箭头函数的 this 绑定特性

箭头函数的 this 是在函数定义时绑定的，不能通过调用方式改变。它的 this 始终指向箭头函数定义时的外层作用域。下面是一些典型的例子：

• 箭头函数在对象方法中：即便箭头函数作为对象的方法被调用，它的 this 也不会指向该对象，而是指向箭头函数定义时的外层作用域。

  const obj = {
    method: () => {
      console.log(this);
    }
  };
  obj.method(); // this 指向外层上下文，不是 obj
  

• 箭头函数在事件处理程序中：在事件处理程序中使用箭头函数时，this 指向定义时的上下文，而不是触发事件的 DOM 元素。

  const button = document.querySelector('button');
  button.addEventListener('click', () => {
    console.log(this); // this 指向外层作用域，不是 button
  });
  

四、普通函数与箭头函数中的 this 使用场景

1. 普通函数的使用场景

• 动态上下文需要：如果你需要根据函数的调用方式动态获取 this，普通函数是最佳选择。例如，在对象方法或构造函数中，普通函数的 this 能够正确指向当前实例或调用对象。

  const obj = {
    method: function() {
      console.log(this.name);
    },
    name: 'Object'
  };
  obj.method(); // this 正确指向 obj
  

• 构造函数：普通函数适合用作构造函数，因为 new 关键字能够为它绑定一个新的 this。

  function Person(name) {
    this.name = name;
  }
  const person = new Person('John');
  console.log(person.name); // John
  

2. 箭头函数的使用场景

• 词法上下文保持：当你希望 this 保持与外层上下文一致时，使用箭头函数是最佳选择。例如，在回调函数或定时器中，箭头函数可以避免 this 被改变。

  function Timer() {
    this.seconds = 0;
    setInterval(() => {
      this.seconds++;
      console.log(this.seconds);
    }, 1000);
  }
  const timer = new Timer(); // this 始终指向 Timer 实例
  

• 简化回调函数：在事件处理程序中，箭头函数可以简化代码，避免使用 bind 或 that = this 的模式。

  const obj = {
    name: 'Object',
    logName: function() {
      setTimeout(() => {
        console.log(this.name);
      }, 1000);
    }
  };
  obj.logName(); // this 始终指向 obj
  

五、注意事项

1. this 的滥用

过度依赖 this 可能会增加代码的复杂性，尤其是在箭头函数和普通函数混用时。为了减少混淆，建议在需要动态上下文时使用普通函数，而在需要固定上下文时使用箭头函数。

2. 避免箭头函数作为构造函数

箭头函数不能用作构造函数，因为它们没有 prototype 属性，且 this 在定义时就已绑定。

const ArrowConstructor = () => {};
const instance = new ArrowConstructor(); // TypeError: ArrowConstructor is not a constructor

六、总结

普通函数和箭头函数在 JavaScript 中的 this 处理方式有着显著差异。普通函数的 this 依赖于调用方式，并在不同上下文中表现出不同的绑定行为；而箭头函数则是根据定义时的词法作用域来绑定 this。理解这些差异不仅可以帮助你避免常见的 this 使用错误，还能帮助你更好地编写符合需求的代码。

推荐：

• JavaScript
• react
• vue

---