JS 中 this 的本质：从 ES6+ 角度解读

2024-02-12 15:03:08

前言

作为 JavaScript 中最令人困惑的机制之一，this 经常让开发人员抓耳挠腮。它在不同的场景下表现出不同的行为，有时会让人感到难以捉摸。为了彻底搞懂 JavaScript 中的 this，我们需要结合 ES6+ 的一些语法重新梳理下，以便更好地理解 this 在不同情况下的工作原理。

this 的本质

在 JavaScript 中，this 是一个特殊的，它指向当前执行代码的对象。通俗地说，它代表着当前正在运行的代码所处的上下文环境。this 的值可以在函数、对象和全局作用域中使用。

this 在函数中的行为

1. 全局作用域中的 this

在全局作用域中，this 指向 window 对象。这意味着，当我们在全局作用域中使用 this 时，实际上是在访问 window 对象。例如：

console.log(this); // 输出: Window {}

2. 函数中的 this

在函数中，this 的值取决于函数的调用方式。如果函数作为普通函数调用，那么 this 指向 window 对象。例如：

function sayHello() {
  console.log(this); // 输出: Window {}
}

sayHello();

3. 方法中的 this

在方法中，this 指向方法所属的对象。例如：

const person = {
  name: "John Doe",
  sayHello() {
    console.log(this); // 输出: { name: "John Doe" }
  }
};

person.sayHello();

ES6+ 中 this 的新特性

1. 箭头函数中的 this

箭头函数是一个 ES6 中引入的新特性，它使用 => 符号定义。箭头函数没有自己的 this，它会继承其外层函数的 this。例如：

const person = {
  name: "John Doe",
  sayHello() {
    const arrowFunction = () => {
      console.log(this); // 输出: { name: "John Doe" }
    };

    arrowFunction();
  }
};

person.sayHello();

2. 类中的 this

ES6 中引入了 class 语法，它使 JavaScript 支持了面向对象编程。在类中，this 指向类的实例。例如：

class Person {
  constructor(name) {
    this.name = name;
  }

  sayHello() {
    console.log(this); // 输出: Person { name: "John Doe" }
  }
}

const person = new Person("John Doe");
person.sayHello();