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元素定义。但是也造成了以下问题

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前端】