首頁  >  文章  >  web前端  >  es6取得頂層物件的方式有哪些

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

WBOY
WBOY原創
2022-08-18 16:24:111443瀏覽

es6取得頂層物件的方式:1、利用「typeof window !== 'undefined' ?window : (...) ? global : this」方法取得;2、利用「var getGlobal = function ( ) {...throw new Error('unable to locate global object');};」方法取得。

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

本教學操作環境: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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn