顶层对象

顶层对象，在浏览器环境指的是 window 对象，在 Node 指的是 global 对象。

ES5

在 ES5 中，顶层对象的属性与全局变量是等价的。这也就意味着，全局定义的变量会被作为顶层对象的属性挂载。

window.a = 1;
a // 1

a = 2;
window.a // 2

顶层对象属性与全局变量等价，存在以下设计问题：

没法在编译时就报出变量未声明的错误，只有运行时才能知道（因为全局变量可能是顶层对象的属性创造的，而属性的创造是动态的）
开发者很容易不知不觉地就创建了全局变量（比如打字出错）
顶层对象的属性是到处可以读写的，这非常不利于模块化编程
顶层对象是一个有实体含义的对象，不适合作为全局变量的挂载对象

ES6

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

ES2020 globalThis 顶层对象

JavaScript 语言存在一个顶层对象，它提供全局环境（即全局作用域），所有代码都是在这个环境中运行。但是，顶层对象在各种实现里面是不统一的：

浏览器里面，顶层对象是 window
Node 和 Web Worker 没有window。Node 里面，顶层对象是global，但其他环境都不支持。

在此之前，为解决不同环境下顶层对象的获取，保证同一段代码能够在各种环境，都能取到顶层对象，一般是使用 this 关键字，但是有局限性：

全局环境中，this 会返回顶层对象。但是，Node.js 模块中 this 返回的是当前模块，ES6 模块中 this 返回的是 undefined (ES6 模块遵循严格模式)。
函数里面的this，如果函数不是作为对象的方法运行，而是单纯作为函数运行，this 会指向顶层对象。但是，严格模式下，这时 this 会返回 undefined。
不管是严格模式，还是普通模式，new Function('return this')()，总是会返回全局对象。但是，如果浏览器用了 CSP（Content Security Policy，内容安全策略），那么eval、new Function这些方法都可能无法使用。

综上所述，很难找到一种方法，可以在所有情况下，都取到顶层对象。下面是两种勉强可以使用的方法。

// 方法一
(typeof window !== 'undefined'
   ? window
   : (typeof process === 'object' &&
      typeof require === 'function' &&
      typeof global === 'object')
     ? global
     : this);

// 方法二
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');
};

ES2020 在语言标准的层面，引入 globalThis 作为顶层对象。也就是说，任何环境下，globalThis 都是存在的，都可以从它拿到顶层对象，指向全局环境下的 this。垫片库 global-this 模拟了这个提案，可以在所有环境拿到 globalThis。

jtwang7 / JavaScript-Note

ES6 - 顶层对象 #42

顶层对象

ES5

ES6

ES2020 globalThis 顶层对象