您当前的位置:首页 > 电脑百科 > 程序开发 > 语言 > javascript

JS全局变量是如何工作的?

时间:2019-10-09 13:37:51  来源:  作者:
原文: https://2ality.com/2019/07/global-scope.html翻译: 刘小夕

在这篇博文中,我们将研究 JAVAScript 的全局变量是如何工作的。如: scripts的范围,所谓的全局对象等等。

1.作用域

变量的词法作用域(简称:作用域)是可以访问它的程序的区域。 JavaScript 的作用域是静态的(它们在运行时不会改变)并且它们可以嵌套 - 例如:

function
 func
()
 
{
 
// (A)
 
const
 foo 
=
 
1
;
 
if
 
(
true
)
 
{
 
// (B)
 
const
 bar 
=
 
2
;
 
}
}

if 语句引入的作用域(行B)嵌套在函数 func()(行A)的作用域内。

在示例中, func 是 if 的外层作用域。

2.词法作用域

在 JavaScript 语言规范中,作用域是通过词法作用域“实现”的。它们由两部分组成:

  • 将变量名映射到变量值的环境记录(可以想象成是字典)。这是 JavaScript 存储变量的地方。环境记录中的一个 key-value 条目称为绑定。
  • 对外部环境的引用 - 表示当前环境所代表的作用域的外部作用域的环境。

因此,嵌套作用域树可以由嵌套环境树表示。

3.全局对象

全局对象是一个对象,其属性是全局变量。

  • 无处不在: globalThis
  • 全局对象的其他名称取决于平台和语言构造:
  • window:是引用全局对象的经典方式,但它只适用于普通浏览器环境; 不在 Node.js 和 WebWorkers 中。
  • self:在浏览器中随处可用,包括 WebWorkers。但是 Node.js 不支持它。
  • global:仅在 Node.js 中可用。

全局对象包含所有内置全局变量。

4.全局环境

全局作用域是“最外层”作用域 - 它没有外部作用域。它的环境是全局环境。每个环境都通过由外部引用链接的一系列环境与全局环境相关联。全局环境的外部引用为 null。

全局环境结合了两个环境记录
  • 对象式环境记录,其作用类似于普通环境记录,但保持其绑定与对象同步。在这种情况下,对象是全局对象。
  • 声明式环境记录。

下图显示了这些数据结构。

 

JS全局变量是如何工作的?

 

 

接下来的两个小节将解释如何组合对象记录和声明式记录。

4.1创建变量

为了创建一个真正全局的变量,你必须处于全局作用域内 - 必须要在 scripts 的顶层:

  • 顶级 const, let 和 class 在声明式环境记录中创建绑定。
  • 顶级 var 和函数声明在对象式环境记录中创建绑定。
<
script
>
 
const
 one 
=
 
1
;
 
var
 two 
=
 
2
;
</
script
>
<
script
>
 
// All scripts share the same top-level scope:
 console
.
log
(
one
);
 
// 1
 console
.
log
(
two
);
 
// 2
 
// Not all declarations create properties of the global object:
 console
.
log
(
window
.
one
);
 
// undefined
 console
.
log
(
window
.
two
);
 
// 2
</
script
>

此外,全局对象包含所有内置全局变量,并通过对象式记录将它们给全局环境。

4.2读取/设置变量

当我们获取或设置变量并且两个环境记录都具有该变量的绑定时,声明式环境记录将获胜:

<
script
>
 let foo 
=
 
1
;
 
// 声明式环境记录
 globalThis
.
foo 
=
 
2
;
 
// 对象式环境记录
 console
.
log
(
foo
);
 
// 1 (声明式记录获胜)
 console
.
log
(
globalThis
.
foo
);
 
// 2
</
script
>

5.模块环境

每个模块都有自己的环境,它存储所有顶级声明 - 包括导入。模块环境的外部环境是全局环境。

结论:为什么JavaScript既有全局变量又有全局对象?

