从执行上下文看 JavaScript 中 this 的指向与陷阱

全局执行上下文中的 this

在全局执行上下文中，this 始终指向全局对象。在浏览器环境中，这个全局对象是 window。这也是 this 与作用域链产生交互的唯一节点，因为作用域链的最底层即包含 window 对象。因此，在非严格模式下，顶层代码中的 this 等同于 window。

函数执行上下文中的 this

函数的 this 指向取决于其调用方式，而非定义位置。常见的几种情况如下：

第 1 步：通过函数直接调用识别 this 指向

当一个普通函数被直接调用时，其内部的 this 同样指向全局对象 window。这是 JavaScript 早期的设计特性，虽然方便但容易导致全局变量污染。

function foo() {
  console.log(this);
}
foo(); // 输出 window

第 2 步：通过 call/apply/bind 显式绑定 this

可以通过函数的内置方法强制改变执行上下文中的 this 值，这在实现方法复用或类式继承时非常有用。

let bar = {
  myName: "极客邦",
};
function foo() {
  this.myName = "极客时间";
}
foo.call(bar); // 将 foo 的 this 绑定到 bar
console.log(bar.myName); // 输出 "极客时间"
console.log(myName); // 报错：myName is not defined (未创建全局变量)

第 3 步：通过对象方法调用确定 this 指向

当通过对象属性访问并调用一个函数时（即 object.method()），该方法内部的 this 指向该调用对象本身。

var myObj = {
  name: "极客时间",
  showThis: function () {
    console.log(this);
  },
};
myObj.showThis(); // 输出 myObj

注意：如果将该方法赋值给一个独立变量后调用，this 将不再指向原对象，而是回退到全局 window。

var foo = myObj.showThis;
foo(); // 输出 window

第 4 步：在构造函数中使用 new 关键字

使用 new 关键字调用构造函数时，JavaScript 引擎会执行一系列隐式操作：
1. 创建一个全新的空对象。
2. 将构造函数的 this 指向该新对象。
3. 执行构造函数体内的代码为新对象添加属性。
4. 返回新对象。

function CreateObj() {
  this.name = "极客时间";
}
var myObj = new CreateObj(); // myObj.name 为 "极客时间"

this 的设计缺陷及应对方案

问题一：嵌套函数无法继承外层 this

在对象方法内部定义一个普通子函数时，子函数内的 this 不会继承外层的 this，而是重新指向 window。这是因为嵌套的普通函数也是被作为普通函数调用的。

var myObj = {
  name: "极客时间",
  showThis: function () {
    console.log(this); // 指向 myObj
    function bar() {
      console.log(this); // 指向 window
    }
    bar();
  },
};

解决策略 A：使用箭头函数（推荐）
ES6 引入的箭头函数不拥有自己的执行上下文，其内部的 this 由外层最近的一层非箭头函数决定。这使得处理回调函数时的 this 指向更加直观。

showThis: function () {
  var bar = () => {
    console.log(this); // 正确指向 myObj
  };
  bar();
}

解决策略 B：缓存 this 变量
在旧版环境中，可以通过声明 var that = this; 将外层 this 保存下来供内层使用。

问题二：普通函数默认指向全局对象导致的副作用

在大型项目中，无意中将 this 指向全局窗口可能导致意外的全局变量覆盖。为规避此风险，建议在模块文件头部开启严格模式 ('use strict';)。在严格模式下，普通函数直接调用时，this 的值变为 undefined，从而强制开发者明确指定 this 的指向，避免隐性的全局污染。

总结

掌握 JavaScript 的 this 机制核心在于观察“谁调用了函数”。无论是全局调用、对象方法调用还是构造函数调用，理清执行上下文的关系能有效预防 bug。结合箭头函数特性与严格模式，可以在现代开发中更安全地处理复杂的上下文切换。

以上就是JavaScript 执行上下文的视角详解this使用的详细内容，更多关于JavaScript this指向与执行上下文的文章资料请关注本站其它相关文章！