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 二进制运算技巧解析
Nov 27 Javascript
JS关闭窗口与JS关闭页面的几种方法小结
Dec 17 Javascript
javascript/jquery获取地址栏url参数的方法
Mar 05 Javascript
利用原生JavaScript获取元素样式只是获取而已
Oct 08 Javascript
详谈jQuery中的this和$(this)
Nov 13 Javascript
jquery实现简单的轮换出现效果实例
Jul 23 Javascript
jquery图片倾斜层叠切换特效代码分享
Aug 27 Javascript
强大Vue.js组件浅析
Sep 12 Javascript
React教程之Props验证的具体用法(Props Validation)
Sep 04 Javascript
vue配置请求本地json数据的方法
Apr 11 Javascript
对vue中methods互相调用的方法详解
Aug 30 Javascript
详解vue中axios的使用与封装
Mar 20 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
谏山创故乡大分县日田市水坝将设立《进击的巨人》立艾伦、三笠以及阿尔敏的铜像!
2020/03/06 日漫
Notice: Undefined index: page in E:\PHP\test.php on line 14
2010/11/02 PHP
完整删除ecshop中获取店铺信息的API
2014/12/24 PHP
php如何获取文件的扩展名
2015/10/28 PHP
thinkPHP3.1验证码的简单实现方法
2016/04/22 PHP
PHP针对多用户实现更换头像功能
2016/09/04 PHP
PHP实现图片批量打包下载功能
2017/03/01 PHP
如何在PHP中生成随机数
2020/06/04 PHP
css图片自适应大小
2007/11/28 Javascript
点击下载链接 弹出页面实现代码
2009/10/01 Javascript
jquery提示 "object expected"的解决方法
2009/12/13 Javascript
JavaScript学习笔记(十)
2010/01/17 Javascript
在JavaScript中用getMinutes()方法返回指定的分时刻
2015/06/10 Javascript
深入理解JavaScript中的箭头函数
2015/07/28 Javascript
详解Javascript中的Object对象
2016/02/28 Javascript
JS+CSS实现鼠标经过弹出一个DIV框完整实例(带缓冲动画渐变效果)
2016/03/25 Javascript
理解 javascript 中的函数表达式与函数声明
2017/07/07 Javascript
node.js基础知识小结
2018/02/26 Javascript
详解vue-cli3使用
2018/08/14 Javascript
vue侧边栏动态生成下级菜单的方法
2018/09/07 Javascript
PHPStorm中如何对nodejs项目进行单元测试详解
2019/02/28 NodeJs
webpack结合express实现自动刷新的方法
2019/05/07 Javascript
小程序绑定用户方案优化小结
2019/05/15 Javascript
jQuery实现手风琴效果(蒙版)
2020/01/11 jQuery
详解钉钉小程序组件之自定义模态框(弹窗封装实现)
2020/03/07 Javascript
浅谈vue在html中出现{{}}的原因及解决方式
2020/11/16 Javascript
python实现2014火车票查询代码分享
2014/01/10 Python
python itchat实现微信好友头像拼接图的示例代码
2017/08/14 Python
python中pathlib模块的基本用法与总结
2020/08/17 Python
Shopee越南:东南亚与台湾电商平台
2019/02/03 全球购物
软件部经理岗位职责范本
2014/02/25 职场文书
教师节倡议书
2014/08/30 职场文书
2014党员干部四风问题对照检查材料思想汇报
2014/09/24 职场文书
2016年“5.12”国际护士节活动总结
2016/04/06 职场文书
不要在HTML中滥用div
2021/05/08 HTML / CSS
python模拟浏览器 使用selenium进入好友QQ空间并留言
2022/04/12 Python