通常认为将全局变量挂载到全局对象上是错误的。因此,较新的构造(如 const, let 和 classes)会创建正常的全局变量,不会成为全局对象的属性。(在 script作用域内时)。

值得庆幸的是,大多数用现代 JavaScript 编写的代码都存在于 ECMAScript 模块和 CommonJS模块中,每个模块都有自己的作用域。



Tags:JS 全局变量   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
在这篇博文中,我们将研究 JavaScript 的全局变量是如何工作的。如: scripts的范围,所谓的全局对象等等。...【详细内容】
2019-10-09  Tags: JS 全局变量  点击:(100)  评论:(0)  加入收藏
▌简易百科推荐
1、通过条件判断给变量赋值布尔值的正确姿势// badif (a === &#39;a&#39;) { b = true} else { b = false}// goodb = a === &#39;a&#39;2、在if中判断数组长度不为零...【详细内容】
2021-12-24  Mason程    Tags:JavaScript   点击:(6)  评论:(0)  加入收藏
给新手朋友分享我收藏的前端必备javascript已经写好的封装好的方法函数,直接可用。方法函数总计:41个;以下给大家介绍有35个,需要整体文档的朋友私信我,1、输入一个值,将其返回数...【详细内容】
2021-12-15  未来讲IT    Tags:JavaScript   点击:(20)  评论:(0)  加入收藏
1. 检测一个对象是不是纯对象,检测数据类型// 检测数据类型的方法封装(function () { var getProto = Object.getPrototypeOf; // 获取实列的原型对象。 var class2type =...【详细内容】
2021-12-08  前端明明    Tags:js   点击:(23)  评论:(0)  加入收藏
作者:一川来源:前端万有引力 1 写在前面Javascript中的apply、call、bind方法是前端代码开发中相当重要的概念,并且与this的指向密切相关。本篇文章我们将深入探讨这个关键词的...【详细内容】
2021-12-06  Nodejs开发    Tags:Javascript   点击:(19)  评论:(0)  加入收藏
概述DOM全称Document Object Model,即文档对象模型。是HTML和XML文档的编程接口,DOM将文档(HTML或XML)描绘成一个多节点构成的结构。使用JavaScript可以改变文档的结构、样式和...【详细内容】
2021-11-16  海人为记    Tags:DOM模型   点击:(35)  评论:(0)  加入收藏
入口函数 /*js加载完成事件*/ window.onload=function(){ console.log("页面和资源完全加载完毕"); } /*jQuery的ready函数*/ $(document).ready(function(){ co...【详细内容】
2021-11-12  codercyh的开发日记    Tags:jQuery   点击:(36)  评论:(0)  加入收藏
一、判断是否IE浏览器(支持判断IE11与edge)function IEVersion() {var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串var isIE = userAgent.indexOf("comp...【详细内容】
2021-11-02  V面包V    Tags:Javascript   点击:(40)  评论:(0)  加入收藏
Null、Undefined、空检查普通写法: if (username1 !== null || username1 !== undefined || username1 !== &#39;&#39;) { let username = username1; }优化后...【详细内容】
2021-10-28  前端掘金    Tags:JavaScript   点击:(51)  评论:(0)  加入收藏
今天我们将尝试下花 1 分钟的时间简单地了解下什么是 JS 代理对象(proxies)?我们可以这样理解,JS 代理就相当于在对象的外层加了一层拦截,在拦截方法里我们可以自定义一些个性化...【详细内容】
2021-10-18  前端达人    Tags:JS   点击:(51)  评论:(0)  加入收藏
带有多个条件的 if 语句把多个值放在一个数组中,然后调用数组的 includes 方法。// bad if (x === "abc" || x === "def" || x === "ghi" || x === "jkl") { //logic } // be...【详细内容】
2021-09-27  羲和时代    Tags:JS   点击:(58)  评论:(0)  加入收藏
最新更新
栏目热门
栏目头条