es6如何獲取頂層對(duì)象

本篇內(nèi)容介紹了“es6如何獲取頂層對(duì)象”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

es6獲取頂層對(duì)象的方式：1、利用“typeof window !== 'undefined' ? window : (...) ? global : this”方法獲?。?、利用“var getGlobal = function () {...throw new Error('unable to locate global object');};”方法獲取。

本教程操作環(huán)境：windows10系統(tǒng)、ECMAScript 6.0版本、Dell G3電腦。

es6獲取頂層對(duì)象的方式

ES6之前，頂層對(duì)象的屬性和全局變量是等價(jià)的，但是在ES6，頂層對(duì)象和全局對(duì)象開(kāi)始分離。

不分離的弊端

• 無(wú)法在編譯階段就報(bào)出變量未聲明的錯(cuò)誤，只有運(yùn)行時(shí)才知道。

• 容易在不知不覺(jué)中創(chuàng)建全局變量

• 頂層對(duì)象可隨意讀寫(xiě)

• window對(duì)象有窗口的意思，指的瀏覽器的窗口對(duì)象。而頂層對(duì)象有實(shí)體意義是一個(gè)不合適的設(shè)計(jì)

改變方式

• var和function命令聲明的全局變量，依舊是頂層對(duì)象的屬性。

• let、const、class聲明的全局變量，不屬于頂層對(duì)象的屬性。

頂層對(duì)象

瀏覽器：window對(duì)象

Node：global對(duì)象

不統(tǒng)一的頂層對(duì)象

瀏覽器中 頂層對(duì)象是window，但是Node和Web Worker沒(méi)有window。

瀏覽器和Web Worker中，self也指向頂層對(duì)象，但是Node沒(méi)有self。

Node中，頂層對(duì)象是global，但其他環(huán)境不支持。

獲取頂層對(duì)象

局限性

全局環(huán)境中，this返回頂層對(duì)象；

Node模塊和ES6模塊中，this返回當(dāng)前模塊

函數(shù)中的this

(1) 單純作為函數(shù)運(yùn)行，this返回頂層

(2) 嚴(yán)格模式下，返回undefined

new Function(‘return this’)();總是返回全局對(duì)象。

但是如果瀏覽器用了CSP，那么eval，new Function這些方法都可能無(wú)法使用

CSP：Content Security Policy，內(nèi)容安全政策。它以白名單的機(jī)制對(duì)網(wǎng)站加載或執(zhí)行的資源起作用，在網(wǎng)頁(yè)中通過(guò)HTTP頭信息或者meta元素定義。但是也造成了以下問(wèn)題

1. eval及相關(guān)函數(shù)被禁用。

2. 內(nèi)嵌的JavaScript代碼將不會(huì)執(zhí)行。

3. 只能通過(guò)白名單來(lái)加載遠(yuǎn)程腳本。

獲取頂層對(duì)象的方法

// 方法1
// 針對(duì) 瀏覽器中 頂層對(duì)象是window，但是Node和Web Worker沒(méi)有window。
( 
	typeof window !== 'undefined' ? window : (
		typeof process === 'object' &&
		typeof require === 'function' &&
		typeof global === 'object'
	) ? global : this
);

//方法2
// 針對(duì) 瀏覽器和Web Worker中，self也指向頂層對(duì)象，但是Node沒(méi)有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如何獲取頂層對(duì)象”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！