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 相关文章推荐
漂亮的仿flash菜单,来自蓝色经典
Jun 26 Javascript
js仿黑客帝国字母掉落效果代码分享
Nov 08 Javascript
js创建对象的方法汇总
Jan 07 Javascript
jQuery的文档处理程序详解
May 10 Javascript
jQuery限制图片大小的方法
May 25 Javascript
封装的dialog插件 基于bootstrap模态对话框的简单扩展
Aug 10 Javascript
使用snowfall.jquery.js实现爱心满屏飞的效果
Jan 05 Javascript
canvas实现粒子时钟效果
Feb 06 Javascript
jQuery实现的自定义轮播图功能详解
Dec 28 jQuery
详解vue 命名视图
Aug 14 Javascript
浅析webpack-bundle-analyzer在vue-cli3中的使用
Oct 23 Javascript
vue项目中锚点定位替代方式
Nov 13 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
微信 开发生成带参数的二维码的实例
2016/11/23 PHP
Javascript技术技巧大全(五)
2007/01/22 Javascript
jquery复选框CHECKBOX全选、反选
2008/08/30 Javascript
javascript中的数字与字符串相加实例分析
2011/08/14 Javascript
jQuery中dom元素上绑定的事件详解
2015/04/24 Javascript
使用AmplifyJS组件配合JavaScript进行编程的指南
2015/07/28 Javascript
Jquery使用小技巧汇总
2015/12/29 Javascript
AngularJS使用自定义指令替代ng-repeat的方法
2016/09/17 Javascript
Vue应用部署到服务器的正确方式
2017/07/15 Javascript
vue中引用swiper轮播插件的教程详解
2018/08/16 Javascript
修改vue+webpack run build的路径方法
2018/09/01 Javascript
vue单页面在微信下只能分享落地页的解决方案
2019/04/15 Javascript
jQuery对底部导航进行跳转并高亮显示的实例代码
2019/04/23 jQuery
微信小程序实现的绘制table表格功能示例
2019/04/26 Javascript
ES6 Object属性新的写法实例小结
2019/06/25 Javascript
详解JavaScript中的数据类型,以及检测数据类型的方法
2020/09/17 Javascript
[46:47]2014 DOTA2国际邀请赛中国区预选赛5.21 LGD-CDEC VS NE
2014/05/22 DOTA
[01:52]PWL S2开团时刻第四期——DOTA2成语故事
2020/12/03 DOTA
Python单元测试框架unittest简明使用实例
2015/04/13 Python
Python应用03 使用PyQT制作视频播放器实例
2016/12/07 Python
基于Python3 逗号代码 和 字符图网格(详谈)
2017/06/22 Python
Django Rest framework之权限的实现示例
2018/12/17 Python
Django xadmin开启搜索功能的实现
2019/11/15 Python
python实现音乐播放和下载小程序功能
2020/04/26 Python
python zip()函数的使用示例
2020/09/23 Python
用 Django 开发一个 Python Web API的方法步骤
2020/12/03 Python
selenium+python自动化78-autoit参数化与批量上传功能的实现
2021/03/04 Python
详解HTML5 Canvas绘制时指定颜色与透明度的方法
2016/03/25 HTML / CSS
日本一家专门经营各种箱包的大型网站:Traveler Store
2016/08/03 全球购物
葡萄牙航空官方网站:TAP Air Portugal
2019/10/31 全球购物
俄罗斯卫浴采暖及维修用品超级市场:Dkrussia
2020/05/12 全球购物
Tomcat的缺省是多少,怎么修改
2014/04/09 面试题
卫生厅领导班子党的群众路线教育实践活动整改措施
2014/09/20 职场文书
老公保证书怎么写
2015/02/26 职场文书
教师求职简历自我评价
2015/03/10 职场文书
欧元符号 €
2022/02/17 杂记