ES6顶层对象与global对象详解

ES6顶层对象与global对象详解

本文通过具体实例，详细解析ES6中顶层对象与global对象的相关概念，供读者参考学习。

顶层对象

顶层对象

在浏览器环境中，顶层对象通常指window；而在Node.js环境中，则指global。在ES5标准之前，顶层对象的属性与全局变量在语义上是等价的。

window.a = 1;
a // 1
a = 2;
window.a // 2

上述代码示例展示了顶层对象属性赋值与全局变量赋值实际上是同一操作。

ES6规范明确规定，使用var命令和function命令声明的全局变量，依然保留为顶层对象的属性；而使用let命令、const命令以及class命令声明的全局变量，则不再属于顶层对象的属性。

这意味着，自ES6起，全局变量将逐渐与顶层对象的属性分离。

var a = 1;
// 如果在Node的REPL环境，可以写成global.a
// 或者采用通用的方法，写成this.a
window.a // 1
let b = 1;
window.b // undefined

global对象

global对象

ES5中的顶层对象存在一个显著问题，即其在不同运行环境中的定义并不统一。

首先，在浏览器中顶层对象是window，但Node.js和Web Worker环境中并不存在window。

其次，在浏览器和Web Worker中，self变量指向顶层对象，但Node.js环境中没有self。

再次，在Node.js中顶层对象是global，但其他运行环境并不支持global。

为了使同一段代码能在各种环境中获取到顶层对象，目前通常采用this变量，但这存在局限性。目前很难找到一种能在所有情况下都获取顶层对象的方法。以下是两种勉强可用的解决方案：

// 方法1
(typeof window !== 'undefined' ? window : (typeof process === 'object' && typeof require === 'function' && typeof global === 'object') ? global : this);
// 方法2
var getGlobal = function (){
 if(typeof self !== 'undefined'){return self;}
 if(typeof window !== 'undefined'){return window;}
 if(typeof global !== 'undefined'){return global;}
 throw new Error('unable to locate global object');
};

目前有一个提案，建议在语言标准层面引入global作为统一的顶层对象。这意味着在所有环境下，global对象都将存在，并可从中获取顶层对象。

// CommonJS的写法
var global = require('system.global')();
// ES6模块的写法
import getGlobal from 'system.global';
const global = getGlobal();

上述代码演示了如何将顶层对象赋值给变量global。

如需了解更多JavaScript相关知识，可查阅本站系列教程，包括《javascript面向对象入门教程》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》以及《JavaScript数学运算用法总结》。

希望本文的阐述能对大家的JavaScript程序设计有所帮助。