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 锚点跳转滚动条平滑滚动一句话代码
Apr 30 Javascript
js实现弹窗插件功能实例代码分享
Dec 12 Javascript
利用js读取动态网站从服务器端返回的数据
Feb 10 Javascript
使用mouse事件实现简单的鼠标经过特效
Jan 30 Javascript
基于jQuery实现仿淘宝套餐选择插件
Mar 04 Javascript
JS函数的几种定义方式分析
Dec 17 Javascript
Vuejs第十二篇之动态组件全面解析
Sep 09 Javascript
JavaScript触发onScroll事件的函数节流详解
Dec 14 Javascript
Vue中保存用户登录状态实例代码
Jun 07 Javascript
webpack构建react多页面应用详解
Sep 15 Javascript
JS中touchstart事件与click事件冲突的解决方法
Mar 12 Javascript
AngularJs的UI组件ui-Bootstrap之Tooltip和Popover
Jul 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
如何分别全角和半角以避免乱码
2006/10/09 PHP
php调用新浪短链接API的方法
2014/11/08 PHP
jQuery使用手册之 事件处理
2007/03/24 Javascript
传递参数的标准方法(jQuery.ajax)
2008/11/19 Javascript
js 静态动态成员 and 信息的封装和隐藏
2011/05/29 Javascript
javascript开发随笔一 preventDefault的必要
2011/11/25 Javascript
jquery、js操作checkbox全选反选
2014/03/12 Javascript
元素绑定click点击事件方法
2015/06/08 Javascript
jquery实现无刷新验证码的简单实例
2016/05/19 Javascript
基于HTML+CSS+JS实现增加删除修改tab导航特效代码
2016/08/05 Javascript
详解利用exif.js解决ios手机上传竖拍照片旋转90度问题
2016/11/04 Javascript
微信小程序开发之相册选择和拍照详解及实例代码
2017/02/22 Javascript
详解Angular 中 ngOnInit 和 constructor 使用场景
2017/06/22 Javascript
JS计算两个时间相差分钟数的方法示例
2018/01/10 Javascript
详解@Vue/Cli 3 Invalid Host header 错误解决办法
2019/01/02 Javascript
Vue动态修改网页标题的方法及遇到问题
2019/06/09 Javascript
python批量导出导入MySQL用户的方法
2013/11/15 Python
python三元运算符实现方法
2013/12/17 Python
python轻松查到删除自己的微信好友
2016/01/10 Python
numpy concatenate数组拼接方法示例介绍
2019/05/27 Python
Python 批量刷博客园访问量脚本过程解析
2019/08/30 Python
Python 转换RGB颜色值的示例代码
2019/10/13 Python
python 截取XML中bndbox的坐标中的图像,另存为jpg的实例
2020/03/10 Python
浅谈numpy中函数resize与reshape,ravel与flatten的区别
2020/06/18 Python
Python 处理日期时间的Arrow库使用
2020/08/18 Python
彻底解决Python包下载慢问题
2020/11/15 Python
CSS3常用的几种颜色渐变模式总结
2016/11/18 HTML / CSS
HTML5打开手机扫码功能及优缺点
2017/11/27 HTML / CSS
Canvas 像素处理之改变透明度的实现代码
2019/01/08 HTML / CSS
AmazeUI 加载进度条的实现示例
2020/08/20 HTML / CSS
高街生活方式全球在线商店:AZBRO
2017/08/26 全球购物
Linux面试题LINUX系统类
2015/11/25 面试题
J2EE面试题集锦(附答案)
2013/08/16 面试题
专业见习报告范文
2014/11/03 职场文书
2019事业单位个人工作总结范文
2019/08/26 职场文书
vue/cli 配置动态代理无需重启服务的方法
2022/05/20 Vue.js