ECMAScript-顶层对象

一、ECMAScript-顶层对象

顶层对象，在浏览器环境下指的是window对象，在Node中就是指global对象。ES5中全局变量和顶层对象挂钩在一起【普遍认为败笔之一】，从ES6开始，全局变量和顶层对象进行脱离，但也对ES5进行了兼容。也就造就了var和let/const之间的区别。

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

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

ES2020之前，如果需要获取一个顶层对象，不会出问题就需要如下判断：

// 方式一：
var getGlobal = (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即可。

在vue项目中下，你会发现：

sessionStorage和global.sessionStorage和globalThis.sessionStorage 是一个玩意