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 相关文章推荐
jquery ajax跨域解决方法(json方式)
Feb 04 Javascript
JavaScript数据结构和算法之图和图算法
Feb 11 Javascript
JS控制表格实现一条光线流动分割行的方法
Mar 09 Javascript
jQuery form 表单验证插件(fieldValue)校验表单
Jan 24 Javascript
JS中artdialog弹出框控件之提交表单思路详解
Apr 18 Javascript
jQuery实现弹窗居中效果类似alert()
Feb 27 Javascript
Vue中父组件向子组件通信的方法
Jul 11 Javascript
CheckBox多选取值及判断CheckBox选中是否为空的实例
Oct 31 Javascript
JavaScript设计模式之代理模式简单实例教程
Jul 03 Javascript
Iview Table组件中各种组件扩展的使用
Oct 20 Javascript
微信小程序获取用户绑定手机号方法示例
Jul 21 Javascript
js实现百度登录窗口拖拽效果
Mar 19 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
php设计模式之命令模式的应用详解
2013/05/21 PHP
不使用php api函数实现数组的交换排序示例
2014/04/13 PHP
PHP PDO和消息队列的个人理解与应用实例分析
2019/11/25 PHP
JavaScript触发器详解
2007/03/10 Javascript
JavaScript 对象模型 执行模型
2009/12/06 Javascript
推荐10个超棒的jQuery工具提示插件
2011/10/11 Javascript
非常漂亮的相册集 使用jquery制作相册集
2016/04/28 Javascript
在Javascript操作JSON对象,增加 删除 修改的简单实现
2016/06/02 Javascript
JavaScript简单下拉菜单特效
2016/09/13 Javascript
jQuery插件zTree实现删除树子节点的方法示例
2017/03/08 Javascript
vue中路由验证和相应拦截的使用详解
2017/12/13 Javascript
webpack dll打包重复问题优化的解决
2018/10/10 Javascript
微信小程序实现页面分享onShareAppMessage
2019/08/12 Javascript
在layui中对table中的数据进行判断(0、1)转换为提示信息的方法
2019/09/28 Javascript
iview实现动态表单和自定义验证时间段重叠
2021/01/10 Javascript
python 打印出所有的对象/模块的属性(实例代码)
2016/09/11 Python
解决Python 中英文混输格式对齐的问题
2018/07/16 Python
详解windows python3.7安装numpy问题的解决方法
2018/08/13 Python
Scrapy框架爬取西刺代理网免费高匿代理的实现代码
2019/02/22 Python
利用Python绘制有趣的万圣节南瓜怪效果
2019/10/31 Python
一款利用css3的鼠标经过动画显示详情特效的实例教程
2014/12/29 HTML / CSS
英国羊绒服装购物网站:Pure Collection
2018/10/22 全球购物
Rentalcars.com中国:世界上最大的在线汽车租赁服务
2019/08/22 全球购物
亚马逊新加坡官方网站:Amazon.sg
2020/03/25 全球购物
SQL面试题
2013/12/09 面试题
竞聘上岗演讲稿范文
2014/01/10 职场文书
计算机相关的自我评价
2014/01/15 职场文书
应届优秀本科大学毕业生自我鉴定
2014/01/21 职场文书
人力资源作业细则
2014/03/03 职场文书
文秘应届生求职信
2014/07/05 职场文书
中国梦演讲稿5分钟
2014/08/19 职场文书
青春励志演讲稿范文
2014/08/25 职场文书
小学校园广播稿(3篇)
2014/09/19 职场文书
民族学专业大学生职业规划范文:清晰未来的构想
2014/09/20 职场文书
寻找最美乡村教师观后感
2015/06/18 职场文书
把77A收信机改造成收音机
2022/04/05 无线电