揭开this的面纱：JavaScript弃坑之路之原来是这样的

this: JavaScript 世界中神秘而迷人的变量

执行环境：this 的指向之锚

在 JavaScript 的浩瀚海洋中，this 犹如一艘幽灵船，游弋在不同的执行环境中，指向不同的对象。想要驾驭这艘船，首先要了解其停靠的港湾——执行环境。

在浏览器中，执行环境主要分为两类：全局环境 和函数环境 。

全局环境：this 的归宿是 window

当代码在全局范围内执行时，this 就像一位忠诚的仆人，指向其主子——window 对象。window 对象是浏览器的掌舵人，统领着全局变量、函数和对象。因此，在全局环境中，this 等同于 window。

函数环境：this 的指向由函数的舵手决定

当代码在函数内部执行时，this 的指向取决于函数的调用方式。

普通函数调用：this 的去处是茫茫未知

在普通函数调用中，this 就像一叶孤舟，漂浮在函数的虚空之中，指向 undefined。这是因为普通函数没有明确的所属对象。

function myFunction() {
  console.log(this); // 输出: undefined
}

myFunction();

方法调用：this 找到自己的归属

当函数作为对象的方法被调用时，this 终于找到了自己的归属——指向该对象。

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

person.sayHello();

构造函数调用：this 创造新世界

当函数作为构造函数被调用时，this 宛如一位创造者，指向新创建的对象。

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

const john = new Person("John");
console.log(john.name); // 输出: John

除了这些基本规则，还有几个值得注意的特殊情况：

• 箭头函数中，this 指向其父级作用域中的 this。
• 严格模式下，this 在普通函数调用中指向 undefined，而在松散模式下指向全局对象。

结论：掌握 this，JavaScript 世界不再神秘

掌握了 this 的指向规则，你就能在 JavaScript 的编程海洋中乘风破浪，再也不惧怕 this 的波涛。愿这篇文章成为你的航海指南，助你扬帆起航，自由驰骋！

常见问题解答

1. this 在箭头函数中总是指向什么？

   答：箭头函数中的 this 指向其父级作用域中的 this。

2. 为什么普通函数调用中的 this 是 undefined？

   答：普通函数没有明确的所属对象，因此 this 指向 undefined。

3. 如何让普通函数调用中的 this 指向特定的对象？

   答：可以使用 bind() 或 call() 方法将 this 绑定到特定的对象。

4. 构造函数调用中，为什么 this 指向新创建的对象？

   答：构造函数的目的是创建新的对象，this 自然指向新创建的对象。

5. 严格模式和松散模式下，this 在普通函数调用中的指向有何区别？

   答：在严格模式下，this 指向 undefined；在松散模式下，this 指向全局对象。