es6取得頂層物件的方式有哪些

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之前，頂層物件的屬性和全域變數是等價的，但是在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元素定義。但也造成了以下問題

1. eval及相關函數被停用。
2. 內嵌的JavaScript程式碼將不會執行。
3. 只能透過白名單來載入遠端腳本。

取得頂層物件的方法

#

// 方法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中文網其他相關文章！