当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScriptRealm是什么？iframe如何隔离环境

JavaScriptRealm是什么？iframe如何隔离环境

2025-10-10 17:00:53 0浏览收藏

推广推荐

支持 PC / 移动端，安全直达

在 JavaScript 中，Realm 是一个独立的执行环境，它拥有自己的全局对象、内置对象和执行上下文，相当于一个隔离的“沙箱”。每个 Realm 都有独立的全局作用域，例如浏览器中的 `window` 或 `globalThis` 对象。特别地，`iframe` 默认会创建一个新的 Realm，导致 `iframe` 中的 JavaScript 无法直接访问父页面的变量或函数，除非通过特定的方法进行通信。由于不同 Realm 中的构造函数不共享，因此跨 Realm 时 `instanceof` 会失效，但 `Array.isArray()` 仍然有效。理解 Realm 的概念对于开发插件系统、沙箱环境以及微前端架构至关重要，需要特别注意类型判断和对象传递的处理。

JavaScript的Realm是包含全局对象、内置对象和执行上下文的独立运行环境，每个iframe对应一个独立Realm，导致不同Realm中构造函数不共享，跨Realm时instanceof失效但Array.isArray()仍有效，因此在插件系统、沙箱、微前端等场景中需注意类型判断与对象传递的处理。

什么是 JavaScript 的 Realm 概念，它与 iframe 的全局对象有何关系？

JavaScript 的 Realm 是一个包含 JavaScript 全局对象（如 window 或 globalThis）及其关联的内置对象（如 Array、Object、Function 等）和执行上下文的运行环境。每个 Realm 拥有自己独立的全局作用域，这意味着它有一套独立的原始构造函数和内置类型实例。

Realm 的基本组成

一个 Realm 包括：

一个全局对象（例如浏览器中的 window）
一套与该全局对象绑定的内置对象（如 Array、Date、Promise 等）
对应的执行上下文（包括变量环境、词法环境等）

这些组成部分共同构成了一个隔离的 JavaScript 执行环境。不同 Realm 中的同名构造函数实际上是不同的引用，即使它们功能相同。

iframe 与多个 Realm 的关系

在浏览器中，每个 iframe 都拥有自己的 JavaScript 执行环境。尽管主页面和 iframe 可能共享同一个域名，但它们分别对应不同的 Realm。

这意味着：

主页面中的 Array 构造函数和 iframe 中的 Array 不是同一个函数
从 iframe 返回的一个数组，在主页面中使用 Array.isArray() 虽然仍返回 true，但如果手动比较构造函数（如 arr.constructor === Array），可能因为跨 Realm 而不成立
跨 Realm 的对象需要通过结构化克隆或其他方式传递，不能直接共享原型链

跨 Realm 类型判断的问题

由于不同 Realm 各自维护内置对象，以下代码可能出错：

const iframe = document.createElement('iframe');
document.body.appendChild(iframe);
const ifWin = iframe.contentWindow;
const arr = new ifWin.Array(1, 2, 3);

console.log(arr instanceof Array); // false！
console.log(Array.isArray(arr)); // true（特殊处理）

instanceof 失效是因为它检查原型链是否指向当前 Realm 的 Array.prototype，而跨 Realm 的对象指向另一个 Realm 的原型。因此推荐使用 Array.isArray() 这类标准方法进行类型判断，它们对跨 Realm 场景做了兼容。