JavaScript 闭包

最新推荐文章于 2025-06-13 08:24:12 发布

wangjinjin180

最新推荐文章于 2025-06-13 08:24:12 发布

阅读量962

点赞数 22

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.youkuaiyun.com/wangjinjin180/article/details/146365143

版权

以下是以资深软件开发工程师的视角，对“JavaScript 闭包”的专业回答。我将详细讲解 JavaScript 中闭包的概念、机制、使用场景和实例，结合清晰的结构，包含目录、小标题、表格、代码示例和内部链接，确保内容技术准确、逻辑清晰且易于理解。回答基于截至 2025 年 3 月 17 日的最新 JavaScript 标准（ES2023+）。

JavaScript 闭包

1. 引言

闭包（Closure）是 JavaScript 中强大且核心的特性，广泛用于数据封装、状态管理和异步编程。本教程将介绍闭包的定义、原理及其应用，帮助您深入理解和掌握这一概念。

2. 闭包概述

定义：闭包是一个函数，能够“记住”其外部作用域的变量，即使外部函数已执行完毕。
特性：
访问外部变量：内部函数保留对外部作用域的引用。
持久化状态：变量在内存中保持有效。
用途：数据隐私、函数工厂、回调处理。
基础：闭包基于 JavaScript 的词法作用域（Lexical Scope）。

3. 闭包的机制与原理

3.1 作用域链

作用域链：函数在定义时，其作用域链保存了对外部环境的引用。
示例：

function outer() {
  let x = 10;
  function inner() {
    console.log(x); // 访问外部变量
  }
  return inner;
}

const fn = outer();
fn(); // 10

解释：inner 形成闭包，保留对 outer 作用域中 x 的引用。

3.2 闭包的创建

条件：

嵌套函数：内部函数引用外部变量。
外部函数返回内部函数或将其传递出去。
内部函数在外部作用域执行。

内存模型：
外部函数执行完毕后，其执行上下文销毁，但变量因闭包引用而保留在内存中。
示例：

function createAdder(base) {
  return function(num) {
    return base + num;
  };
}

const addFive = createAdder(5);
console.log(addFive(3)); // 8

4. 完整实例

4.1 计数器

目的：使用闭包实现私有计数器。
实例：

<!DOCTYPE html>
<html>
<body>
  <button οnclick="increment()">增加</button>
  <p id="result">计数: 0</p>
  <script>
    const counter = (function() {
      let count = 0;
      return function() {
        count++;
        return count;
      };
    })();

    function increment() {
      document.getElementById('result').textContent = `计数: ${counter()}`;
    }
  </script>
</body>
</html>

说明：闭包保护 count，实现递增功能。

4.2 私有变量

目的：通过闭包模拟私有变量。
实例：

<!DOCTYPE html>
<html>
<body>
  <button οnclick="deposit(10)">存款 10</button>
  <button οnclick="showBalance()">显示余额</button>
  <p id="result"></p>
  <script>
    const account = (function() {
      let balance = 0; // 私有变量
      return {
        deposit(amount) {
          balance += amount;
          return balance;
        },
        getBalance() {
          return balance;
        }
      };
    })();

    function deposit(amount) {
      account.deposit(amount);
    }
    function showBalance() {
      document.getElementById('result').textContent = 
        `余额: ${account.getBalance()}`;
    }
  </script>
</body>
</html>

说明：balance 被闭包保护，仅通过方法访问。

4.3 事件循环中的闭包

目的：解决循环中的变量问题。
实例：

<!DOCTYPE html>
<html>
<body>
  <div id="buttons"></div>
  <script>
    const container = document.getElementById('buttons');
    for (let i = 0; i < 3; i++) {
      const btn = document.createElement('button');
      btn.textContent = `按钮 ${i}`;
      btn.addEventListener('click', () => {
        alert(`你点击了按钮 ${i}`);
      });
      container.appendChild(btn);
    }
  </script>
</body>
</html>