es6学习笔记-顶层对象_v1.0_byKL
es6学习笔记-顶层对象_v1.0
(虽然是笔记,但是基本是抄了一次ruan大师的文章了)
顶层对象
顶层对象,在浏览器环境指的是window对象,在Node指的是global对象。
ES5之中,顶层对象的属性与全局变量是等价的。
ES6为了改变这一点:
var命令和function命令声明的全局变量,依旧是顶层对象的属性;
let命令、const命令、class命令声明的全局变量,不属于顶层对象的属性
global对象
浏览器里面,顶层对象是window,
但 Node 和 Web Worker 没有window。
浏览器和 Web Worker 里面,self也指向顶层对象
但是Node没有self,Node 里面,顶层对象是global,但其他环境都不支持。
同一段代码为了能够在各种环境,都能取到顶层对象,现在一般是使用this变量,但是有局限性(如下):
全局环境中,this会返回顶层对象。但是,Node模块和ES6模块中,this返回的是当前模块。(所以在node命令行下解析es6代码,this指向并不是全局对象)
函数里面的this,如果函数不是作为对象的方法运行,而是单纯作为函数运行,this会指向顶层对象。但是,严格模式下,这时this会返回undefined。不管是严格模式,还是普通模式,
new Function('return this')(),
总是会返回全局对象。如果浏览器用了CSP(Content Security Policy,内容安全政策),那么eval、new Function这些方法都可能无法使用。
// 方法一
(typeof window !== 'undefined' ? window: (typeof process === 'object' &&typeof require === 'function' &&typeof global === 'object')? global: this);// 方法二
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');
};
typeof process === 'object' && typeof require === 'function' && typeof global === 'object'
如果为true,且不存在window对象时可以认为在node环境中,node的全局对象就是global等价于浏览器中的window对象。这个是node的定义,参考node官方self(window.self) 返回window的只读引用,即为一个顶层对象,所以
typeof self !== 'undefined'
时,可以认为在浏览器环境下获取到了顶层对象的一个只读引用typeof global !== 'undefined'
这个就是获取的node环境下的顶层对象,观察这两个函数,其作用都是获取顶层对象,一般来说js较多用到的地方是浏览器端(前端)和node端(后台),
参考segmentfault
加入垫片库来实现global对象
在语言标准的层面,引入global作为顶层对象。也就是说,在所有环境下,global都是存在的,都可以从它拿到顶层对象。
垫片库system.global
模拟了这个提案,可以在所有环境拿到global。
// CommonJS的写法
require('system.global/shim')();// ES6模块的写法
import shim from 'system.global/shim'; shim();
上面代码可以保证各种环境里面,global对象都是存在的。// CommonJS的写法
var global = require('system.global')();// ES6模块的写法
import getGlobal from 'system.global';
const global = getGlobal();
上面代码将顶层对象放入变量global。
参考引用:
es6-顶层对象
es实战2015
es6学习笔记-顶层对象_v1.0_byKL相关推荐
- ES6学习笔记(对象新增方法)
1.Object.is() ES5 比较两个值是否相等,只有两个运算符:相等运算符(==)和严格相等运算符(===).它们都有缺点,前者会自动转换数据类型,后者的NaN不等于自身,以及+0等于-0. ...
- es6学习笔记-字符串的扩展_v1.0_byKL
es6学习笔记-字符串的扩展_v1.0 字符的Unicode表示法 JavaScript 允许使用uxxxx的形式表示一个字符,但在 ES6 之前,单个码点仅支持u0000到uFFFF,超出该范围的必 ...
- ES6学习笔记(五):轻松了解ES6的内置扩展对象
前面分享了四篇有关ES6相关的技术,如想了解更多,可以查看以下连接 <ES6学习笔记(一):轻松搞懂面向对象编程.类和对象> <ES6学习笔记(二):教你玩转类的继承和类的对象> ...
- ES6学习笔记(三):教你用js面向对象思维来实现 tab栏增删改查功能
前两篇文章主要介绍了类和对象.类的继承,如果想了解更多理论请查阅<ES6学习笔记(一):轻松搞懂面向对象编程.类和对象>.<ES6学习笔记(二):教你玩转类的继承和类的对象>, ...
- ES6学习笔记04:Set与Map
ES6学习笔记04:Set与Map JS原有两种数据结构:Array与Object,ES6新增两种数据结构:Set与Map 一.Set数据结构 Set类似于数组,但是成员值不允许重复,因此主要用于数据 ...
- ES6学习笔记03:变量的解构赋值
ES6学习笔记03:变量的解构赋值 如果想从复杂数据结构(数组.对象)中获取某一个数据,可能需要大量的遍历操作才能完成.通过解构赋值,这一过程可以得到简化. 1.字符串的解构赋值 其实,Python也 ...
- ES6学习笔记01:Symbol数据类型
ES6学习笔记01:Symbol数据类型 1.Symbol定义 浏览demo01.html: 2.Symbol作对象属性名 Symbol函数可以接收一个字符串作为参数,表示对Symbol实例的描述,输 ...
- ES6学习笔记二arrow functions 箭头函数、template string、destructuring
接着上一篇的说. arrow functions 箭头函数 => 更便捷的函数声明 document.getElementById("click_1").onclick = ...
- # es6 学习笔记
es6 学习笔记 let变量 let和var用法级别一样 let不能重复声明,但是var可以 var varIns = "A"; var varIns = "B" ...
最新文章
- Java单例模式:饿汉与懒汉区别
- 20181102 T1 相遇
- 面向对象 - 继承性
- Ubuntu14.04 VSCode工程在root下无运行,在非root无法修改配置文件
- sql排名名次分页mysql_mysql 实现排名及中文排序实例[分页累加行号]
- Android项目跑不起来,本机的android虚拟机跑不起android小项目
- 腾讯或于本周正式宣布合并搜狗?官方回应:看点招聘及搜狗合并均正常进行...
- oracle中的sql文本类型,Oracle数据库的空间数据类型
- 继续跟上--“永远不要对一个外行聊你的专业”
- mybatis注册映射文件
- 单片机死机了怎么办?
- 计算机关机doc命,[计算机]自动关机命令设置.doc
- 5配置单臂路由器 VLAN 间路由
- Spark基本工作流程和作业调度
- oracle t7 1,Oracle SPARC t7-1服务器介绍及配置参数
- 计算机类(计算机科学与技术)大学生职业生涯规划书
- 超市结算系统软件测试,软件测试报告-超市管理系统【参考】.doc
- 局域网传输工具需求分析
- Cartographer使用3D激光雷达建立2D导航图(概率栅格地图)
- html5立体照片墙效果,jQuery超酷3D网格照片墙动画特效 -HTML5功能