解释 JavaScript Runtime 的 Global Object (window, globalThis) 和 Realm (提案) 的概念，以及它们如何提供不同上下文的隔离。

JavaScript 上下文大冒险：Global Object、GlobalThis 和 Realm

大家好！我是你们今天的上下文探险向导。今天咱们要聊聊 JavaScript 运行时的几个重要概念：Global Object、GlobalThis 以及 Realm (提案)。别担心，虽然名字听起来高大上，但咱们会用最接地气的方式，把它们扒个精光。

首先，想象一下，JavaScript 代码就像一个演员，需要在舞台（也就是运行环境）上表演。而 Global Object、GlobalThis 和 Realm，就是这个舞台上的几个重要组成部分，它们决定了演员能拿到哪些道具（全局变量、函数），以及舞台的大小和布局。

第一幕：Global Object 的独白

Global Object，顾名思义，就是全局对象。它是 JavaScript 运行环境提供的最顶层的对象，所有全局变量、函数，以及一些内置的对象（比如 Math、Date）都作为它的属性存在。

在浏览器环境中，这个 Global Object 通常就是 window 对象。你可以通过 window.myVariable 来访问全局变量 myVariable，也可以直接使用 myVariable，效果是一样的。

// 在浏览器中
window.myVariable = "Hello from window!";
console.log(window.myVariable); // 输出: Hello from window!
console.log(myVariable);       // 输出: Hello from window!

function myFunction() {
  console.log("Hello from myFunction!");
}

window.myFunction(); // 输出: Hello from myFunction!
myFunction();       // 输出: Hello from myFunction!

在 Node.js 环境中，Global Object 则是 global 对象。

// 在 Node.js 中
global.myVariable = "Hello from global!";
console.log(global.myVariable); // 输出: Hello from global!
console.log(myVariable);       // 输出: ReferenceError: myVariable is not defined

function myFunction() {
  console.log("Hello from myFunction!");
}

global.myFunction(); // 输出: Hello from myFunction!
myFunction();       // 输出: ReferenceError: myFunction is not defined

注意到了吗？在 Node.js 中，直接访问全局变量或函数会报错。这是因为 Node.js 的模块机制会把代码包裹在一个函数作用域中，只有显式地挂载到 global 对象上，才能成为真正的全局变量。

Global Object 的问题：平台差异

不同的 JavaScript 运行环境（浏览器、Node.js、Web Workers 等）使用的 Global Object 名称不一样，这就给跨平台开发带来了麻烦。如果你想写一段既能在浏览器运行，也能在 Node.js 运行的代码，就不得不判断当前运行环境，然后使用不同的 Global Object 名称。

// 跨平台兼容写法 (比较丑陋)
let globalObject;

if (typeof window !== 'undefined') {
  globalObject = window;
} else if (typeof global !== 'undefined') {
  globalObject = global;
} else {
  globalObject = {}; // 兜底方案
}

globalObject.myVariable = "Hello from everywhere!";
console.log(globalObject.myVariable);

这种写法不仅冗余，而且容易出错。有没有更好的办法呢？

第二幕：GlobalThis 的华丽登场

为了解决 Global Object 的平台差异问题，ES2020 引入了 globalThis。globalThis 是一个标准化的全局对象，无论在哪个 JavaScript 运行环境中，它都指向当前环境的 Global Object。

// 跨平台兼容的写法 (优雅多了)
globalThis.myVariable = "Hello from globalThis!";
console.log(globalThis.myVariable); // 无论在浏览器还是 Node.js，都能正确输出

globalThis 就像一个万能转换器，屏蔽了不同平台 Global Object 的差异，让我们可以用更简洁、更优雅的方式访问全局对象。

GlobalThis 的兼容性

虽然 globalThis 已经成为标准，但有些老版本的浏览器可能不支持。为了兼容这些老版本，我们可以使用 Polyfill。

// Polyfill for globalThis
(function() {
  if (typeof globalThis === 'object') return;
  Object.defineProperty(globalThis, 'globalThis', {
    value: this,
    writable: true,
    configurable: true
  });
})();

