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等比例控制图片宽高的具体实现
Jan 28 Javascript
JS获取当前日期时间并定时刷新示例
Mar 04 Javascript
JS+CSS实现仿msn风格选项卡效果代码
Oct 22 Javascript
微信小程序前端源码逻辑和工作流
Sep 25 Javascript
使用vue.js2.0 + ElementUI开发后台管理系统详细教程(一)
Jan 21 Javascript
浅谈javascript的闭包
Jan 23 Javascript
js简单实现网页换肤功能
Apr 07 Javascript
H5实现仿flash效果的实现代码
Sep 29 Javascript
JavaScript中Object值合并方法详解
Dec 22 Javascript
Vue keepAlive 数据缓存工具实现返回上一个页面浏览的位置
May 10 Javascript
解决layer.open后laydate失效的问题
Sep 06 Javascript
uni-app实现获取验证码倒计时功能
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
php异常:Parse error: syntax error, unexpected T_ENCAPSED_AND_WHITESPACE  eval()'d code error
2011/05/19 PHP
php 生成自动创建文件夹并上传文件的示例代码
2014/03/07 PHP
JS 自动安装exe程序
2008/11/30 Javascript
js对象之JS入门之Array对象操作小结
2011/01/09 Javascript
js+div实现文字滚动和图片切换效果代码
2015/08/27 Javascript
JS实现的在线调色板实例(附demo源码下载)
2016/03/01 Javascript
JS 滚动事件window.onscroll与position:fixed写兼容IE6的回到顶部组件
2016/10/10 Javascript
JS设置时间无效问题的解决办法
2017/02/18 Javascript
Bootstrap Table使用整理(三)
2017/06/09 Javascript
js禁止表单重复提交
2017/08/29 Javascript
基于dataset的使用和图片延时加载的实现方法
2017/12/11 Javascript
解决vue中对象属性改变视图不更新的问题
2018/02/23 Javascript
如何使用electron-builder及electron-updater给项目配置自动更新
2018/12/24 Javascript
JavaScript函数定义方法实例详解
2019/03/05 Javascript
在微信小程序中使用图表的方法示例
2019/04/25 Javascript
Vee-validate 父组件获取子组件表单校验结果的实例代码
2019/05/20 Javascript
jQuery实现input[type=file]多图预览上传删除等功能
2019/08/02 jQuery
Vue中的nextTick作用和几个简单的使用场景
2021/01/25 Vue.js
Python映射拆分操作符用法实例
2015/05/19 Python
python基础教程之五种数据类型详解
2017/01/12 Python
Python开发之Nginx+uWSGI+virtualenv多项目部署教程
2019/05/13 Python
Django的用户模块与权限系统的示例代码
2019/07/24 Python
python基于socket实现的UDP及TCP通讯功能示例
2019/11/01 Python
python中使用input()函数获取用户输入值方式
2020/05/03 Python
python实现经纬度采样的示例代码
2020/12/10 Python
Mytheresa中国官网:德国时尚奢侈品商城
2017/08/04 全球购物
法国一家芭蕾舞鞋公司:Repetto
2018/11/12 全球购物
检讨书范文
2015/01/27 职场文书
世界水日宣传活动总结
2015/02/09 职场文书
2015年底工作总结范文
2015/05/15 职场文书
2015年英语教师工作总结
2015/05/20 职场文书
心灵捕手观后感
2015/06/02 职场文书
大学生受助感言
2015/08/01 职场文书
值班管理制度范本
2015/08/06 职场文书
MySQL系列之二 多实例配置
2021/07/02 MySQL
Django框架模板用法详解
2022/06/10 Python