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 相关文章推荐
使用node.js半年来总结的 10 条经验
Aug 18 Javascript
Ajax清除浏览器js、css、图片缓存的方法
Aug 06 Javascript
基于JavaScript实现根据手机定位获取当前具体位置(X省X市X县X街道X号)
Dec 29 Javascript
jQuery中常用动画效果函数(日常整理)
Sep 17 Javascript
基于vue.js轮播组件vue-awesome-swiper实现轮播图
Mar 17 Javascript
javascript深拷贝的原理与实现方法分析
Apr 10 Javascript
AngularJs用户输入动态模板XSS攻击示例详解
Apr 21 Javascript
详解webpack运行Babel教程
Jun 13 Javascript
vue slot与传参实例代码讲解
Apr 28 Javascript
React 全自动数据表格组件——BodeGrid的实现思路
Jun 12 Javascript
layUI实现前端分页和后端分页
Jul 27 Javascript
js实现AI五子棋人机大战
May 28 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和Mysqlweb应用开发核心技术 第1部分 Php基础-1 开始了解php
2011/07/03 PHP
php 的加密函数 md5,crypt,base64_encode 等使用介绍
2012/04/09 PHP
php输出echo、print、print_r、printf、sprintf、var_dump的区别比较
2013/06/21 PHP
php处理复杂xml数据示例
2016/07/11 PHP
PHP 匿名函数与注意事项详细介绍
2016/11/26 PHP
RR vs IO BO3 第二场2.13
2021/03/10 DOTA
javascript编程起步(第六课)
2007/01/10 Javascript
简单的JS多重继承示例
2008/03/13 Javascript
用函数式编程技术编写优美的 JavaScript_ibm
2008/05/16 Javascript
jQuery 页面载入进度条实现代码
2009/02/08 Javascript
JQuery获取当前屏幕的高度宽度的实现代码
2011/07/12 Javascript
jquery实现在网页指定区域显示自定义右键菜单效果
2015/08/25 Javascript
javascript 正则表达式去空行方法
2017/01/24 Javascript
BootStrap Fileinput上传插件使用实例代码
2017/07/28 Javascript
Vue 项目代理设置的优化
2018/04/17 Javascript
详解一个基于react+webpack的多页面应用配置
2019/01/21 Javascript
详解Vue之计算属性
2020/06/20 Javascript
Python的for和break循环结构中使用else语句的技巧
2016/05/24 Python
使用C++扩展Python的功能详解
2018/01/12 Python
用pandas按列合并两个文件的实例
2018/04/12 Python
Pyqt实现无边框窗口拖动以及窗口大小改变
2018/04/19 Python
python 获取图片分辨率的方法
2019/01/08 Python
python 获得任意路径下的文件及其根目录的方法
2019/02/16 Python
python 写函数在一定条件下需要调用自身时的写法说明
2020/06/01 Python
CSS3绘制超炫的上下起伏波动进度加载动画
2016/04/21 HTML / CSS
CSS3 box-shadow属性实例详解
2020/06/19 HTML / CSS
基于HTML5实现类似微信手机摇一摇功能(计算摇动次数)
2017/07/24 HTML / CSS
5分钟实现Canvas鼠标跟随动画背景
2019/11/18 HTML / CSS
amazeui 验证按钮扩展的实现
2020/08/21 HTML / CSS
Mavi牛仔裤美国官网:土耳其著名牛仔品牌
2016/09/24 全球购物
TUMI马来西亚官方网站:国际领先的高品质商旅箱包品牌
2018/04/26 全球购物
信用社实习人员自我鉴定
2013/09/20 职场文书
国家奖学金获奖感言
2014/08/16 职场文书
基层党支部承诺书
2015/04/30 职场文书
婚庆主持词大全
2015/06/30 职场文书
2016年教师学习廉政准则心得体会
2016/01/20 职场文书