globalThis.myVariable = "Hello from globalThis with polyfill!";
console.log(globalThis.myVariable);

这段 Polyfill 代码会检查当前环境是否已经定义了 globalThis，如果没有，就自己定义一个。

第三幕：Realm 的神秘面纱

Global Object 和 GlobalThis 解决了访问全局对象的问题，但它们没有解决另一个重要的问题：上下文隔离。

想象一下，你在一个网页中嵌入了另一个网页的 iframe。这两个网页运行在同一个浏览器环境中，共享同一个 window 对象。这意味着，iframe 中的代码可以访问、甚至修改主网页的全局变量和函数，这可能会导致安全问题。

Realm 提案就是为了解决这个问题而生的。Realm 可以理解为一个独立的 JavaScript 执行环境，它拥有自己的 Global Object 和内置对象。不同的 Realm 之间是隔离的，一个 Realm 中的代码无法访问另一个 Realm 中的 Global Object。

Realm 的作用

Realm 的主要作用是提供上下文隔离，它可以用于以下场景：

• 安全沙箱： 将不受信任的代码运行在 Realm 中，防止其访问主环境的敏感数据。
• 模块隔离： 将不同的模块运行在不同的 Realm 中，防止模块之间的命名冲突和依赖混乱。
• 多版本共存： 在同一个页面中运行多个版本的 JavaScript 库，每个版本运行在自己的 Realm 中，互不干扰。

Realm 的 API (提案)

Realm API 目前还是提案阶段，还没有被所有浏览器支持。以下是一些常用的 Realm API：

• new Realm()：创建一个新的 Realm。
• realm.globalThis：访问 Realm 的 Global Object。
• realm.evaluate(code)：在 Realm 中执行代码。
• realm.importValue(specifier, exportName): 从 Realm 中导入一个值。

Realm 的使用示例 (基于提案)

// 创建一个新的 Realm
const realm = new Realm();

// 在 Realm 中定义一个变量
realm.evaluate('globalThis.myVariable = "Hello from Realm!";');

// 从 Realm 中访问变量
console.log(realm.globalThis.myVariable); // 输出: Hello from Realm!

// 主环境无法直接访问 Realm 中的变量
console.log(globalThis.myVariable); // 输出: undefined (或者之前定义的值)

// 在主环境中定义一个变量
globalThis.myVariable = "Hello from main!";

// 从 Realm 中导出变量
const myVariableFromRealm = realm.importValue('globalThis', 'myVariable');

// 从主环境导入变量
const myVariableFromMain = globalThis.myVariable;

// 检查值
console.log(`Value from Realm: ${myVariableFromRealm}`); // 输出: Value from Realm: undefined
console.log(`Value from Main: ${myVariableFromMain}`); // 输出: Value from Main: Hello from main!

// 在 Realm 中执行代码
realm.evaluate(`
  globalThis.myFunction = function() {
    return "Hello from Realm's function!";
  };
`);

// 从 Realm 中导出函数
const myFunctionFromRealm = realm.importValue('globalThis', 'myFunction');

// 执行导出的函数
console.log(myFunctionFromRealm()); // 输出: Hello from Realm's function!

在这个例子中，我们创建了一个新的 Realm，并在其中定义了一个变量 myVariable。主环境无法直接访问 Realm 中的 myVariable，反之亦然。通过 importValue 可以从Realm中导出值，但是由于 myVariable 没有被显式导出，所以 myVariableFromRealm 值为 undefined。

Realm 的局限性

Realm 提案还处于早期阶段，存在一些局限性：

• 兼容性： 只有部分浏览器支持 Realm API。
• 性能： 创建和管理 Realm 会消耗一定的性能。
• 复杂性： 使用 Realm 需要理解其工作原理和 API，增加了代码的复杂性。

总结：Global Object, GlobalThis, Realm 的对比

为了更清晰地理解这三个概念，我们用一个表格来总结它们的区别：

