了解JavaScript的執行上下文和提升

執行上下文是JavaScript運行代碼的環境，分為全局和函數兩種，每種都經歷創建和執行兩個階段；2. 提升是JS在創建階段將聲明（非初始化）移到作用域頂部的行為，函數聲明完全提升，var變量聲明提升但值為undefined，let/const提升但處於暫時性死區不可訪問；3. 理解這兩個概念能幫你精準調試undefined或ReferenceError問題、避免var帶來的隱式提升陷阱、並明白let/const更安全的原因。

When you start digging into how JavaScript actually runs your code — especially the weird parts like why you can call a function before declaring it — you hit two key concepts: Execution Context and Hoisting . These aren't just interview buzzwords; they explain real behavior that trips up even intermediate developers.

Let's break them down in plain terms.

✅ What Is an Execution Context?

Think of an execution context as the environment where your JavaScript code runs. Every time a function is called (or your script starts), JS creates a new execution context for it. There are two main types:

• Global Execution Context : Created when your script first runs. Everything not inside a function lives here.
• Function Execution Context : Created each time a function is called.

Each context has two phases:

1. Creation Phase : JS sets up memory space for variables and functions (this is where hoisting happens).
2. Execution Phase : JS runs your code line by line.

This two-phase setup is crucial — it's why some things seem to work “before” they should.

? What Is Hoisting?

Hoisting is JavaScript's behavior of moving declarations (not initializations) to the top of their scope during the creation phase.

But here's the catch:

• Function declarations are fully hoisted — you can call them before they appear in code.
• Variable declarations ( var , let , const ) are only partially hoisted — their declaration is moved, but not their assignment.

Examples That Show the Difference:

 console.log(myVar); // undefined (not ReferenceError!)
var myVar = 5;

console.log(myFunc()); // "Hello!" — works!
function myFunc() {
  return "Hello!";
}

console.log(myLet); // ReferenceError!
let myLet = 10;

Why the difference?

• var myVar gets hoisted as var myVar = undefined; — so it exists but is undefined .
• function myFunc() is fully hoisted — the whole function is available.
• let myLet is hoisted but stays in the Temporal Dead Zone (TDZ) until the line where it's declared. Accessing it before that throws an error.

? Why This Matters in Real Code

You might not write code that calls things before declaring them (and you shouldn't!), but understanding this helps you:

• Debug weird undefined or ReferenceError issues.
• Avoid bugs when refactoring or working with legacy code using var .
• Understand why let / const are safer — they don't silently default to undefined .

For example, this kind of pattern is common in older code:

 if (condition) {
  var x = 1;
} else {
  var x = 2;
}
console.log(x); // Works — but x is function-scoped, not block-scoped

With let , you'd get clearer scoping — and avoid accidental hoisting surprises.

? Pro Tip: How to Avoid Hoisting Gotchas

• Use let and const instead of var — they're block-scoped and don't hoist in a confusing way.
• Always declare variables at the top of their scope (especially in functions) — it makes hoisting behavior predictable.
• Declare functions before calling them — even though JS allows it, it hurts readability.

Basically, hoisting isn't magic — it's just how JS sets up memory during the creation phase. Once you see execution context as a two-step process (setup then run), hoisting makes perfect sense.
It's not about when you write code — it's about when JS reads it.

以上是了解JavaScript的執行上下文和提升的詳細內容。更多資訊請關注PHP中文網其他相關文章！