JavaScript 中的作用域和提升 - 全面解释

JavaScript 中的作用域

JavaScript 中的范围是指代码中可以使用或查看某些变量或函数的区域。它定义了您可以在何处访问特定值或操作。 JavaScript 中的作用域主要有两种类型：

1. 全球范围

2. 本地作用域（函数和块作用域）

全球范围

当变量在任何函数或块之外声明时，它就成为全局范围的一部分。可以从代码中的任何位置访问它。

let globalVar = "I'm global";

function printGlobalVar() {
  console.log(globalVar); // Accessible here
}

printGlobalVar(); // Output: I'm global
console.log(globalVar); // Output: I'm global

在此示例中，globalVar 在任何函数之外声明，这使其成为全局变量。这意味着可以在代码中的任何位置访问它，无论是在函数内部还是在函数外部。当调用 printGlobalVar() 函数时，它会记录 globalVar 的值，因为该函数可以访问全局范围。之后，当我们直接在函数外部记录 globalVar 时，它仍然会打印相同的值，因为它在整个程序中都可以作为全局变量使用。本质上，全局作用域允许在代码中的任何位置使用和访问该变量。

本地作用域（函数和块作用域）

函数或块中定义的变量（如循环或 if 语句）仅限于该函数或块。无法从该范围之外访问它们。

函数作用域：函数内声明的变量只能在该函数内访问。

function myFunction() {
  let localVar = "I'm local";
  console.log(localVar); // Output: I'm local
}

myFunction();
console.log(localVar); // Error: localVar is not defined

块作用域：与 let 和 const 一起引入的块作用域适用于块 ({}) 内声明的变量，例如循环、条件和 try-catch 块。这些变量只能在该块内访问。

if (true) {
  let blockVar = "I'm block scoped";
  console.log(blockVar); // Output: I'm block scoped
}

console.log(blockVar); // Error: blockVar is not defined

相比之下，用 var 声明的变量是函数作用域，这意味着它们被提升到函数顶部或全局，即使在块内声明也是如此。

JavaScript 中的提升

提升是 JavaScript 在编译阶段将声明移动到其包含范围顶部的默认行为。这意味着在执行任何代码之前都会处理变量和函数声明。

变量提升

在使用 var 声明变量的情况下，变量会被提升，但其初始化不会。如果您尝试在初始化之前访问变量，这会导致臭名昭著的“未定义”行为。

console.log(myVar); // Output: undefined
var myVar = "Hello";
console.log(myVar); // Output: Hello

JavaScript 引擎在幕后执行以下操作：

var myVar;
console.log(myVar); // Output: undefined
myVar = "Hello";
console.log(myVar); // Output: Hello

在此示例中，JavaScript 将 var myVar 声明提升到顶部，因此代码的行为就像是写在顶部一样。第一个 console.log 输出未定义，因为该变量已声明（提升）但尚未分配值。分配后，第二个 console.log 输出 5。这显示了提升如何与 var 一起工作——声明被提升，但值稍后分配。

对于 let 和 const，当声明被提升时，它们不会被初始化，直到代码到达该行，并且尝试在声明之前访问它们会导致引用错误。

console.log(myLet); // ReferenceError: Cannot access 'myLet' before initialization
let myLet = "Hello";

功能提升

函数声明完全提升，这意味着您可以在声明之前调用函数。

greet(); // Output: Hello, World!

function greet() {
  console.log("Hello, World!");
}

函数移至顶部，因此可以在声明之前调用。

但是，使用 var、let 或 const 的函数表达式 不会以与函数声明相同的方式提升。在提升方面，它们的行为类似于常规变量，这意味着该函数仅在赋值后才可用。

greet(); // Error: greet is not a function

var greet = function() {
  console.log("Hello!");
};

在上面的示例中，greet 被提升为 var 变量，但最初是未定义的，因此尝试在赋值之前调用它会导致错误。

实践中的范围和提升

• 全局范围变量可以在整个脚本中访问。

• 局部作用域变量仅限于声明它们的块或函数。

• 提升 允许您在声明之前使用函数和变量，但对 let、const 和函数表达式有限制。

这些概念是理解变量和函数在 JavaScript 中的行为方式的基础，掌握它们对于编写清晰且无错误的代码至关重要。

以上是JavaScript 中的作用域和提升 - 全面解释的详细内容。更多信息请关注PHP中文网其他相关文章！