es6学习笔记-顶层对象_v1.0
(虽然是笔记,但是基本是抄了一次ruan大师的文章了)
顶层对象
顶层对象,在浏览器环境指的是window对象,在Node指的是global对象。
ES5之中,顶层对象的属性与全局变量是等价的。
-
ES6为了改变这一点:
var命令和function命令声明的全局变量,依旧是顶层对象的属性;
let命令、const命令、class命令声明的全局变量,不属于顶层对象的属性
global对象
浏览器里面,顶层对象是window,
但 Node 和 Web Worker 没有window。
浏览器和 Web Worker 里面,self也指向顶层对象
但是Node没有self,Node 里面,顶层对象是global,但其他环境都不支持。
同一段代码为了能够在各种环境,都能取到顶层对象,现在一般是使用this变量,但是有局限性(如下):
全局环境中,this会返回顶层对象。但是,Node模块和ES6模块中,this返回的是当前模块。(所以在node命令行下解析es6代码,this指向并不是全局对象)
函数里面的this,如果函数不是作为对象的方法运行,而是单纯作为函数运行,this会指向顶层对象。但是,严格模式下,这时this会返回undefined。不管是严格模式,还是普通模式,
new Function('return this')(),
总是会返回全局对象。如果浏览器用了CSP(Content Security Policy,内容安全政策),那么eval、new Function这些方法都可能无法使用。
// 方法一
(typeof window !== 'undefined'
? window
: (typeof process === 'object' &&
typeof require === 'function' &&
typeof global === 'object')
? global
: this);
// 方法二
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');
};
typeof process === 'object' && typeof require === 'function' && typeof global === 'object'
如果为true,且不存在window对象时可以认为在node环境中,node的全局对象就是global等价于浏览器中的window对象。这个是node的定义,参考node官方self(window.self) 返回window的只读引用,即为一个顶层对象,所以
typeof self !== 'undefined'
时,可以认为在浏览器环境下获取到了顶层对象的一个只读引用typeof global !== 'undefined'
这个就是获取的node环境下的顶层对象,观察这两个函数,其作用都是获取顶层对象,一般来说js较多用到的地方是浏览器端(前端)和node端(后台),
加入垫片库来实现global对象
在语言标准的层面,引入global作为顶层对象。也就是说,在所有环境下,global都是存在的,都可以从它拿到顶层对象。
垫片库system.global
模拟了这个提案,可以在所有环境拿到global。
// CommonJS的写法
require('system.global/shim')();
// ES6模块的写法
import shim from 'system.global/shim'; shim();
上面代码可以保证各种环境里面,global对象都是存在的。
// CommonJS的写法
var global = require('system.global')();
// ES6模块的写法
import getGlobal from 'system.global';
const global = getGlobal();
上面代码将顶层对象放入变量global。
参考引用:
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。