什么是 JavaScript 的 Realm 概念，它与 iframe 的全局对象有何关系？-js教程-PHP中文网

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

betcha

发布： 2025-09-27 13:41:01

原创

976人浏览过

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。

立即学习“Java免费学习笔记（深入）”；

这意味着：

有道小P

有道小P，新一代AI全科学习助手，在学习中遇到任何问题都可以问我。

查看详情

主页面中的 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 场景做了兼容。