ES6顶层对象、global对象实例分析


Posted in Javascript onJune 14, 2019

本文实例讲述了ES6顶层对象、global对象。分享给大家供大家参考,具体如下:

顶层对象

顶层对象,在浏览器环境指的是window对象,在Node指是的global对象。ES5之前中,顶层对象的属性与全局变量是等价的。

window.a = 1;
a // 1
a = 2;
window.a // 2

上面的代码中,顶层对象的属性赋值和全局变量的赋值,是同一件事。

ES6规定,var命令和function命令声明的全局变量,依旧是顶层对象的属性;let命令、const命令、class命令声明的全局变量,不属于顶层对象的属性。

也就是说,从ES6开始,全局变量将逐步和顶层对象的属性脱钩

var a = 1;
// 如果在Node的REPL环境,可以写成global.a
// 或者采用通用的方法,写成this.a
window.a // 1
let b = 1;
window.b // undefined

global对象

ES5的顶层对象,本身也是一个问题,因为它在各种实现里面不统一。

1.浏览器里面,顶层对象是window,但是Node和Web Worker没有window

2.浏览器和Web Worker里面,self也指向顶层对象,但是Node没有self

3.Node里面,顶层对象是global,但其他环境都不支持

同一段代码为了能够在各种环境,都能取到顶层对象,现在一般是使用this变量,但是有局限性。很难找到一种方法,可以在所有的情况下,都取到顶层对象。下面是2种勉强可以使用的方法:

// 方法1
(typeof window !== 'undefined' ? window : (typeof process === 'object' && typeof require === 'function' && typeof global === 'object') ? global : this);
// 方法2
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都是存在的,都可以冲它拿到顶层对象。

// CommonJS的写法
var global = require('system.global')();
// ES6模块的写法
import getGlobal from 'system.global';
const global = getGlobal();

上面的代码将顶层对象放入变量global

更多关于JavaScript相关内容可查看本站专题:《javascript面向对象入门教程》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
Javascript 自适应高度的Tab选项卡
Apr 05 Javascript
js 设置缓存及获取设置的缓存
May 08 Javascript
JS实现的用来对比两个用指定分隔符分割的字符串是否相同
Sep 19 Javascript
详解JavaScript中的异常处理方法
Jun 16 Javascript
javascript实现textarea中tab键的缩排处理方法
Jun 26 Javascript
漫谈JS引擎的运行机制 你应该知道什么
Jun 15 Javascript
深入浅析JavaScript中的3DES
Aug 24 Javascript
JS实现旋转木马式图片轮播效果
Jan 18 Javascript
详解Angular路由 ng-route和ui-router的区别
May 22 Javascript
浅谈vue.js中v-for循环渲染
Jul 26 Javascript
Bootstrap Table 在指定列中添加下拉框控件并获取所选值
Jul 31 Javascript
socket io与vue-cli的结合使用的示例代码
Nov 01 Javascript
ES6数组与对象的解构赋值详解
Jun 14 #Javascript
简单了解Ajax表单序列化的实现方法
Jun 14 #Javascript
通过JS深度判断两个对象字段相同
Jun 14 #Javascript
CKEditor 4.4.1 添加代码高亮显示插件功能教程【使用官方推荐Code Snippet插件】
Jun 14 #Javascript
利用JavaScript将Excel转换为JSON示例代码
Jun 14 #Javascript
CKeditor富文本编辑器使用技巧之添加自定义插件的方法
Jun 14 #Javascript
Vue动态创建注册component的实例代码
Jun 14 #Javascript
You might like
搭建基于Docker的PHP开发环境的详细教程
2015/07/01 PHP
php结合web uploader插件实现分片上传文件
2016/05/10 PHP
PHP网页缓存技术优点及代码实例
2020/07/29 PHP
CL vs ForZe BO5 第四场 2.13
2021/03/10 DOTA
json 实例详细说明教程
2009/10/31 Javascript
MC Dialog js弹出层 完美兼容多浏览器(5.6更新)
2010/05/06 Javascript
jQuery学习笔记之DOM对象和jQuery对象
2010/12/22 Javascript
如何确保JavaScript的执行顺序 之实战篇
2011/03/03 Javascript
jquery live()调用不存在的解决方法
2014/02/26 Javascript
Jquery原生态实现表格header头随滚动条滚动而滚动
2014/03/18 Javascript
javascript定义类和类的实现实例详解
2015/12/01 Javascript
javascript性能优化之事件委托实例详解
2015/12/12 Javascript
浅谈angular4实际项目搭建总结
2017/12/01 Javascript
在JS循环中使用async/await的方法
2018/10/12 Javascript
angular4+百分比进度显示插件用法示例
2019/05/05 Javascript
vue-element-admin 菜单标签失效的解决方式
2019/11/12 Javascript
用Nodejs实现在终端中炒股的实现
2020/10/18 NodeJs
[03:37]2016完美“圣”典 风云人物:Mikasa专访
2016/12/07 DOTA
python重试装饰器示例
2014/02/11 Python
Python Matplotlib实现三维数据的散点图绘制
2019/03/19 Python
教你一步步利用python实现贪吃蛇游戏
2019/06/27 Python
浅谈django框架集成swagger以及自定义参数问题
2020/07/07 Python
Keras预训练的ImageNet模型实现分类操作
2020/07/07 Python
python 对xml解析的示例
2021/02/27 Python
CSS3属性box-sizing使用指南
2014/12/09 HTML / CSS
iPad和Surface Pro蓝牙键盘:Brydge
2018/11/10 全球购物
Lacoste澳大利亚官网:服装、鞋类及配饰
2018/11/14 全球购物
Deux par Deux官方网站:设计师童装
2020/01/03 全球购物
初中音乐教学反思
2014/01/12 职场文书
婚礼主持词
2014/03/13 职场文书
大学运动会加油稿200字(5篇)
2014/09/27 职场文书
李强为自己工作观后感
2015/06/11 职场文书
纪检监察立案决定书
2015/06/24 职场文书
读书笔记怎么写
2015/07/01 职场文书
如何撰写创业策划书
2019/06/27 职场文书
Python+OpenCV实现图片中的圆形检测
2022/04/07 Python