頂層物件的屬性

頂層物件，在瀏覽器環境指的是window物件，在Node指的是global物件。ES5之中，頂層物件的屬性與全域性變數是等價的。

window.a = 1;
a // 1

a = 2;
window.a // 2

上面程式碼中，頂層物件的屬性賦值與全域性變數的賦值，是同一件事。

頂層物件的屬性與全域性變數掛鉤，被認為是JavaScript語言最大的設計敗筆之一。這樣的設計帶來了幾個很大的問題，首先是沒法在編譯時就報出變數未宣告的錯誤，只有執行時才能知道（因為全域性變數可能是頂層物件的屬性創造的，而屬性的創造是動態的）；其次，程式設計師很容易不知不覺地就建立了全域性變數（比如打字出錯）；最後，頂層物件的屬性是到處可以讀寫的，這非常不利於模組化程式設計。另一方面，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

上面程式碼中，全域性變數a

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都是存在的，都可以從它拿到頂層物件。

墊片庫system.global模擬了這個提案，可以在所有環境拿到global。

// CommonJS的寫法
require('system.global/shim')();

// ES6模組的寫法
import shim from 'system.global/shim'; shim();

上面程式碼可以保證各種環境裡面，global物件都是存在的。

// CommonJS的寫法
var global = require('system.global')();

// ES6模組的寫法
import getGlobal from 'system.global';
const global = getGlobal();

上面程式碼將頂層物件放入變數global。

參考文件