“这个”关键字是如何工作的？

在 JavaScript 中，this 是一个特殊的关键字，它指向当前函数执行的上下文。虽然 this 看似简单，但很多开发者会因为它的难以理解而被困扰。

this 的值

this 的值取决于调用函数时的执行环境。具体来说，有以下几种情况：

• 在全局作用域中，this 指向全局对象（也就是浏览器中的 window 对象，在 Node.js 中是 global 对象）。

console.log(this === window); // true

• 在函数内部，this 取决于该函数的调用方式。如果函数作为对象的方法被调用，this 就指向该对象；否则，this 指向全局对象。

const obj = {
  foo() {
    console.log(this === obj); // true
  }
};

obj.foo();

• 如果使用 new 运算符调用构造函数，this 将指向新创建的实例对象。

function Foo() {
  console.log(this instanceof Foo); // true
}

const foo = new Foo();

• 如果使用 apply()、call() 或 bind() 调用函数，this 将取决于第一个参数。

function bar(name) {
  console.log(`Hello, ${name}! My name is ${this.name}.`);
}

const obj = { name: 'Alice' };

bar.call(obj, 'Bob'); // Hello, Bob! My name is Alice.

指导意义

理解 this 的行为非常重要，因为它在许多 JavaScript 库和框架中被广泛使用。例如，React 中的组件类方法默认不会绑定 this，需要手动绑定或使用箭头函数。

此外，深入理解 this 的工作原理也有助于提高代码的可读性和健壮性。遵循一些最佳实践可以帮助防止出现意外的错误，例如在作用域链上下文中将 this 赋值给另一个变量，以便在嵌套的函数中正确访问它。

示例代码

下面是一些示例代码，演示了 this 的不同行为：

-- -------------------- ---- -------
---------------- --- -------- -- ----

-------- ----- -
  ---------------- --- -------- -- ----
-

------

----- --- - -
  ----- -
    ---------------- --- ----- -- ----
  -
--

----------

-------- ----- -
  ---------------- ---------- ----- -- ----
-

----- --- - --- ------

-------- ----- -
  ------------------- ----------------
-

----- ----- - - ----- ------- --
----- --- - - ----- ----- --

----------------- -- ------ ------
-------------- -- ------ ----

----- --- - ----------------

------ -- ------ ------

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/7325