JS 頂層對象的變遷

頂層對象的屬性

頂層對象，在瀏覽器環境指的是window對象，在 Node 指的是global對象。ES5 之中，頂層對象的屬性與全局變量是等價的。

window.a = 1;
a // 1

a = 2;
window.a // 2

頂層對象的屬性與全局變量掛鉤，這樣的設計帶來了幾個很大的問題：

 

1. 沒法在編譯時就報出變量未聲明的錯誤，只有運行時才能知道（因爲全局變量可能是頂層對象的屬性創造的，而屬性的創造是動態的）；
2. 程序員很容易不知不覺地就創建了全局變量（比如打字出錯）；
3. 頂層對象的屬性是到處可以讀寫的，這非常不利於模塊化編程。

另一方面，window對象有實體含義，指的是瀏覽器的窗口對象，頂層對象是一個有實體含義的對象，也是不合適的。

 

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對象

ES5 的頂層對象，本身也是一個問題，因爲它在各種實現裏面是不統一的。

 

• 瀏覽器裏面，頂層對象是window，但 Node 和 Web Worker 沒有window。
• 瀏覽器和 Web Worker 裏面，self也指向頂層對象，但是 Node 沒有self。
• Node 裏面，頂層對象是global，但其他環境都不支持。

同一段代碼爲了能夠在各種環境，都能取到頂層對象，現在一般是使用this變量，但是有侷限性。

 

• 全局環境中，this會返回頂層對象。但是，Node 模塊和 ES6 模塊中，this返回的是當前模塊。
• 函數裏面的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');
};

現在有一個提案，在語言標準的層面，引入global作爲頂層對象。也就是說，在所有環境下，global都是存在的，都可以從它拿到頂層對象。