特性	Global Object	GlobalThis	Realm (提案)
定义	全局对象，所有全局变量和函数的容器	标准化的全局对象，指向当前环境的 Global Object	独立的 JavaScript 执行环境，拥有自己的 Global Object
作用	提供全局访问点	解决 Global Object 的平台差异	提供上下文隔离
平台差异	不同平台名称不同（window, global）	统一的名称，跨平台兼容	隔离的执行环境，互不影响
兼容性	所有浏览器都支持	ES2020 引入，部分老版本浏览器需要 Polyfill	提案阶段，部分浏览器支持
使用场景	访问全局变量、函数	跨平台开发	安全沙箱、模块隔离、多版本共存
代码示例	window.myVariable, global.myFunction()	globalThis.myVariable	new Realm(), realm.evaluate()

第四幕：代码示例加深理解

让我们用一些更实际的例子来加深对这些概念的理解。

示例 1：使用 GlobalThis 实现跨平台模块

假设我们想创建一个跨平台的模块，用于获取当前运行环境的信息。

// env.js
(function() {
  let environment;

  if (typeof window !== 'undefined') {
    environment = 'browser';
  } else if (typeof process !== 'undefined' && process.versions && process.versions.node) {
    environment = 'node';
  } else {
    environment = 'unknown';
  }

  globalThis.environment = environment;
})();

// 使用模块
console.log(globalThis.environment); // 输出: browser 或 node 或 unknown

这个模块使用了 globalThis 来定义全局变量 environment，无论在浏览器还是 Node.js 中，都可以通过 globalThis.environment 访问当前运行环境的信息。

示例 2：使用 Realm 实现安全沙箱 (基于提案)

假设我们想在一个网页中运行一段用户提交的 JavaScript 代码，但又不希望这段代码访问主环境的敏感数据。

<!DOCTYPE html>
<html>
<head>
  <title>Realm 安全沙箱</title>
</head>
<body>
  <textarea id="userCode"></textarea>
  <button id="runCode">运行代码</button>
  <div id="output"></div>

  <script>
    const userCodeInput = document.getElementById('userCode');
    const runCodeButton = document.getElementById('runCode');
    const outputDiv = document.getElementById('output');

    runCodeButton.addEventListener('click', () => {
      const userCode = userCodeInput.value;

      // 创建一个新的 Realm
      const realm = new Realm();

      // 在 Realm 中定义 console.log 函数，将输出重定向到 outputDiv
      realm.evaluate(`
        globalThis.console = {
          log: function(message) {
            // Post message back to main realm
            globalThis.postMessage({ type: 'log', message: message });
          }
        };
      `);

      // Listen for messages from the realm
      window.addEventListener('message', (event) => {
        if (event.source === realm.globalThis) {
          if (event.data.type === 'log') {
            outputDiv.textContent += event.data.message + 'n';
          }
        }
      });

      // 在 Realm 中执行用户代码
      try {
        realm.evaluate(userCode);
      } catch (error) {
        outputDiv.textContent += 'Error: ' + error.message + 'n';
      }
    });
  </script>
</body>
</html>

在这个例子中，我们创建了一个新的 Realm，并将用户提交的代码运行在其中。为了防止用户代码访问主环境的 console.log 函数，我们在 Realm 中重新定义了 console.log 函数，将输出重定向到页面上的 outputDiv。

结语：上下文探险的终点

通过今天的探险，我们了解了 JavaScript 运行时的几个重要概念：Global Object、GlobalThis 和 Realm。它们分别扮演着不同的角色，共同构建了 JavaScript 代码的运行环境。

• Global Object 提供了全局访问点，但存在平台差异。
• GlobalThis 解决了 Global Object 的平台差异问题，让跨平台开发更加方便。
• Realm 提供了上下文隔离，增强了 JavaScript 代码的安全性。

虽然 Realm 提案还处于早期阶段，但它代表了 JavaScript 发展的一个重要方向：更加安全、更加模块化、更加灵活。

希望今天的讲座能帮助你更好地理解 JavaScript 的运行机制。下次再见！