这几天看winter的在课程中提到Realms，来来回回看了很多遍的标准和老师的解释，还google了很多文章，感觉对Realms的讲解大部分都是直接翻译标准，然后让我们在这里来实际感受一下Realms。
Realms溯源
先上原版标准：
Before it is evaluated, all ECMAScript code must be associated with a realm. Conceptually, a realm consists of a set of intrinsic objects, an ECMAScript global environment, all of the ECMAScript code that is loaded within the scope of that global environment, and other associated state and resources.
再看组成：
- a set of intrinsic objects(一组内置对象)
- global environment （一个全局环境）
- code （在上面这个全局环境中加载的所有代码）
- state and resources （状态和资源）
a set of intrinsic objects(一组内置对象)
包含了所有js基本内置对象以及宿主环境中的的内置对象，比如：Object,Array,String,Number,Date,Error,Symbol等，来看一段代码：
代码1
Array.prototype.__proto__ === Object.prototype // true
用===符号来对比两个object，是只有当两个对象为普通简单的复制关系才能为true:
代码2
const a = {}
const b = {}
const c = a
console.log(a === b) // false
console.log(a === c) // true
所以Array中的原型的隐式原型就是复制Object的原型的
以此得出：内置对象之间的关系是复制关系。
这是一张js基本内置对象的关系图：
截屏2020-07-17 上午10.35.39.png
global environment （一个全局环境）
比如在当前页面中，全局环境就是window，但是需要注意的是，在不同全局环境中的Realms是不同的，可以看作在创建环境前，会新new一个Realms, 而里面所有的内置对象也会是全新的。
所以比如在当前页面中创建iframe，而对iframe中创建的对象和当前页面中创建的对象用intanceof比较当前页面中的Object，得到的结果是只有当前页面中的对象是true，而在iframe中创建的对象是false，即虽然两个对象的原型都是Object，但是这两个Object是分开创建的所以不同，上代码：
代码3
const iframe = document.createElement('iframe')
document.documentElement.appendChild(iframe)
iframe.src="javascript:var b = {};"
var b1 = iframe.contentWindow.b; // 这是在iframe中创建的对象，也就是在不同Realms中的对象
var b2 = {};
console.log(typeof b1, typeof b2); //object，两个都是object。
objectconsole.log(b1 instanceof Object, b2 instanceof Object); //false true iframe中创建的对象与当前的内置对象Object是不同的。
code （在上面这个全局环境中加载的所有代码）
这很好理解，就是在环境内的代码，用上面的代码来解释就是：
当前页面：上面代码3中所有的代码
iframe页面：var b = {};
state and resources （状态和资源）
ummmm，这里我还没理解透彻，好像没有特别具体的例子，看到的大佬们可以点拨我一下吗？
总结
其实从看到Realms这个概念已经有一个多月，但是当时觉得这个概念离我太远只是跳过去而已，现在重新去找到源头，并且把概念拆分开来理解，并且随着自己多次尝试和翻阅查找资料，发现这个概念好像并没有多难理解。只是在以前写代码中没有很注意，其实是从刚开始接触javascript就在接触Realms这个概念了。
我只是一个虽然写了两年前端，但是一直在业务逻辑徘徊的小白，所以如果我这里有什么写错、解释错的地方，希望大家评论或者私信帮我更正，🙏感谢！
网友评论