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 相关文章推荐
js 效率组装字符串 StringBuffer
Dec 23 Javascript
基于JQuery的多标签实现代码
Sep 19 Javascript
jquery如何扑捉回车键触发的事件
Apr 24 Javascript
jquery实现简单合拢与展开网页面板的方法
Sep 01 Javascript
jquery中checkbox使用方法简单实例演示
Nov 24 Javascript
jQuery搜索框效果实现代码(百度关键词联想)
Feb 25 Javascript
基于JQuery实现的跑马灯效果(文字无缝向上翻动)
Dec 02 Javascript
JS键盘版计算器的制作方法
Dec 03 Javascript
jQuery实现两个select控件的互移操作
Dec 22 Javascript
JS中如何实现Laravel的route函数详解
Feb 12 Javascript
vue.js框架实现表单排序和分页效果
Aug 09 Javascript
Vue 组件参数校验与非props特性的方法
Feb 12 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
亚洲咖啡有什么?亚洲咖啡产地介绍 亚洲咖啡有什么特点?
2021/03/05 新手入门
PHP+AJAX实现无刷新注册(带用户名实时检测)
2006/12/02 PHP
PHP中的魔术方法总结和使用实例
2015/05/11 PHP
php删除数组中重复元素的方法
2015/12/22 PHP
Nginx环境下PHP flush失效的解决方法
2016/10/19 PHP
PHP实现添加购物车功能
2017/03/06 PHP
Thinkphp集成抖音SDK的实现方法
2020/04/28 PHP
自己编写的类似JS的trim方法
2013/10/09 Javascript
jquery获取当前点击对象的value方法
2014/02/28 Javascript
网站繁简切换的JS遇到页面卡死的解决方法
2014/03/12 Javascript
Javascript中replace()小结
2015/09/30 Javascript
javascript Slip.js实现整屏滑动的手机网页
2015/11/25 Javascript
Nodejs中session的简单使用及通过session实现身份验证的方法
2016/02/04 NodeJs
Bootstrap基本样式学习笔记之按钮(4)
2016/12/07 Javascript
深入理解移动前端开发之viewport
2018/10/19 Javascript
深入探索VueJS Scoped CSS 实现原理
2019/09/23 Javascript
Vue.js组件使用props传递数据的方法
2019/10/19 Javascript
JavaScript观察者模式原理与用法实例详解
2020/03/10 Javascript
Python脚本判断 Linux 是否运行在虚拟机上
2015/04/25 Python
使用Python下载歌词并嵌入歌曲文件中的实现代码
2015/11/13 Python
python分析作业提交情况
2017/11/22 Python
Python实现将数据框数据写入mongodb及mysql数据库的方法
2018/04/02 Python
python3+PyQt5使用数据库窗口视图
2018/04/24 Python
Python使用min、max函数查找二维数据矩阵中最小、最大值的方法
2018/05/15 Python
pthon贪吃蛇游戏详细代码
2019/01/27 Python
Python脚本按照当前日期创建多级目录
2019/03/01 Python
django query模块
2019/04/20 Python
Python获取一个用户名的组ID过程解析
2019/09/03 Python
Python更新所有已安装包的操作
2020/02/13 Python
Python os库常用操作代码汇总
2020/11/03 Python
Python的logging模块基本用法
2020/12/24 Python
ghd官网:英国ghd直发器品牌
2018/05/04 全球购物
期末自我鉴定
2014/02/02 职场文书
发展党员工作情况汇报
2014/10/28 职场文书
学习与创新自我评价
2015/03/09 职场文书
员工规章制度范本
2015/08/07 职场文书