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一般方法改写成面向对象方法的无限级折叠菜单示例代码
Jul 04 Javascript
用js一次改变多个input的readonly属性值的方法
Jun 11 Javascript
浅析javascript的间隔调用和延时调用
Nov 12 Javascript
jQuery控制cookie过期时间的方法
Apr 07 Javascript
jquery实现的点击翻书效果代码
Nov 04 Javascript
vue几个常用跨域处理方式介绍
Feb 07 Javascript
jQuery实现的监听导航滚动置顶状态功能示例
Jul 23 jQuery
详解vue2.6插槽更新v-slot用法总结
Mar 09 Javascript
layui问题之自动滚动二级iframe页面到指定位置的方法
Sep 18 Javascript
vue中 数字相加为字串转化为数值的例子
Nov 07 Javascript
Vue打包后访问静态资源路径问题
Nov 08 Javascript
Js图片点击切换轮播实现代码
Jul 27 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取进制余数函数代码
2012/01/19 PHP
PHP中设置时区,记录日志文件的实现代码
2013/01/07 PHP
php 地区分类排序算法
2013/07/01 PHP
PHP 搜索查询功能实现
2016/11/29 PHP
解决出现SoapFault (looks like we got no XML document)的问题
2017/06/24 PHP
thinkPHP框架中layer.js的封装与使用方法示例
2019/01/18 PHP
表单的一些基本用法与技巧
2006/07/15 Javascript
JavaScript 学习笔记(十一)
2010/01/19 Javascript
使用jQuery UI的tooltip函数修饰title属性的气泡悬浮框
2013/06/24 Javascript
基于jquery固定于顶部的导航响应浏览器滚动条事件
2014/11/02 Javascript
为JQuery EasyUI 表单组件增加焦点切换功能的方法
2017/04/13 jQuery
详解用node-images 打造简易图片服务器
2017/05/08 Javascript
Bootstrap多级菜单的实现代码
2017/05/23 Javascript
php 修改密码实现代码
2017/05/24 Javascript
一个简单的node.js界面实现方法
2018/06/01 Javascript
vue 组件中添加样式不生效的解决方法
2018/07/06 Javascript
详解操作虚拟dom模拟react视图渲染
2018/07/25 Javascript
使用Vue做一个简单的todo应用的三种方式的示例代码
2018/10/20 Javascript
详解三种方式在React中解决绑定this的作用域问题并传参
2020/08/18 Javascript
Python操作MySQL模拟银行转账
2018/03/12 Python
Django基于ORM操作数据库的方法详解
2018/03/27 Python
Python绘制正余弦函数图像的方法
2018/08/28 Python
Python发送邮件功能示例【使用QQ邮箱】
2018/12/04 Python
Python设计模式之外观模式实例详解
2019/01/17 Python
浅谈Python中的可迭代对象、迭代器、For循环工作机制、生成器
2019/03/11 Python
Python中的全局变量如何理解
2020/06/04 Python
德国滑雪和户外用品网上商店:XSPO
2019/10/30 全球购物
北京泡泡网网络有限公司.net面试题
2012/07/17 面试题
Python使用openpyxl复制整张sheet
2021/03/24 Python
艺术应用与设计专业个人的自我评价
2013/11/19 职场文书
医院护士专业个人的求职信
2013/12/09 职场文书
促销活动策划方案
2014/01/12 职场文书
马云北大演讲完整版:真心话,什么才是阿里的核心竞争力?
2014/04/04 职场文书
迟到检讨书范文
2015/01/27 职场文书
2015年党日活动总结范文
2015/03/25 职场文书
教你用Python写一个植物大战僵尸小游戏
2021/04/25 Python