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 相关文章推荐
Firefox+FireBug使JQuery的学习更加轻松愉快
Jan 01 Javascript
JavaScript去掉空格的方法集合
Dec 28 Javascript
在JavaScript里防止事件函数高频触发和高频调用的方法
Sep 06 Javascript
jQuery中prevUntil()方法用法实例
Jan 08 Javascript
jQuery实现按键盘方向键翻页特效
Mar 18 Javascript
jQuery采用连缀写法实现的折叠菜单效果
Sep 18 Javascript
浅谈js for循环输出i为同一值的问题
Mar 01 Javascript
jfinal与bootstrap的登出实战详解
Nov 27 Javascript
jQuery niceScroll滚动条错位问题的解决方法
Feb 03 jQuery
javascript实现函数柯里化与反柯里化过程解析
Oct 08 Javascript
WEEX环境搭建与入门详解
Oct 16 Javascript
nginx部署多个vue项目的方法示例
Sep 06 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网站提速三大“软”招
2006/10/09 PHP
关于php内存不够用的快速解决方法
2013/10/26 PHP
PHP错误Cannot use object of type stdClass as array in错误的解决办法
2014/06/12 PHP
WordPress分页伪静态加html后缀
2016/06/08 PHP
PHP排序算法之直接插入排序(Straight Insertion Sort)实例分析
2018/04/20 PHP
PHP中上传文件打印错误错误类型分析
2019/04/14 PHP
JS支持带x身份证号码验证函数
2008/08/10 Javascript
JavaScript中Object和Function的关系小结
2009/09/26 Javascript
JS批量操作CSS属性详细解析
2013/12/16 Javascript
浅谈JavaScript的Polymer框架中的behaviors对象
2015/07/29 Javascript
用nodejs的实现原理和搭建服务器(动态)
2016/08/10 NodeJs
用js屏蔽被http劫持的浮动广告实现方法
2017/08/10 Javascript
React中使用UEditor百度富文本的方法
2018/08/22 Javascript
微信小程序实现的动态设置导航栏标题功能示例
2019/01/31 Javascript
vue实现div单选多选功能
2020/07/16 Javascript
[02:40]DOTA2英雄基础教程 先知
2013/11/29 DOTA
Python常用正则表达式符号浅析
2014/08/13 Python
python3爬取淘宝信息代码分析
2018/02/10 Python
python实现excel读写数据
2021/03/02 Python
pandas把dataframe转成Series,改变列中值的类型方法
2018/04/10 Python
Python实用技巧之利用元组代替字典并为元组元素命名
2018/07/11 Python
对Python中内置异常层次结构详解
2018/10/18 Python
Python 旋转打印各种矩形的方法
2019/07/09 Python
python判断单向链表是否包括环,若包含则计算环入口的节点实例分析
2019/10/23 Python
使用jTopo给Html5 Canva中绘制的元素添加鼠标事件
2014/05/15 HTML / CSS
html5实现图片转圈的动画效果——让页面动起来
2017/10/16 HTML / CSS
美国美食礼品篮网站:Gourmet Gift Baskets
2019/12/15 全球购物
车辆维修工自我评价怎么写
2013/09/20 职场文书
酒店管理求职信范文
2014/04/06 职场文书
感恩母亲节演讲稿
2014/05/07 职场文书
个人遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
Python手拉手教你爬取贝壳房源数据的实战教程
2021/05/21 Python
手把手教你怎么用Python实现zip文件密码的破解
2021/05/27 Python
Python制作动态字符画的源码
2021/08/04 Python
微信小程序中使用vant框架的具体步骤
2022/02/18 Javascript
Python安装及建立虚拟环境的完整步骤
2022/06/25 Servers