ES6 顶层对象

简介: ES6 顶层对象

1. 顶层对象的属性

1.1 顶层对象

  • 浏览器环境指的是window对象。
  • Node 指的是global对象。
  • ES5 之中,顶层对象的属性与全局变量是等价的。
window.a = 1;
console.log(a); // 1
a = 2;
console.log(a); // 2

上面代码中,顶层对象的属性赋值与全局变量的赋值,是同一件事。

  顶层对象的属性与全局变量挂钩,被认为是 JavaScript 语言最大的设计败笔之一,存在以下问题:

  • 无法法在编译时就报出变量未声明的错误,只有运行时才能知道(因为全局变量可能是顶层对象的属性创造的,而属性的创造是动态的)。
  • 程序员很容易不知不觉地就创建了全局变量(比如打字出错)。
  • 顶层对象的属性是到处可以读写的,这非常不利于模块化编程。
  • window对象有实体含义,指的是浏览器的窗口对象,顶层对象是一个有实体含义的对象,也是不合适的。

ES6中为此做了一些改变,全局变量将逐步与顶层对象的属性脱钩。

  • 为了保持兼容性,var命令和function命令声明的全局变量,依旧是顶层对象的属性。
  • let命令、const命令、class命令声明的全局变量,不属于顶层对象的属性。
var a = 1;
// 如果在 Node 的 REPL 环境,可以写成 global.a
// 或者采用通用方法,写成 this.a
window.a // 1
let b = 1;
window.b // undefined

  由以上代码得知:全局变量avar命令声明,所以它是顶层对象的属性;全局变量blet命令声明,所以它不是顶层对象的属性,返回undefined

1.2 不同环境下的顶层对象

JavaScript 语言存在一个顶层对象,它提供全局环境(即全局作用域),所有代码都是在这个环境中运行。但是,顶层对象在各种环境中的实现是不统一的。

  • 浏览器里面,顶层对象是window,但 NodeWeb Worker 没有window
  • 浏览器和 Web Worker 里面,self也指向顶层对象,但是 Node 没有self
  • Node 里面,顶层对象是global,但其他环境都不支持。

  同一段代码为了能够在各种环境,都能取到顶层对象,现在一般是使用this关键字,但是有局限性。

  • 全局环境中,this会返回顶层对象。但是,Node.js 模块中this返回的是当前模块,ES6 模块中this返回的是undefined
  • 函数里面的this,如果函数不是作为对象的方法运行,而是单纯作为函数运行,this会指向顶层对象。但是,严格模式下,这时this会返回undefined
  • 不管是严格模式,还是普通模式,new Function('return this')(),总是会返回全局对象。但是,如果浏览器用了 CSP(Content Security Policy,内容安全策略),那么evalnew 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');
};

ES2020 在语言标准的层面,引入globalThis作为顶层对象。也就是说,任何环境下,globalThis都是存在的,都可以从它拿到顶层对象,指向全局环境下的this

  垫片库global-this模拟了这个提案,可以在所有环境拿到globalThis

相关文章
|
JavaScript API 开发者
vue自定义Hooks函数使用和封装思想
【8月更文挑战第8天】vue自定义Hooks函数使用和封装思想
560 1
|
9月前
|
XML JSON API
淘宝商品详情API的调用流程(python请求示例以及json数据示例返回参考)
JSON数据示例:需要提供一个结构化的示例,展示商品详情可能包含的字段,如商品标题、价格、库存、描述、图片链接、卖家信息等。考虑到稳定性,示例应基于淘宝开放平台的标准响应格式。
|
数据采集 JSON API
淘宝商品数据采集API技术分享
在电商领域,数据采集和分析对提升业务效率、优化用户体验至关重要。淘宝作为国内最大电商平台之一,提供了丰富的商品数据。通过淘宝商品采集API,开发者可高效获取这些数据,支持决策。本文详细介绍了如何注册、申请权限、构建请求、处理响应及注意事项,助力商家和开发者利用API进行商品数据采集。
|
10月前
|
JSON Shell API
如何通过API获取淘宝商品月销售数据
淘宝开放平台提供了丰富的API接口,允许开发者获取商品的详细信息,包括月销售数据。
|
9月前
|
存储 JSON API
淘宝商品详情API接口概述与JSON数据示例
淘宝商品详情API是淘宝开放平台提供的核心接口之一,为开发者提供了获取商品深度信息的能力。以下是技术细节和示例:
|
机器学习/深度学习 自然语言处理 数据可视化
文本挖掘与可视化:生成个性化词云的Python实践【7个案例】
词云(Word Cloud),又称为文字云或标签云,是一种用于文本数据可视化的技术,通过不同大小、颜色和字体展示文本中单词的出现频率或重要性。在词云中,更频繁出现的单词会显示得更大,反之则更小。
|
存储 安全 JavaScript
XSS跨站脚本攻击详解(包括攻击方式和防御方式)
这篇文章详细解释了XSS跨站脚本攻击的概念、原理、特点、类型,并提供了攻击方式和防御方法。
5991 2
|
自然语言处理 安全 数据挖掘
PaddleNLP基于ERNIR3.0文本分类以CAIL2018-SMALL数据集罪名预测任务为例【多标签】
文本分类任务是自然语言处理中最常见的任务,文本分类任务简单来说就是对给定的一个句子或一段文本使用文本分类器进行分类。文本分类任务广泛应用于长短文本分类、情感分析、新闻分类、事件类别分类、政务数据分类、商品信息分类、商品类目预测、文章分类、论文类别分类、专利分类、案件描述分类、罪名分类、意图分类、论文专利分类、邮件自动标签、评论正负识别、药物反应分类、对话分类、税种识别、来电信息自动分类、投诉分类、广告检测、敏感违法内容检测、内容安全检测、舆情分析、话题标记等各类日常或专业领域中。 文本分类任务可以根据标签类型分为**多分类(multi class)、多标签(multi label)、层次分类
PaddleNLP基于ERNIR3.0文本分类以CAIL2018-SMALL数据集罪名预测任务为例【多标签】
|
JSON 安全 数据挖掘
从入门到精通:淘宝API接口调用全攻略
概述: 在当今电子商务的繁荣发展下,淘宝作为中国领先的电商平台,不仅为消费者提供了便捷的购物环境,也为商家们提供了强大的数据支持和服务能力。淘宝开放平台提供的API接口使得商家能够高效地获取店铺和商品的实时数据,从而更好地分析市场趋势、优化店铺运营、提升用户体验。本文将详细介绍如何从入门到精通地调用淘宝API接口,使商家能够充分利用这一强大工具推动业务增长。
|
Java Maven
maven配置阿里云镜像源
maven配置阿里云镜像源
42177 1