javascript - 如果 JavaScript 是一种解释性语言，提升如何工作？

Question

我对解释器的理解是它逐行执行程序，我们可以看到即时结果，不像编译语言那样转换代码，然后执行它。

我的问题是，在 Javascript 中，解释器如何知道程序中某处声明了一个变量并将其记录为 undefined ?

考虑下面的程序:

function do_something() {
  console.log(bar); // undefined (but in my understanding about an interpreter, it should be throwing error like variable not declared)
  var bar = 111;
  console.log(bar); // 111
}

隐含理解为:

function do_something() {
  var bar;
  console.log(bar); // undefined
  bar = 111;
  console.log(bar); // 111
}

这是如何运作的？

Answer 1

这个概念' var如果你从表面上想起来，“提升”是一个相当令人困惑的问题。你必须深入研究语言本身是如何工作的。 JavaScript 是 ECMAScript 的一种实现，是一种解释型语言，这意味着您编写的所有代码都会被输入到另一个程序中，该程序反过来解释代码，根据源代码的一部分调用某些函数。
例如，如果你写:

function foo() {}

解释器一旦满足你的函数声明，就会调用它自己的一个名为 FunctionDeclarationInstantiation 的函数。创建函数。解释器不是将 JavaScript 编译成本地机器代码，而是在读取 JavaScript 代码的每个部分时“按需”执行 C、C++ 和自己的机器代码。它不一定意味着逐行，所有解释都意味着不会编译为机器代码。执行机器代码的单独程序读取您的代码并即时执行该机器代码。
这与 var 有何关系声明提升或任何与此相关的声明是解释器首先通读所有代码一次而不执行任何实际代码。它分析代码并将其分成块，称为 词法环境 . Per the ECMAScript 2015 Language Specification :

8.1 Lexical Environments

A Lexical Environment is a specification type used to define the association of Identifiers to specific variables and functions based upon the lexical nesting structure of ECMAScript code. A Lexical Environment consists of an Environment Record and a possibly null reference to an outer Lexical Environment. Usually a Lexical Environment is associated with some specific syntactic structure of ECMAScript code such as a FunctionDeclaration, a BlockStatement, or a Catch clause of a TryStatement and a new Lexical Environment is created each time such code is evaluated.

An Environment Record records the identifier bindings that are created within the scope of its associated Lexical Environment. It is referred to as the Lexical Environment’s EnvironmentRecord

在执行任何代码之前，解释器会遍历您的代码，并为每个词法结构(例如函数声明、新块等)创建一个新的词法环境。在那些词法环境中， 环境记录记录在该环境中声明的所有变量、它们的值以及有关该环境的其他信息。这就是允许 JavaScript 管理变量作用域、变量查找链的原因， this值(value)等。
每个词法环境都与一个 code realm 相关联。 :

8.2 Code Realms

Before it is evaluated, all ECMAScript code must be associated with a Realm. Conceptually, a realm consists of a set of intrinsic objects, an ECMAScript global environment, all of the ECMAScript code that is loaded within the scope of that global environment, and other associated state and resources.

在实际执行任何代码之前，您编写的 JavaScript/ECMAScript 代码的每一部分都与一个领域相关联。每个领域都由与领域相关联的特定代码部分使用的内在值组成， this领域的对象，领域的词汇环境，等等。
这意味着代码的每个词法部分在执行之前都会被分析。然后 a realm is created包含有关该代码集的所有信息。源码，需要什么变量来执行，声明了哪些变量，是什么 this是等。在 var的情况下声明，当你像这里一样定义一个函数时，就会创建一个领域:

function do_something() {
  console.log(bar); // undefined
  var bar = 111;
  console.log(bar); // 111
}

在这里，一个 FunctionDeclaration 创建了一个新的词法环境，与一个新的领域相关联。创建词法环境后，解释器会分析代码并找到所有声明。然后首先在该词法环境的最开始处处理这些声明，因此是函数的“顶部”:

13.3.2 Variable Statement

A var statement declares variables that are scoped to the running execution context’s VariableEnvironment. Var variables are created when their containing Lexical Environment is instantiated and are initialized to undefined when created.

因此，每当一个词法环境被实例化(创建)时，所有 var声明被创建，初始化为 undefined .这意味着它们在执行任何代码之前被处理，在词法环境的“顶部”:

var bar; //Processed and declared first
console.log(bar);
bar = 111;
console.log(bar);

然后，在分析完所有 JavaScript 代码后，它最终会被执行。因为声明首先被处理，它被声明(并初始化为 undefined )给你 undefined .
Hoist 确实有点用词不当。 Hoist 意味着将声明直接移到当前词法环境的顶部，而是在执行之前对代码进行分析；什么都没有移动。

注: let和 const以同样的方式行事，也被吊起来，但这行不通:

function do_something() {
  console.log(bar); //ReferenceError
  let bar = 111;
  console.log(bar);
}

这将为您提供一个 ReferenceError 以尝试访问未初始化的变量。即使 let和 const声明被提升，规范明确指出你不能在初始化之前访问它们，不像 var :

13.3.1 Let and Const Declarations

let and const declarations define variables that are scoped to the running execution context’s LexicalEnvironment. The variables are created when their containing Lexical Environment is instantiated but may not be accessed in any way until the variable’s LexicalBinding is evaluated.

因此，在正式初始化之前，您无法访问该变量，无论是 undefined 还是任何其他值。这意味着您似乎无法像使用 var 那样“在声明之前访问它”。 .