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 相关文章推荐
Jquery插件之打造自定义的select标签
Nov 30 Javascript
js 自制滚动条的小例子
Mar 16 Javascript
基于Css3和JQuery实现打字机效果
Aug 11 Javascript
常用原生JS兼容性写法汇总
Apr 27 Javascript
Boostrap入门准备之border box
May 09 Javascript
jQuery ajax中使用confirm,确认是否删除的简单实例
Jun 17 Javascript
Bootstrap多级菜单的实现代码
May 23 Javascript
jQuery自定义多选下拉框效果
Jun 19 jQuery
js图片上传的封装代码
Aug 01 Javascript
jQuery实现菜单栏导航效果
Aug 15 jQuery
JS把字符串格式的时间转换成几秒前、几分钟前、几小时前、几天前等格式
Jul 10 Javascript
JavaScript实现音乐播放器
Aug 14 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如何获取文件的扩展名
2015/10/28 PHP
PHPUnit测试私有属性和方法功能示例
2018/06/12 PHP
PHP使用SOAP调用API操作示例
2018/12/25 PHP
JavaScript 判断日期格式是否正确的实现代码
2011/07/04 Javascript
javascript ajax 仿百度分页函数
2013/10/29 Javascript
Vue2.0实现购物车功能
2017/06/05 Javascript
Vue filters过滤器的使用方法
2017/07/14 Javascript
node.js多个异步过程中判断执行是否完成的解决方案
2017/12/10 Javascript
js实现左右两侧浮动广告
2018/07/09 Javascript
解决Vue2.0中使用less给元素添加背景图片出现的问题
2018/09/03 Javascript
详解React 的几种条件渲染以及选择
2018/10/23 Javascript
Vue动态组件和异步组件原理详解
2019/05/06 Javascript
layui实现三级联动效果
2019/07/26 Javascript
layui框架与SSM前后台交互的方法
2019/09/12 Javascript
webpack的pitching loader详解
2019/09/23 Javascript
为nuxt项目写一个面包屑cli工具实现自动生成页面与面包屑配置
2019/09/29 Javascript
Angular value与ngValue区别详解
2019/11/27 Javascript
vue实现PC端分辨率适配操作
2020/08/03 Javascript
vuex的数据渲染与修改浅析
2020/11/26 Vue.js
Python中的深拷贝和浅拷贝详解
2015/06/03 Python
Python使用SocketServer模块编写基本服务器程序的教程
2016/07/12 Python
Python标准库sched模块使用指南
2017/07/06 Python
python中验证码连通域分割的方法详解
2018/06/04 Python
python+pyqt5实现24点小游戏
2019/01/24 Python
PyQt4实时显示文本内容GUI的示例
2019/06/14 Python
python实现代码统计器
2019/09/19 Python
浅谈Tensorflow 动态双向RNN的输出问题
2020/01/20 Python
Django通过设置CORS解决跨域问题
2020/11/26 Python
python热力图实现简单方法
2021/01/29 Python
pytorch 实现L2和L1正则化regularization的操作
2021/03/03 Python
HTML5 audio标签使用js进行播放控制实例
2015/04/24 HTML / CSS
厨房管理计划书
2014/04/27 职场文书
车间安全生产标语
2014/06/06 职场文书
三问三解心得体会
2014/09/05 职场文书
个人合作协议范本
2015/08/06 职场文书
python如何查找列表中元素的位置
2022/05/30 Python