深入解析JavaScript中的`self`：全局对象、Web Workers与`globalThis`的演进与实践357

作为一个专注于深度剖析JavaScript各类知识点的中文知识博主，今天我们将一同揭开一个在JavaScript世界中既基础又时常令人疑惑的概念——`self`。虽然您可能带着`[javascript setslf()]`这样的疑问而来，这并非JavaScript标准库中的函数，但它巧妙地引出了我们真正要探讨的核心：JavaScript中的全局对象`self`、它的演进、作用以及与`window`、`this`和`globalThis`的关系。准备好了吗？让我们深入探索！

大家好，我是你们的老朋友，专注前端技术的那位博主。今天我们要聊的话题，可能源于一些朋友在探索JavaScript全局上下文时遇到的困惑，甚至可能像标题中略显神秘的`[javascript setslf()]`一样，带着一些非标准函数的猜想。首先，我要明确一点：`setslf()`并非JavaScript内置的函数或API。它更像是一个引子，引导我们去思考“设置自身”的可能性，进而引出JavaScript中那个至关重要的、代表“自身”的全局对象——`self`。那么，`self`究竟是什么？它在不同的JavaScript环境中扮演着怎样的角色？以及在现代JavaScript开发中，我们又该如何正确地理解和使用它呢？

在前端开发者的日常工作中，我们频繁地与各种全局对象打交道。其中，`window`无疑是大家最熟悉的老朋友。但在一些特定的场景下，或者在追求更普适、跨环境的代码编写时，`self`这个关键词便会浮出水面。它不仅是浏览器主线程的全局对象，更在Web Workers等非主线程环境中扮演着核心角色。理解`self`，不仅能帮助我们写出更健壮的代码，更能加深我们对JavaScript运行时环境的理解。

`self` 的本源：浏览器主线程中的全局对象

在传统的浏览器主线程环境中，`self`是一个指向全局`window`对象的引用。这意味着，在大多数情况下，`self`和`window`是完全等价的。你可以通过`()`来打印信息，也可以通过`()`来实现相同的效果。它们指向的是同一个全局作用域对象，该对象包含了所有的全局变量、全局函数以及各种浏览器提供的API（如`document`、`navigator`、`localStorage`等）。

为什么会有两个名字指向同一个东西呢？这其中蕴含着历史和跨环境兼容性的考量。最初，`window`是浏览器环境特有的全局对象。然而，随着Web技术的发展，JavaScript开始在更多非浏览器主线程的环境中运行，例如Web Workers。在这些新环境中，并没有`window`这个概念，但它们仍然需要一个全局对象来承载其上下文。因此，`self`作为一个更通用、更抽象的全局对象标识符被引入，旨在提供一个统一的访问全局上下文的方式。

// 在浏览器主线程中
(self === window); // true
( === ); // true
// 可以通过self访问全局变量和函数
= "Hello from self!";
(); // "Hello from self!"
function sayHello() {
("Hello from a global function!");
}
(); // "Hello from a global function!"

`self` 的核心舞台：Web Workers

`self`真正大放异彩的地方，莫过于Web Workers。Web Workers允许我们在后台线程中运行JavaScript，从而避免阻塞主线程，提升用户体验。在Web Worker的执行上下文中，是没有`window`对象的。取而代之的是，`self`成为了该Worker的全局对象。它提供了Worker特定的API，例如`postMessage()`用于与主线程通信，以及`importScripts()`用于加载其他脚本。

在Web Worker中，`self`是访问所有Worker范围内的全局变量、函数和API的唯一途径。这使得`self`在Web Worker编程中变得至关重要，它确保了Worker代码的独立性和封装性，同时又提供了必要的通信机制。

// 文件内容
("Worker 线程中的全局对象:", self); // 会输出WorkerGlobalScope对象
= function(event) {
const data = ;
("Worker 收到消息:", data);
// 在Worker中，通过与主线程通信
("Worker 已经处理了你的消息: " + data);
};
// 在主线程中创建Worker
// const myWorker = new Worker('');
// ('你好，Worker！');
// = function(event) {
// ('主线程收到消息:', );
// };

理解`self`在Web Worker中的角色，是编写高效、非阻塞Web应用的关键。它使得后台任务能够独立运行，而不会干扰到用户界面的响应性。

`self` 与 `this` 的区别：上下文的艺术

另一个常见的混淆点是`self`与`this`。虽然在全局作用域下，`this`也可能指向`window`（非严格模式）或`undefined`（严格模式），但`this`是一个非常动态的关键字，它的值完全取决于函数被调用的方式和上下文。而`self`则是一个静态的、始终指向当前全局对象的引用。

让我们通过几个例子来区分它们：

// 在浏览器主线程中 (非严格模式)
(this === window); // true
(this === self); // true
// 在严格模式下 (文件顶部或函数内部声明)
"use strict";
(this); // 在全局作用域下仍然是window/self
// 但如果在一个普通函数中，this将是undefined
function showContext() {
("函数内部的this:", this);
("函数内部的self:", self);
}
showContext(); // 函数内部的this: window (非严格模式) / undefined (严格模式)
// 函数内部的self: window (始终)
const obj = {
name: "My Object",
greet: function() {
("方法内部的this:", this); // this 指向 obj
("方法内部的self:", self); // self 仍然指向 window
}
};
();

总结来说，`self`提供了一个稳定的、对全局对象的引用，无论代码在哪里执行，`self`总是指向那个特定的全局上下文。而`this`则是一个变化的、依赖于执行上下文的引用。

现代化的全局对象：`globalThis` 的崛起

