### **global 对象**
ES5 的顶层对象,本身也是一个问题,因为它在各种实现里面是不统一的。
浏览器里面,顶层对象是window,但 Node 和 Web Worker 没有window。
浏览器和 Web Worker 里面,self也指向顶层对象,但是 Node 没有self。
Node 里面,顶层对象是global,但其他环境都不支持。
同一段代码为了能够在各种环境,都能取到顶层对象,现在一般是使用this变量,但是有局限性。
全局环境中,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');
};
~~~
现在有一个提案,在语言标准的层面,引入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。
- js
- js继承
- keyCode
- 好的网站
- 零散知识点-js
- This
- 对象深拷贝和浅拷贝
- 数组方法
- 数组的深拷贝和浅拷贝
- JS 引擎的执行机制
- js中的new
- 常用正则
- 函数柯里化
- 会修改当前数组的方法
- 不会修改当前数组的方法
- 函数式编程
- 循环遍历
- 基础知识
- 异步
- js知识总结
- fileReader
- HTML
- 零散知识点
- html5新特性
- viewport
- CSS
- cursor
- css3新特性
- 水平居中
- 垂直居中
- display解析
- 块级元素和行内元素
- css技巧和方法
- 清除浮动
- Less
- Sass
- 综合
- 微信小程序
- 前端面试
- CSS-面试
- JS-面试
- js-web-api
- js知识
- MVC-面试
- jQuery与框架的区别
- 闭包
- promise
- http状态码
- cdn
- 离线存储
- 事件
- web安全
- 性能优化
- 响应式
- 服务器渲染和本地渲染
- 模板是什么?
- VUE流程
- 浏览器渲染过程
- this的指向
- new的使用
- HTML-面试
- title和alt区别
- html5元素
- h5新特性
- 图片格式
- 零散面试总结
- react
- 生命周期-react
- state
- props
- 组件通信
- 虚拟DOM
- 源码分析
- webstorm-template
- element与component区别
- 组件的理解
- JXS
- vue与react区别
- 16.8版本
- vue
- 生命周期-vue
- 实现流程
- webpack
- 概念
- 入口起点
- 出口
- loader
- 模式
- 插件
- manifest
- redux
- 介绍
- 核心概念
- 三大原则
- 基础
- action
- reducer
- store
- 数据流
- 高级
- 异步action
- 异步数据流
- middleware
- ES6阮一峰
- ...
- let
- es6箭头函数
- const
- 块级作用域
- 顶层对象的属性
- global 对象
- 变量的解构赋值
- 字符串的扩展
- promise对象
- 正则的扩展
- 数值的扩展
- Math对象的扩展
- 函数的扩展
- 数组的扩展
- 对象的扩展
- symbol
- async函数
- class的基本用法
- Class 的继承
- Set 和 Map 数据结构
- 开发工具
- 好用的软件
- chrome插件
- 其他实用工具
- 微信公众号-前端早读课
- 【第1352期】map和reduce,处理数据结构的利器
- 微信公众号-前端大全
- JS 的执行机制
- 一篇文章理解 JS 继承
- 浏览器
- 缓存
- 《Webkit技术内幕》之页面渲染过程
- 跨域
- 安全
- XSS
- 设计模式
- 发布订阅模式
- 工厂模式
- MV*模式
- 观察者模式
- react-router
- 一些小技巧
- js一些小算法
- 1.已知一个数组中的值,在另外一个数组中查找该值
- 累加器
- 数组随机
- 数组扁平化并去重排序
- Immutable
- 常用命令
- hybrid
- schema封装
- typescript