JavaScript的全局变量是如何工作的

2019-07-16  本文已影响0人  xiaohesong

在这篇博客文章中,我们将研究JavaScript的全局变量是如何工作的。一些有趣的现象是: 脚本的作用域、所谓的全局对象 等等。

作用域

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

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

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

在这里例子里,func就是if的外部作用域。

词法环境

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

因此,嵌套作用域树由一个嵌套环境树表示,该树由外部引用链接。

全局对象

全局对象是一个对象,他的属性是全局变量。等下就会介绍他是怎么去和环境树相适应。它们有几个不同的名称:

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

全局环境

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

全局环境结合了两个环境记录:

下图显示了这些数据结构。过一会就会解释脚本作用域模块环境

image.png

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

创建变量

为了创建一个真正意义上的全局变量,你必须在全局作用域中 -- 只有一种情况,那就是在脚本的顶级。

<script>
  const one = 1;
  var two = 2;
</script>
<script>
  // 所有脚本共享相同的顶级作用域:
  console.log(one); // 1
  console.log(two); // 2
  
  // 并非所有声明都创建全局对象的属性:
  console.log(window.one); // undefined
  console.log(window.two); // 2
</script>

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

获取或设置变量

当我们获取或者设置一个变量,并且两个的环境记录(对象记录和声明记录)都有对变量的绑定,然后声明性记录会具有优势:

<script>
  let foo = 1; // 声明性的环境记录
  globalThis.foo = 2; // 对象环境记录

  console.log(foo); // 1 (声明性的环境记录具有优势)
  console.log(globalThis.foo); // 2
</script>

模块环境

每个模块有属于他自己的环境。他存储所有的顶级声明,也包含导入(import)。模块环境的外部环境是全局环境。

为什么JavaScript既有正常的全局变量又有全局对象?

全局对象通常会被认为是一个错误。因此,较新的构造(如const、let和class)创建正常的全局变量(在脚本作用域中)。

值得庆幸的是,大多数用现代JavaScript编写的代码都存在于ECMAScript模块和CommonJS模块中。每个模块都有自己的作用域,这就是为什么控制全局变量的规则很少对基于模块的代码有影响。

进一步阅读

总结

译者个人总结

环境记录包含了对象环境记录(object record)和声明性环境记录(declarative record)。

let,const, class的这些声明都是在声明性记录(declarative record)中创建的绑定,

var,function这种声明都是在对象记录(object record)中创建的绑定。

全局对象之所以可以访问var这些声明,是因为他会通过对象记录来获取。

对于js来说,全局对象通常被认为是一个错误,所以新的声明方法都是存储在声明性记录里。

原文: JavaScript的全局变量是如何工作的?

上一篇 下一篇

猜你喜欢

热点阅读