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之超简单的div显示和隐藏特效demo(分享)
Jul 09 Javascript
js获取GridView中行数据的两种方法 分享
Jul 13 Javascript
iframe里使用JavaScript控制主页转向的方法
Apr 03 Javascript
基于jquery animate操作css样式属性小结
Nov 27 Javascript
Javascript中作用域的详细介绍
Oct 06 Javascript
微信小程序 Flex布局详解
Oct 09 Javascript
js学习笔记之事件处理模型
Oct 31 Javascript
jQuery弹出窗口打开链接的实现代码
Dec 24 Javascript
vue-cli webpack模板项目搭建及打包时路径问题的解决方法
Feb 26 Javascript
Vue-Quill-Editor富文本编辑器的使用教程
Sep 21 Javascript
vue-router传递参数的几种方式实例详解
Nov 13 Javascript
原生javascript制作贪吃蛇小游戏的方法分析
Feb 26 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设计模式 Adapter(适配器模式)
2011/06/26 PHP
PHP中file_exists与is_file,is_dir的区别介绍
2012/09/12 PHP
详解PHP实现定时任务的五种方法
2016/07/25 PHP
PHP CURL使用详解
2019/03/21 PHP
动态的绑定事件addEventListener方法的使用
2014/01/24 Javascript
javascript内置对象arguments详解
2014/03/16 Javascript
JavaScript实现的类字典插入或更新方法实例
2015/07/10 Javascript
JavaScript取得WEB安全颜色列表的方法
2015/07/14 Javascript
js ajaxfileupload.js上传报错的解决方法
2016/05/05 Javascript
Nuxt配合Node在实际生产中的应用详解
2018/08/07 Javascript
JavaScript常见鼠标事件与用法分析
2019/01/03 Javascript
layui--js控制switch的切换方法
2019/09/03 Javascript
浅谈监听单选框radio改变事件(和layui中单选按钮改变事件)
2019/09/10 Javascript
如何在Vue中抽离接口配置文件
2019/10/31 Javascript
vue远程加载sfc组件思路详解
2019/12/25 Javascript
python处理json数据中的中文
2014/03/06 Python
Python自动连接ssh的方法
2015/03/07 Python
使用python绘制常用的图表
2016/08/27 Python
纯python实现机器学习之kNN算法示例
2018/03/01 Python
致Python初学者 Anaconda入门使用指南完整版
2018/04/05 Python
PyQt5根据控件Id获取控件对象的方法
2019/06/25 Python
python 图片二值化处理(处理后为纯黑白的图片)
2019/11/01 Python
python scrapy重复执行实现代码详解
2019/12/28 Python
Tensorflow训练MNIST手写数字识别模型
2020/02/13 Python
Python3爬虫发送请求的知识点实例
2020/07/30 Python
安装pyecharts1.8.0版本后导入pyecharts模块绘图时报错: “所有图表类型将在 v1.9.0 版本开始强制使用 ChartItem 进行数据项配置 ”的解决方法
2020/08/18 Python
Python读取多列数据以及用matplotlib制作图表方法实例
2020/09/23 Python
CSS3中伪元素::before和::after的用法示例
2017/09/18 HTML / CSS
HTML5图片预览实例分享
2014/06/04 HTML / CSS
iframe与window.onload如何使用详解
2020/05/07 HTML / CSS
服务员岗位职责
2014/01/29 职场文书
《猴子种树》教学反思
2014/02/14 职场文书
村居抓节水倡议书
2014/05/19 职场文书
档案工作汇报材料
2014/08/21 职场文书
幼儿园大班个人总结
2015/02/28 职场文书
职场:企业印章管理制度(模板)
2019/10/18 职场文书