javaScript中的頂層對象小結

頂層對象,在瀏覽器中指的是window,在node環境中指的是global對象.

在ES5環境中,通過var聲明的變量能夠通過window對象獲取到,

variable = '1';
console.log(window.variable);//1
window.variable = '2';
console.log(variable);//2

證明頂層對象的屬性賦值與全局變量的賦值，是同一件事。這種特性是javaScript中廣受吐槽的原因之一.這回帶來以下幾個問題:

1.如果變量因爲未聲明,那麼只有在程序運行時才知道,無法在編譯時就知道,因爲全局變量可能是頂層對象的屬性創造的，而屬性的創造是動態的.

2.其次，程序員很容易不知不覺地就創建了全局變量（比如打字出錯）

3.頂層對象的屬性是到處可以讀寫的，這非常不利於模塊化編程

4.window在瀏覽器環境中指的是窗口對象.有實體含義，頂層對象是一個有實體含義的對象，顯然不合適的。

在ES6中爲了解決頂層對象屬性與全局變量混淆的情況,一方面規定，爲了保持兼容性，var命令和function命令聲明的全局變量，依舊是頂層對象的屬性；另一方面規定，let命令、const命令、class命令聲明的全局變量，不屬於頂層對象的屬性。也就是說，從 ES6 開始，全局變量將逐步與頂層對象的屬性脫鉤。

    var variable = '1';
    console.log(window.variable);//1
    let variable1 = '2';
    console.log(window.variable1);//undefined

各種環境中頂層對象的區分

1.瀏覽器裏面，頂層對象是window，但 Node 和 Web Worker 沒有window。

2.瀏覽器和 Web Worker 裏面，self也指向頂層對象，但是 Node 沒有self。

3.Node 裏面，頂層對象是global，但其他環境都不支持。

還有一種方法是在不同的環境中,可以使用this來獲取頂層對象,但是這種方法是有缺陷的

1.全局環境中，this會返回頂層對象。但是，Node 模塊和 ES6 模塊中，this返回的是當前模塊。

2.函數裏面的this，如果函數不是作爲對象的方法運行，而是單純作爲函數運行，this會指向頂層對象。但是，嚴格模式下，這時this會返回undefined。

3.不管是嚴格模式，還是普通模式，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。

參考:阮一峯ECMAScript 6