为了进一步统一JavaScript在各种环境中的全局对象访问方式，ECMAScript 2020 引入了一个新的标准全局属性：`globalThis`。在此之前，在不同的JavaScript环境中访问全局对象需要不同的方法：

浏览器主线程：`window` 或 `self`
Web Workers：`self`
：`global`
ES modules (在浏览器中)：`undefined` 或 `this` (依赖于打包工具和配置)

`globalThis`的出现，旨在提供一个在所有JavaScript环境中都能可靠地引用全局对象的标准方式。这意味着，无论你的代码运行在浏览器、Web Worker、还是其他JavaScript运行时中，`globalThis`都将指向该环境的全局对象。

// 在浏览器主线程中
(globalThis === window); // true
(globalThis === self); // true
// 在中 (如果你在Node环境中运行此代码)
// (globalThis === global); // true
// 在Web Worker中
// (globalThis === self); // true

`globalThis`的引入，极大地简化了编写跨环境兼容JavaScript代码的工作。在现代前端开发中，尤其是在编写库或框架时，推荐优先使用`globalThis`来访问全局对象，以确保最佳的兼容性和可维护性。

回到 `[javascript setslf()]`：深入理解“设置自身”的奥秘

现在，让我们回到文章开头那个神秘的`[javascript setslf()]`。正如前面所说，`setslf()`并非JavaScript的内置函数。然而，这个短语可能反映了开发者希望“设置”或“改变”全局对象的某种心理。

1. 全局对象是不可“设置”的引用：


全局对象（无论是`window`, `self`, `global`, 还是`globalThis`）在运行时是由环境本身提供的，它们是全局作用域的根。你不能像重新赋值一个普通变量那样去“设置”或“替换”整个全局对象。例如，你不能写`self = {}`来创建一个新的全局对象。这样做会导致运行时错误，或者在严格模式下被静默忽略。

2. 自定义函数或框架可能使用类似命名：


尽管不是标准的，但一个自定义的JavaScript库或框架完全可以定义一个名为`setSlf`（或者`setSelf`，`setGlobal`等）的函数。这样的函数通常不会真的去“设置”或“替换”原生的全局对象，而是可能做以下几件事：

模拟或修改全局属性：例如，在一个测试环境中，你可能需要模拟或“设置”``或``的行为。这种情况下，你是在修改全局对象上的*属性*，而不是整个全局对象本身。例如：` = { href: "" };` 或 `(self, 'fetch', { value: myMockFetch });`
管理特定上下文：在一些高度封装的模块或沙盒环境中，开发者可能为了内部管理，定义一个`setSelf(context)`函数，用来切换或设置当前模块内部对“自身”上下文的引用，但这与JavaScript引擎提供的原生全局对象完全是两回事。
误解与命名不当：有时，开发者可能只是因为语义上的联想，将某个与“自身”或“上下文”相关的配置函数命名为`setSlf`，但其内部逻辑与全局对象的直接操作无关。

因此，如果你看到`setslf()`这样的代码，最合理的推测是它要么是一个自定义函数，要么是某种对全局对象属性进行“设置”或模拟操作的简写，而非直接操纵原生的全局对象引用。始终要记住，JavaScript的全局对象是其运行时环境的基石，其引用是不可替换的。

选择哪个：`window`、`self` 还是 `globalThis`？

在了解了三者的区别和演进之后，我们该如何在实际开发中进行选择呢？


`window`: 仅在浏览器主线程中使用，如果你明确知道你的代码只会在这个环境中运行，并且不考虑Web Workers或其他非浏览器环境，那么使用`window`依然是可行的，因为它语义清晰，且历史悠久。


`self`: 在Web Workers中，`self`是唯一的选择。在浏览器主线程中，`self`与`window`等价，你可以使用它来编写在主线程和Worker中都能运行的、更具通用性的代码（尽管仍然需要处理两者API差异）。


`globalThis`: 强烈推荐在现代JavaScript开发中优先使用。 它提供了跨所有JavaScript运行环境的统一全局对象访问方式，是编写可移植、可维护代码的最佳实践。尤其是在开发库、框架或需要跨平台运行的工具时，`globalThis`能显著提升代码的兼容性。

例如，当你需要访问全局的`setTimeout`函数时：


不再需要像过去那样进行环境判断：

// 过去可能需要这样
const globalVar = typeof window !== 'undefined' ? window : (typeof global !== 'undefined' ? global : self);
(() => {}, 1000);



现在，你可以直接使用`globalThis`：

(() => {
("This will run anywhere!");
}, 1000);

总结与展望

从`[javascript setslf()]`这个非标准标题出发，我们深入探讨了JavaScript中真正的全局对象——`self`。我们了解到它在浏览器主线程中是`window`的别名，在Web Workers中是唯一的全局上下文，并与动态变化的`this`关键字有着本质区别。最后，我们迎来了现代JavaScript的统一全局对象——`globalThis`，它为我们带来了前所未有的跨环境兼容性。

理解这些全局对象的细微差别，是成为一名优秀JavaScript开发者的必经之路。它不仅能帮助你避免常见的陷阱，更能让你写出更优雅、更健壮、更具前瞻性的代码。希望通过今天的深入解析，你能对JavaScript的全局上下文有一个更清晰、更全面的认识！未来，当你再次面对类似“设置自身”的疑问时，你将知道如何从标准和实践的角度去思考和解决问题。

2025-11-11

---

上一篇：JavaScript求助指南：从入门到进阶，你的常见问题与解决方案

下一篇：JavaScript的“Safari之痛”：告别`if Safari`，拥抱跨浏览器兼容性最佳实践！