JavaScript篇：那些年，被我们误解的JavaScript闭包-CSDN博客

本文链接：https://blog.csdn.net/qq_48652579/article/details/147221779

🎓 作者简介：前端领域优质创作者

🚪 资源导航： 传送门=>

🎬 个人主页： 江城开朗的豌豆

🔥 个人专栏：《VUE》 📘《JavaScript》 📚

🌐 个人网站:   江城开朗的豌豆 🌍

📧 个人邮箱:   YANG_TAO_WEB@163.com 📩

💬 个人微信: y_t_t_t_ 📱

📌  座右铭:   生活就像心电图，一帆风顺就证明你挂了。💔

👥  QQ群: 906392632 (前端技术交流群) 💬

🌟 欢迎来到我的个人主页！这里是我分享技术心得和生活感悟的地方。希望你能在这里找到有价值的内容，也欢迎随时联系我交流讨论！🚀

作为前端开发必备的核心概念，闭包常常让初学者感到困惑。记得刚入行时，我也曾被各种晦涩的解释绕得云里雾里。直到在项目中踩了几个坑，才真正理解了它的精妙之处。今天，就让我们抛开教科书式的定义，用实际的代码来聊聊这个看似神秘的概念。

一个让新手抓狂的经典案例

先来看这段代码，它展示了一个常见的闭包陷阱：

function initButtons() {
  for (var i = 1; i <= 3; i++) {
    var btn = document.createElement('button');
    btn.textContent = '按钮' + i;
    btn.onclick = function() {
      console.log('点击了按钮' + i); 
    };
    document.body.appendChild(btn);
  }
}
initButtons();

猜猜点击这三个按钮会输出什么？很多人以为会是"点击了按钮1"、"点击了按钮2"、"点击了按钮3"，但实际上每个按钮都会输出"点击了按钮4"！

为什么会这样？

这个问题困扰了我很久，直到理解了JavaScript的作用域规则：

var声明的变量是函数级作用域
事件处理函数形成了闭包，捕获的是同一个i的引用
循环结束后i的值已经变成了4

闭包的三大特征

通过这个例子，我们可以总结出闭包的三个关键特征：

函数嵌套：一个函数内部定义了另一个函数
访问上级作用域：内部函数可以访问外部函数的变量
变量持久化：即使外部函数已经执行结束，内部函数仍能访问那些变量

闭包的常见应用场景

理解了原理后，闭包在实际开发中大有用武之地：

1. 数据封装

function createUser() {
  let name = '杨涛';
  let age = 28;
  
  return {
    getName: function() {
      return name;
    },
    getAge: function() {
      return age;
    },
    setAge: function(newAge) {
      age = newAge;
    }
  };
}

const user = createUser();
console.log(user.getName()); // "杨涛"
user.setAge(29);
console.log(user.getAge());  // 29

2. 函数工厂

function createMultiplier(factor) {
  return function(number) {
    return number * factor;
  };
}

const double = createMultiplier(2);
const triple = createMultiplier(3);

console.log(double(5)); // 10
console.log(triple(5)); // 15

3. 事件处理

function setupCounter() {
  let count = 0;
  const btn = document.createElement('button');
  btn.textContent = '点击计数';
  
  btn.addEventListener('click', function() {
    count++;
    console.log(`当前计数: ${count}`);
  });
  
  document.body.appendChild(btn);
}

闭包的内存管理

闭包虽好，但使用不当也会带来内存泄漏的问题：

function createHeavyObject() {
  const bigData = new Array(1000000).fill('*');
  
  return {
    getData: function() {
      return bigData.length;
    }
  };
}

const holder = createHeavyObject();
// 即使不再需要，bigData仍被闭包引用无法释放

要避免这种情况，可以在不需要时手动解除引用：

holder = null; // 释放内存

现代JavaScript中的闭包

ES6的let和const为我们提供了更优雅的解决方案：

// 使用let解决最初的问题
function initButtonsFixed() {
  for (let i = 1; i <= 3; i++) {
    const btn = document.createElement('button');
    btn.textContent = '按钮' + i;
    btn.onclick = function() {
      console.log('点击了按钮' + i);
    };
    document.body.appendChild(btn);
  }
}