理解 JavaScript 中的 this 关键字-JavaScript中文网-JavaScript教程资源分享门户

JavaScript 中的 this 关键字是很多前端开发者经常会遇到但容易混淆的概念。在不同的场景中，this 的指向可能会有所不同，这很容易导致bug。本文将介绍this的概念及其指向，帮助你更好地理解 JavaScript，并提供一些实例和示例代码来展示 this 的用法，帮助你更好地使用它。

什么是 this？

在 JavaScript 中，this是一个关键字，通常用于引用当前运行的函数的上下文环境。换句话说，它引用的是当前上下文中的对象。它可以用在函数内部，也可以用在全局上下文中，取决于其被调用的方式。

需要注意的是，在 JavaScript 中，this 的值只有在函数被调用时才能确定，而不是在函数被定义时。这意味着，同一个函数在不同的上下文中，this 的值可能会不同。

this 的指向

在 JavaScript 中，this 的指向可以分为以下几类：

全局对象

当函数不作为对象的方法被调用时，this 指向全局对象，即window（浏览器中）或 global(NodeJS 中)。

function test() {
  console.log(this === window); // true，在浏览器中为 true，在NodeJS 中为false
}

test();

对象方法

当函数作为对象的方法被调用时， this 指向该对象。

const obj = {
  name: "Tom",
  printName() {
    console.log(this.name);
  }
}

obj.printName(); // "Tom"

构造函数

当使用 new 关键字创建一个对象时， this 指向创建的对象。

function Person(name) {
  this.name = name;
}

const person = new Person("Tom");
console.log(person.name); // "Tom"

函数的 `apply` 和 `call` 方法

Function.prototype.apply 和 Function.prototype.call 方法可以显式地指定 this，传入的参数即为指定的 this 值。

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

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

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

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

箭头函数

箭头函数的 this 取决于箭头函数被创建时所处的上下文中的 this 值，而不是函数的调用方式。

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

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

总结

this 是一个非常重要的概念，在 JavaScript 中被广泛使用，了解及使用 this 将有助于大大提高你的 JavaScript 开发技能。希望本文有助于你更好地理解 this，并为你在编写 JavaScript 代码时提供帮助。

参考链接

MDN Web Docs: this

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

理解 JavaScript 中的 this 关键字