作用域和闭包：掌握 JavaScript 的关键概念

前端

2023-09-25 05:09:18

导言

作为一名 JavaScript 开发人员，深入理解作用域和闭包对于编写健壮可靠的代码至关重要。这些概念决定了变量和函数的可访问性，从而对代码行为产生深远影响。本文将深入探讨作用域和闭包，提供易于理解的解释和有用的示例。

作用域

作用域定义了变量和函数在代码中可访问的范围。它有两种主要类型：

全局作用域： 在脚本的任何地方都可访问的变量和函数。
局部作用域： 仅在定义它们的函数或块中可访问的变量和函数。

闭包

闭包是指可以访问其他作用域中变量的函数。当一个函数在另一个函数内部定义时，会创建一个闭包。内层函数可以访问外层函数的作用域，包括其变量和参数。

作用域示例

考虑以下代码段：

var globalVariable = 10; // 全局作用域

function outerFunction() {
  var outerVariable = 20; // 局部作用域
  console.log(outerVariable); // 输出：20
  console.log(globalVariable); // 输出：10
}

outerFunction();
console.log(globalVariable); // 输出：10

globalVariable 是全局变量，在脚本的任何地方都可以访问。
outerFunction 是一个函数，创建了局部变量 outerVariable。
outerFunction 可以访问其自己的局部变量和全局变量。
在脚本的全局作用域中，无法访问 outerVariable。

闭包示例

考虑以下代码段：

function outerFunction() {
  var counter = 0; // 局部变量
  return function() {
    counter++;
    console.log(counter); // 输出：1、2、3、...
  }
}

var incrementCounter = outerFunction();
incrementCounter();
incrementCounter();
incrementCounter();

outerFunction 返回一个函数，该函数创建了一个闭包，可以访问 outerFunction 的局部变量 counter。
incrementCounter 变量指向闭包函数，它可以增加 counter 并输出值。
即使 outerFunction 已执行完毕，但闭包函数仍保留对 counter 的引用，从而使 incrementCounter 可以无限次调用。