闭包

概念

闭包 是能访问其自身函数作用域外变量的函数

本质 = 函数 + 其词法环境

例子

🌰1(全局环境闭包):
js 复制代码
let a = 7;

function sum(b){
  return a + b
}

const sixSum = sum(6)
console.log(sixSum)

在定义 sum 时,JS引擎将其与当前词法环境(含 a )绑定为闭包 即

css 复制代码
闭包 = {
  函数: sum (...) { ... }, // 函数本身
  环境: { // 精确捕获的被引用变量
    a: 7,
  }
}
🌰2(嵌套函数闭包):
js 复制代码
function outer(){
    let a = 7
    return function inner(){
        a++
        console.log(a);
    }
}

let outerOne = outer()

outerOne()

在定义 sum 时,JS引擎将其与当前词法环境(含 a )绑定为闭包 即

css 复制代码
闭包 = {
  函数: inner (...) { ... }, // 函数本身
  环境: { // 精确捕获的被引用变量
    a: 7,
  }
}
  • 闭包仅保存被引用的变量a),不会保存整个函数体
  • 每次调用 outer() 创建独立闭包环境

实际应用场景

① 封装私有变量

javascript 复制代码
function createCounter() {
  let count = 0; // 私有变量
  return {
    increment: () => { count++; },
    getValue: () => count
  };
}
const counter = createCounter();
counter.increment();
console.log(counter.getValue()); // 1
// 无法直接访问 count,只能通过闭包暴露的方法操作

② 模块化开发(IIFE模式)

javascript 复制代码
const module = (() => {
  let privateVar = 'secret';
  const privateMethod = () => console.log(privateVar);
  return { publicMethod: privateMethod };
})();
module.publicMethod(); // 输出 "secret"

③ 回调函数与事件处理

javascript 复制代码
function setupClickHandler(buttonId) {
  const button = document.getElementById(buttonId);
  let clickCount = 0;
  button.addEventListener('click', () => {
    clickCount++;
    console.log(`按钮点击次数:${clickCount}`);
  });
}
// 即使 setupClickHandler 执行完毕,回调函数仍能通过闭包访问 clickCount

④ 函数工厂(参数预置)

javascript 复制代码
function createMultiplier(x) {
  return function(y) { // 闭包记忆x的值
   return x * y 
  }
}
const double = createMultiplier(2);
console.log(double(5)); // 10  x=2通过闭包保存
相关推荐
bitbitDown1 小时前
四年前端分享给你的高效开发工具库
前端·javascript·vue.js
YAY_tyy1 小时前
【JavaScript 性能优化实战】第六篇:性能监控与自动化优化
javascript·性能优化·自动化
gnip2 小时前
实现AI对话光标跟随效果
前端·javascript
闭着眼睛学算法3 小时前
【华为OD机考正在更新】2025年双机位A卷真题【完全原创题解 | 详细考点分类 | 不断更新题目 | 六种主流语言Py+Java+Cpp+C+Js+Go】
java·c语言·javascript·c++·python·算法·华为od
烛阴3 小时前
【TS 设计模式完全指南】构建你的专属“通知中心”:深入观察者模式
javascript·设计模式·typescript
lumi.4 小时前
Vue.js 从入门到实践1:环境搭建、数据绑定与条件渲染
前端·javascript·vue.js
二十雨辰4 小时前
vue核心原理实现
前端·javascript·vue.js
影子信息4 小时前
[Vue warn]: Error in mounted hook: “ReferenceError: Jessibuca is not defined“
前端·javascript·vue.js
北城以北88884 小时前
JavaScript--基础ES(一)
开发语言·javascript·intellij-idea
珍宝商店5 小时前
优雅的 async/await 错误处理模式指南
开发语言·前端·javascript