JavaScript中局部变量和全局变量的区别详解

在JavaScript中，变量的作用域可以分为局部作用域和全局作用域。局部变量和全局变量的主要区别在于它们的作用范围和生命周期。

局部变量

局部变量是在函数内部声明的变量，只能在函数内部访问。它们的作用范围被限制在声明它们的函数内部，超出该范围将无法访问。

以下是一个示例，说明局部变量的使用：

function myFunction() {
  var localVar = 10; // 局部变量
  console.log(localVar); // 输出 10
}

myFunction();
console.log(localVar); // 报错: localVar未定义

在上面的示例中，localVar是在myFunction函数内部声明的局部变量。它只能在函数内部访问，当函数执行完毕后，局部变量将被销毁，无法在函数外部访问。

全局变量

全局变量是在函数外部声明的变量，可以在整个JavaScript程序中访问。它们的作用范围不受限制，可以在任何地方使用。

以下是一个示例，说明全局变量的使用：

var globalVar = 20; // 全局变量

function myFunction() {
  console.log(globalVar); // 输出 20
}

myFunction();
console.log(globalVar); // 输出 20

在上面的示例中，globalVar是在函数外部声明的全局变量。它可以在函数内部和函数外部访问，其生命周期与整个JavaScript程序的执行周期相同。

示例说明

示例一：局部变量与全局变量同名

当局部变量与全局变量同名时，局部变量将会覆盖全局变量。

var x = 5; // 全局变量

function myFunction() {
  var x = 10; // 局部变量
  console.log(x); // 输出 10
}

myFunction();
console.log(x); // 输出 5

在上面的示例中，函数myFunction内部声明了一个同名的局部变量x，它覆盖了全局变量x。在函数内部，x的值为10，而在函数外部，全局变量x的值仍然为5。

示例二：函数嵌套时的作用域

在函数嵌套的情况下，内部函数可以访问外部函数的局部变量，但外部函数无法访问内部函数的局部变量。

function outerFunction() {
  var outerVar = 15; // 外部函数的局部变量

  function innerFunction() {
    var innerVar = 20; // 内部函数的局部变量
    console.log(outerVar); // 输出 15
    console.log(innerVar); // 输出 20
  }

  innerFunction();
  console.log(innerVar); // 报错: innerVar未定义
}

outerFunction();

在上面的示例中，函数innerFunction是在函数outerFunction内部声明的。内部函数可以访问外部函数的局部变量outerVar，但外部函数无法访问内部函数的局部变量innerVar。