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 TO HTML 转换
Jun 26 Javascript
在修改准备发的批量美化select+可修改select时,在非IE下发现了几个问题
Jan 09 Javascript
网站繁简切换的JS遇到页面卡死的解决方法
Mar 12 Javascript
jQuery 2.0.3 源码分析之core(一)整体架构
May 27 Javascript
javascript解三阶幻方(九宫格)
Apr 22 Javascript
JS实现将Asp.Net的DateTime Json类型转换为标准时间的方法
Aug 02 Javascript
jQuery弹出div层过2秒自动消失
Nov 29 Javascript
详解jQuery的表单验证插件--Validation
Dec 21 Javascript
vue项目中引入vue-datepicker插件的详解
May 14 Javascript
微信小程序登录对接Django后端实现JWT方式验证登录详解
Jul 29 Javascript
解决Vue的文本编辑器 vue-quill-editor 小图标样式排布错乱问题
Aug 03 Javascript
JavaScript代码实现微博批量取消关注功能
Feb 05 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
检测png图片是否完整的php代码
2010/09/06 PHP
邮箱正则表达式实现代码(针对php)
2013/06/21 PHP
php实现json编码的方法
2015/07/30 PHP
Zend Framework教程之Zend_Config_Ini用法分析
2016/03/23 PHP
php resizeimage 部分jpg文件 生成缩略图失败的原因分析及解决办法
2016/03/23 PHP
Jquery 快速构建可拖曳的购物车DragDrop
2009/11/30 Javascript
使用JavaScript动态设置样式实现代码(2)
2013/01/25 Javascript
巧用jquery解决下拉菜单被Div遮挡的相关问题
2014/02/13 Javascript
jQuery实现的经典滑动门效果
2015/09/22 Javascript
JS实现把鼠标放到链接上出现滚动文字的方法
2016/04/06 Javascript
Bootstrap进度条组件知识详解
2016/05/01 Javascript
深入理解JavaScript单体内置对象
2016/06/06 Javascript
Javascript中判断一个值是否为undefined的方法详解
2016/09/28 Javascript
Bootstrapvalidator校验、校验清除重置的实现代码(推荐)
2016/09/28 Javascript
AngularJS框架的ng-app指令与自动加载实现方法分析
2017/01/04 Javascript
用 js 的 selection range 操作选择区域内容和图片
2017/04/18 Javascript
VUE-cli3使用 svg-sprite-loader
2018/10/20 Javascript
Vue中的基础过渡动画及实现原理解析
2018/12/04 Javascript
[01:32:50]DOTA2-DPC中国联赛 正赛 DLG vs XG BO3 第一场 1月25日
2021/03/11 DOTA
Python and、or以及and-or语法总结
2015/04/14 Python
Python中time模块和datetime模块的用法示例
2016/02/28 Python
简单学习Python多进程Multiprocessing
2017/08/29 Python
python lxml中etree的简单应用
2019/05/10 Python
django多个APP的urls设置方法(views重复问题解决)
2019/07/19 Python
浅谈django框架集成swagger以及自定义参数问题
2020/07/07 Python
详解Selenium 元素定位和WebDriver常用方法
2020/12/04 Python
DRF使用simple JWT身份验证的实现
2021/01/14 Python
戴森美国官网:Dyson美国
2016/09/11 全球购物
印度最大的时尚购物网站:Myntra
2018/09/13 全球购物
绢花、人造花和人造花卉:BLOOM
2019/08/07 全球购物
LN-CC日本:高端男装和女装的奢侈时尚目的地
2019/09/01 全球购物
Levi’s西班牙官方网站:李维斯,著名的牛仔裤品牌
2020/08/20 全球购物
物业管理计划书
2014/01/10 职场文书
将相和教学反思
2014/02/04 职场文书
质监局领导班子践行群众路线整改方案
2014/10/26 职场文书
零基础学java之带参数以及返回值的方法
2022/04/10 Java/Android