es6取得頂層物件的方式:1、利用「typeof window !== 'undefined' ?window : (...) ? global : this」方法取得;2、利用「var getGlobal = function ( ) {...throw new Error('unable to locate global object');};」方法取得。
本教學操作環境:windows10系統、ECMAScript 6.0版本、Dell G3電腦。
ES6之前,頂層物件的屬性和全域變數是等價的,但是在ES6,頂層物件和全域物件開始分離。
#無法在編譯階段就報出變數未宣告的錯誤,只有執行時才知道。
容易在不知不覺中建立全域變數
#頂層物件可隨意讀寫
window物件有視窗的意思,指的瀏覽器的視窗物件。而頂層物件有實體意義是一個不合適的設計
var和function指令宣告的全域變量,依舊是頂層物件的屬性。
let、const、class宣告的全域變量,不屬於頂層物件的屬性。
#瀏覽器:window物件
Node:global物件
瀏覽器中頂層物件是window,但是Node和Web Worker沒有window。
瀏覽器和Web Worker中,self也指向頂層對象,但是Node沒有self。
Node中,頂層物件是global,但其他環境不支援。
限制
全域環境中,this傳回頂層物件;在
Node模組和ES6模組中,this傳回目前模組
函數中的this
(1) 單純作為函數運行,this傳回頂層
(2) 嚴格模式下,回傳undefined
new Function('return this')();總是傳回全域物件。
但是如果瀏覽器用了CSP,那麼eval,new Function這些方法都可能無法使用
CSP:Content Security Policy,內容安全性政策。它以白名單的機制對網站載入或執行的資源起作用,在網頁中透過HTTP頭資訊或meta元素定義。但也造成了以下問題
- eval及相關函數被停用。
- 內嵌的JavaScript程式碼將不會執行。
- 只能透過白名單來載入遠端腳本。
// 方法1 // 针对 浏览器中 顶层对象是window,但是Node和Web Worker没有window。 ( typeof window !== 'undefined' ? window : ( typeof process === 'object' && typeof require === 'function' && typeof global === 'object' ) ? global : this ); //方法2 // 针对 浏览器和Web Worker中,self也指向顶层对象,但是Node没有self。 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'); };
【相關推薦:javascript影片教學、 web前端】
以上是es6取得頂層物件的方式有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章!