水冗水孚前端开发 2023-10-24

JavaScript作用域：变量的可见性与生命周期

文章目录隐藏

1. 全局作用域（Global Scope）
2. 函数作用域（Function Scope）
3. 块级作用域（Block Scope）
4. 词法作用域（Lexical Scope）
5. 闭包（Closure）
结语

作用域（Scope）是 JavaScript 中的一个重要概念，它决定了变量在代码中的可见性和生命周期。深入理解作用域对于编写高质量的 JavaScript 代码至关重要。本文将详细介绍 JavaScript 中的作用域，包括全局作用域、函数作用域、块级作用域以及词法作用域等重要概念。

1. 全局作用域（Global Scope）

全局作用域是整个 JavaScript 程序的最外层作用域，其中声明的变量可以在代码中的任何地方访问。全局作用域中声明的变量称为全局变量，它们在整个程序的生命周期内都可用。

var globalVar = "I'm a global variable";

function exampleFunction() {
  console.log(globalVar); // 可以访问全局变量
}

尽管全局变量在整个程序中都可用，但过度依赖全局变量可能导致命名冲突和代码不易维护。因此，应该谨慎使用全局变量。

2. 函数作用域（Function Scope）

函数作用域是指在函数内部声明的变量只在该函数内部可见。这意味着函数作用域内的变量对于函数外部的代码来说是不可见的。

function exampleFunction() {
  var localVar = "I'm a local variable";
  console.log(localVar); // 可以访问局部变量
}

console.log(localVar); // 无法访问局部变量，会导致 ReferenceError

函数作用域提供了一种有效的封装机制，使得变量在函数外部不容易被访问或修改。这有助于防止命名冲突和提高代码的可维护性。

3. 块级作用域（Block Scope）

在 ES6（ECMAScript 2015）之前，JavaScript 没有块级作用域，只有全局作用域和函数作用域。但通过引入let和const关键字，JavaScript 引入了块级作用域的概念。

块级作用域允许在代码块内部声明变量，这些变量只在该代码块内部可见。块级作用域通常与条件语句、循环和函数等控制结构一起使用。

if (true) {
  let blockVar = "I'm a block-scoped variable";
  console.log(blockVar); // 可以访问块级变量
}

console.log(blockVar); // 无法访问块级变量，会导致 ReferenceError

块级作用域提供了更严格的变量封装，有助于减少变量泄漏和提高代码的可读性。

4. 词法作用域（Lexical Scope）

词法作用域是指变量的作用域由它们在代码中的位置决定，而不是在运行时动态确定。JavaScript 是一种词法作用域语言，也被称为静态作用域。

var globalVar = "I'm a global variable";

function outerFunction() {
  var outerVar = "I'm an outer variable";

  function innerFunction() {
    var innerVar = "I'm an inner variable";
    console.log(innerVar); // 可以访问内部变量
    console.log(outerVar); // 可以访问外部变量
    console.log(globalVar); // 可以访问全局变量
  }

  innerFunction();
}

outerFunction();

词法作用域使得变量的可见性与它们在嵌套函数中的位置相关，而不受调用顺序的影响。这增强了代码的可预测性和可维护性。

5. 闭包（Closure）

闭包是指函数可以访问其词法作用域之外的变量。当内部函数引用外部函数的变量时，它形成了一个闭包，保留了外部函数作用域的状态。

function makeCounter() {
  var count = 0;

  return function() {
    return count++;
  };
}

var counter = makeCounter();
console.log(counter()); // 输出：0
console.log(counter()); // 输出：1

闭包在 JavaScript 中被广泛应用，它可以用于创建私有变量、封装数据、实现模块等。