es6如何獲取頂層對象

本篇內容介紹了“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');
};

“es6如何獲取頂層對象”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！