許多文章使用諸如提升、臨時死區（TDZ）、功能性和塊作用域等術語來解釋var、let和const之間的差異，通常沒有參考標準。其中一些術語甚至沒有包含在語言標準中。在不參考語言標準的情況下解釋該主題是完全可以的。不過，我透過引用來解釋這個主題，以便那些想要更深入挖掘的人，因為理解 ECMAScript 標準對於全面掌握 JavaScript 至關重要。
許多組織都有 JavaScript 參考資料，例如 MDN Web Docs、javascript.info 等。然而，有一個標準組織的唯一目的是標準化和記錄電腦系統。這個組織就是 Ecma International，該領域的可靠權威。該組織維護一個名為 ECMA-262 的標準，這是一個公司的內部編號來識別該標準。 Ecma International 將此標準定義為 ECMAScript 通用程式語言（我們通常稱為 JavaScript）的支柱。理解這個標準是理解語言本身的關鍵。截至 2024 年 8 月的最新標準是 ECMAScript 第 15 版，也稱為ECMAScript 2024。
要理解 var、let 和 const 之間的區別，有必要了解執行上下文的概念。
執行上下文是ECMAScript標準中定義的抽象結構。它是當前程式碼執行的環境。為了簡化事情，我們可以假設存在全域執行上下文和功能執行上下文。
為了追蹤程式碼的執行，執行上下文包含多個元件，稱為狀態元件。其中，LexicalEnvironment 和 VariableEnvironment 在理解 var、let 和 const 關鍵字的行為時至關重要。
LexicalEnvironment 和 VariableEnvironment 都是環境記錄。環境記錄也是 ECMAScript 標準中定義的抽象資料結構。它建立了標識符與特定變數和函數的關聯。標識符是 JavaScript 中引用值、函數、類別和其他資料結構的名稱。在下面的例子中，讓variable = 42，variable是儲存數字42的值的變數名稱（識別碼）。
每次執行程式碼時，執行上下文都會建立一個新的環境記錄。除了儲存標識符之外，環境記錄還有一個 [[OuterEnv]] 字段，可以為 null 或對外部環境記錄的引用。
以圖形方式，上一個範例中的執行上下文和環境記錄可以表示如下：
關於執行上下文要記住的另一個重要點是它有兩個不同的階段：創建階段和執行階段。這兩個階段對於理解 var 和 let 或 const 之間的差異至關重要。
在 ECMAScript 標準的 14.3.1 Let 和 Const 聲明中，說明了以下內容：
let 和 const 宣告定義了作用域為執行執行上下文的 LexicalEnvironment 的變數。這些變數是在實例化其包含的環境記錄時創建的，但在評估變數的 LexicalBinding 之前不能以任何方式存取。由帶有初始化程序的 LexicalBinding 定義的變數在計算 LexicalBinding 時（而不是在創建變數時）被分配其初始化程序的賦值表達式的值。如果 let 宣告中的 LexicalBinding 沒有初始值設定項，則在對 LexicalBinding 求值時，變數會被賦予未定義的值。
為了理解這句話，我會逐句解釋。
let 和 const 宣告定義了作用域為正在執行的執行上下文的 LexicalEnvironment 的變數。
這意味著使用 let 或 const 關鍵字建立的變數的作用域是定義它們的區塊。程式碼區塊是大括號內的任意 JavaScript 程式碼。
變數在實例化其包含的環境記錄時創建，但在評估變數的 LexicalBinding 之前不能以任何方式存取。
As previously mentioned, the Execution Context has two phases. This statement means that during theCreation Phaseof the Execution Context, variables are stored in their corresponding Environment Record but have not yet been assigned any value. They are uninitialised.
console.log(varaible) // ReferenceError: Cannot access 'varaible' before initialization let varaible = 42 // Global Execution Context Creation Phase { // Environment Record { identifier: 'variable' value: uninitialised } [[OuterEnv]]: null }
Because the variable is already created (instantiated) in the Environment Record, the Execution Context knows about it but can't access it before evaluation(theExecution Phaseof the Execution context). The state of the variable being uninitialised is also known as aTemporary Dead Zone(TDZ). We would have a different error if the variable hadn't been created in the Environment Record.
console.log(varaible) // ReferenceError: varaible is not defined // Global Execution Context Creation Phase { // Environment Record { } [[OuterEnv]]: null }
A variable defined by a LexicalBinding with an Initializer is assigned the value of its Initializer's AssignmentExpression when the LexicalBinding is evaluated, not when the variable is created.
LexicalBinding is a form of the Identifier, which represents the variable's name. The Initializer is the variable's value, and AssignmentExpression is the expression used to assign that value to the variable's name, such as the '=' sign in let variable = 42. Therefore, the statement above means that variables created with let or const keywords are assigned their value during theExecution Phaseof the Execution Context.
let variable = 42 // Global Execution Context Creation Phase { // Environment Record { identifier: 'variable' value: uninitialised } [[OuterEnv]]: null } // Global Execution Context Execution Phase { // Environment Record { identifier: 'variable' value: 42 } [[OuterEnv]]: null }
If a LexicalBinding in a let declaration does not have an Initializer the variable is assigned the value undefined when the LexicalBinding is evaluated.
This means that if a let variable is created without an initial value, undefined is assigned to it during theExecution Phaseof the Execution Context. Variables declared with the const keyword behave differently. I will explain it in a few paragraphs later.
let variable // Global Execution Context Creation Phase { // Environment Record { identifier: 'variable' value: uninitialised } [[OuterEnv]]: null } // Global Execution Context Execution Phase { // Environment Record { identifier: 'variable' value: undefined } [[OuterEnv]]: null }
The standard also defines a subsection called 14.3.1.1 'Static Semantics: Early Errors,' which explains other essential aspects of variables defined with the let and const keywords.
LexicalDeclaration:LetOrConstBindingList;
- It is a Syntax Error if the BoundNames of BindingList contains "let".
- It is a Syntax Error if the BoundNames of BindingList contains any duplicate entries.LexicalBinding:BindingIdentifierInitializer
- It is a Syntax Error if Initializer is not present and IsConstantDeclaration of the LexicalDeclaration containing this LexicalBinding is true.
LetOrConstis a grammar rule which specifies that variable declarations can start with the let or const keywords.
BindingListis a list of variables declared with let or const keywords. We could imagineBindingListas a data structure like this:
let a = 1 let b = 2 let c = 3 const d = 4 const e = 5 BindingList: [ { identifier: 'a', value: 1 }, { identifier: 'b', value: 2 }, { identifier: 'c', value: 3 }, { identifier: 'd', value: 4 }, { identifier: 'e', value: 5 } ]
A Syntax Error is an error that breaks the language's grammatical rules. They occur before the code's execution. Let's analyse the first Syntax Error.
- It is a Syntax Error if the BoundNames of BindingList contains "let".
The BoundNames of BindingList are the names of variables declared with let or const keywords.
let a = 1 let b = 2 let c = 3 const d = 4 const e = 5 BoundNames: ['a', 'b', 'c', 'd', 'e']
A Syntax Error will occur when the BoundNames list contains “let”.
let let = 1 // SyntaxError: let is disallowed as a lexically bound name const let = 1 // SyntaxError: let is disallowed as a lexically bound name
- It is a Syntax Error if the BoundNames of BindingList contains any duplicate entries.
It means we can't use the same names for variables declared with the let or const keywords if they are already used in that scope.
let a = 1 let a = 2 // SyntaxError: Identifier 'a' has already been declared
- It is a Syntax Error if Initializer is not present and IsConstantDeclaration of the LexicalDeclaration containing this LexicalBinding is true.
IsConstantDeclaration is an abstract operation in the standard that checks if the variable is declared with the const keyword. This rule could be decrypted like that: if IsConstantDeclaration is true and the variable doesn't have an Initializer, a Syntax Error will be returned.
const x; // SyntaxError: Missing initializer in const declaration
Another vital thing only related to the const keyword: variables declared with the const keyword can't be reassigned. It is not stated explicitly in the standard, but we can get it from the IsConstantDeclaration operation and the syntax rule that variables declared with the const keyword should always be initialised with the Initializer
const variable = 42 variable = 46 // TypeError: Assignment to constant variable
Before 2015, when the ECMAScript 2015 wasn't released yet, only the var keyword was available to create a variable in JavaScript.
In the paragraph 14.3.2 Variable Statement of ECMAScript standard the following is stated:
A var statement declares variables scoped to the running execution context's VariableEnvironment. Var variables are created when their containing Environment Record is instantiated and are initialized to undefined when created. Within the scope of any VariableEnvironment a common BindingIdentifier may appear in more than one VariableDeclaration but those declarations collectively define only one variable. A variable defined by a VariableDeclaration with an Initializer is assigned the value of its Initializer's AssignmentExpression when the VariableDeclaration is executed, not when the variable is created.
I again explain it sentence by sentence.
A var statement declares variables scoped to the running execution context's VariableEnvironment.
This means that variables declared with the var keyword are either function-scoped if declared inside a function or global-scoped if declared outside any function.
let condition = true if (condition) { var globalVariable = 'This is a global variable' } console.log(globalVariable ) // This is a global variable function outerFunction() { // Outer Function Execution Context var outerVariable = 'This is an outer variable' } outerFunction() // Global Execution Context { // Environment Record { identifier: 'condition' value: true } { identifier: 'globalVariable' value: 'This is a global variable' } { identifier: 'outerFunction' value: Function } [[OuterEnv]]: null } // Outer Function Execution Context { // Environment Record { identifier: 'outerVariable' value: 'This is an outer variable' } [[OuterEnv]]: Global Execution Context }
Var variables are created when their containing Environment Record is instantiated and are initialized to undefined when created.
During theCreation Phaseof the Execution Context variables are assigned the undefined value. The process of assigning the undefined to a variable during theCreation Phaseis often referred to as"hoisting"ordeclaration hoisting. It is worth mentioning that the terms"hoisting"ordeclaration hoistingare not included in the standard. However, it is a convention used by many developers to explain the availability of variables "before" they were declared.
console.log(globalVariable) // undefined var globalVariable = 'This is a global variable' // Global Execution Context Creation Phase { // Environment Record { identifier: 'globalVariable' value: undefined } [[OuterEnv]]: null }
Sometimes, it is explained that the code example above is possible because variables declared with the var keyword are "moved" to the top of the scope. However, nothing is moved anywhere; it is only possible by assigning the undefined value to the variable during theCreation Phaseof Execution Context.
Within the scope of any VariableEnvironment a common BindingIdentifier may appear in more than one VariableDeclaration but those declarations collectively define only one variable.
BindingIdentifier is a more specific type of the Identifier. We used the Identifier term before to explain the name of a variable. While Identifier also refers to the variable's name, BindingIdentifier is only used in the context of the declaration of variables (function or other data structure).
let variable = 42 // BindingIdentifier console.log(variable ) // Identifier
Now, let's go back to explaining the sentence's meaning.
BindingIdentifier may appear in more than one VariableDeclaration
In the same scope, we can create multiple variables with the same name using the var keyword, whilst all these "variables" reference only one variable.
var variable = 42 var variable = 66 var variable = 2015 // Execution context { // Environment Record { identifier: 'variable ' value: 2015 } [[OuterEnv]]: null }
It may appear we declared three variables with the BindingIdentifier variable, but we just reassigned the original variable variable twice. First, we reassigned it from 42 to 66, then from 66 to 2015
A variable defined by a VariableDeclaration with an Initializer is assigned the value of its Initializer's AssignmentExpression when the VariableDeclaration is executed, not when the variable is created.
The variable's value (Initializer) is assigned to it during theExecution Phase, not the Creation Phase of the Execution Context. Variables declared with the let and const keywords behave identically.
var variable = 42 // Global Execution Context Creation Phase { // Environment Record { identifier: variable value: undefined } [[OuterEnv]]: null } // Global Execution Context Execution Phase { // Environment Record { identifier: variable value: 42 } [[OuterEnv]]: null }
To sum up the article, I would like to highlight the following differences:
The first difference between variables created with var, let, and const keywords is how they are scoped. Variables created with let and const are scoped to the LexicalEnvironment, meaning they are available in the Environment Record of a block, function, or the Global Execution Context. In contrast, variables created with var are scoped to the VariableEnvironment, meaning they are only available in the Environment Record of a function or the Global Execution Context.
During the Execution Context'sCreation Phase, variables created with let and const are uninitialised, whilst var variables are assigned the undefined value. The state of let and const being uninitialised is sometimes referenced as aTemporal Dead Zone or TDZ. Also, the behaviour of var being assigned the undefined value is usually known as“hoisting”.
Variables created with let and var keywords are assigned the undefined value if Initializer is not provided. Meanwhile, const variables must always have Initializer.
Variables created with the var keyword can have duplicate names since they all reference the same variable. However, let and const variables can't have duplicate names — doing so results in a Syntax Error.
Variables created with let and var keywords can reassign their initial Initializer (value) to a different one. But, const variables can't have their Initializer reassigned.
以上是透過 ECMAScript 標準的棱鏡了解 var、let 和 const 之間的差異。的詳細內容。更多資訊請關注PHP中文網其他相關文章！
