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 时，它仍然会打印相同的值，因为它在整个程序中都可以作为全局变量使用。本质上，全局作用域允许在代码中的任何位置使用和访问该变量。

立即学习“Java免费学习笔记（深入）”；

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

函数或块中定义的变量（如循环或 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 中的行为方式的基础，掌握它们对于编写清晰且无错误的代码至关重要。