理解ES2018中的Realms

这几天看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这个概念了。 我只是一个虽然写了两年前端,但是一直在业务逻辑徘徊的小白,所以如果我这里有什么写错、解释错的地方,希望大家评论或者私信帮我更正,?感谢!

本文章由javascript技术分享原创和收集

发表评论 (审核通过后显示评论):