请解释 JavaScript 中的 this 指向问题。在全局上下文、函数上下文、对象方法和构造函数中，this 分别指向什么？

推荐答案

JavaScript 中 this 的指向取决于函数被调用的方式。其指向大致可分为以下几种情况：

1. 全局上下文： 在全局作用域中（函数体外部），this 通常指向全局对象。在浏览器环境中，全局对象是 window；在 Node.js 环境中，全局对象是 global。

2. 函数上下文：

   • 普通函数调用： 在非严格模式下，函数内部的 this 指向全局对象（window 或 global）。在严格模式（'use strict';）下，this 的值为 undefined。
   • 箭头函数调用： 箭头函数没有自己的 this，它会捕获其所在上下文的 this 值，也就是定义时所在作用域的 this 值。

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

4. 构造函数： 当使用 new 关键字调用函数作为构造函数时，函数内部的 this 指向新创建的对象实例。

本题详细解读

1. 全局上下文中的 this

在全局作用域（即不在任何函数内部）中，this 指向全局对象。

console.log(this === window); // 在浏览器中输出 true
console.log(this === global); // 在 Node.js 中输出 true

var a = 10;
console.log(this.a); // 输出 10 （在浏览器中，window.a === a）

2. 函数上下文中的 this

2.1 普通函数调用

在普通函数调用时，this 的指向取决于是否处于严格模式。

• 非严格模式：

  function foo() {
      console.log(this === window); // 在浏览器中输出 true
      console.log(this); // 输出 window 对象
  }
  
  foo();

• 严格模式：

  function foo() {
      'use strict';
      console.log(this === undefined); // 输出 true
      console.log(this); // 输出 undefined
  }
  
  foo();

2.2 箭头函数调用

箭头函数没有自己的 this，它会继承父作用域的 this 值。

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

-----------


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

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

--------

3. 对象方法中的 this

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

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

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

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

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

4. 构造函数中的 this

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

function Person(name) {
    this.name = name;
    console.log(this === p) // 在 new 调用时输出 true
}

const p = new Person('Alice');
console.log(p.name); // 输出 "Alice"
console.log(p instanceof Person); // 输出 true

在构造函数中，this 会经历以下步骤：

1. 创建一个空对象。
2. 将 this 指向这个新创建的对象。
3. 执行构造函数中的代码，为对象添加属性和方法。
4. 如果构造函数没有返回对象，则隐式返回 this 指向的新对象；如果返回的是非对象，则忽略返回值，仍然返回新对象，如果返回值是对象，则返回该对象，而不是新对象。