闭包的概念及应用场景

一、闭包的定义

在JavaScript中,闭包是指一个函数能够访问并操作在其词法作用域之外的变量的能力。

换句话说,当一个函数在定义时,内部函数引用了外部函数的变量,并且该内部函数在外部函数执行完后仍然可以访问这些变量时,就形成了一个闭包。

闭包可以让你从内部函数访问外部函数作用域。

二、闭包的原理

闭包是一个编程的古老术语,函数的执行依赖于定义时产生的作用域. 如果函数的变量存在于函数的作用域(这个作用域可能是全局window对象,也可能是外部函数),这样的话就是函数将变量包裹起来,闭包就是这样来的

从函数出现开始,全局的函数,原则上就是在window下的闭包函数,

三、闭包的应用场景

闭包产生的原因由内向外分析就是,灵活的运用了作用域链扩展了变量的作用域

闭包产生的原因由外向内分析就是,外部需要使用到函数内的变量数据,灵活运用了垃圾处理的机制,在这个变量存储于内存中,且有可能被调用时,就会滞留.

封装变量(私有化)

闭包可以将变量作为私有化的状态,只能通过暴露的接口函数进行访问和操作。这种封装变量的方法常用于模块化的开发,可以避免变量的污染和冲突。

全局函数本质上就是一个在window对象中的私有化变量

例如,我们可以使用闭包封装一个计数器:

js 复制代码
function createCounter() {
  let count = 0;
  function increment() {
    count++;
    console.log(count);
  }

  function decrement() {
    count--;
    console.log(count);
  }

  return {
    increment,
    decrement
  };
}

const counter = createCounter();
counter.increment(); // 输出:1
counter.increment(); // 输出:2
counter.increment(); // 输出:3
counter.decrement(); // 输出:2

延迟计算(结合定时器)

闭包可以延迟计算,将函数的执行推迟到特定的时机。这种延迟计算的能力在事件监听、定时器和Ajax请求等场景中非常有用。

例如,我们可以使用闭包延迟计算和展示当前时间:

js 复制代码
function showCurrentTime() {
  const currentTime = new Date();

  setTimeout(function() {
    console.log("当前时间:" + currentTime);
  }, 1000);
}

showCurrentTime();

实现柯里化(Currying)

柯里化(Currying)是一种处理多元函数的方法。它产生一系列连锁函数,其中每个函数固定部分参数,并返回一个新函数,用于传回其它剩余参数的功能。

例如,我们可以使用闭包实现一个加法柯里化函数:

function add(x) { return function(y) { return x + y; } }

const add5 = add(5); console.log(add5(3)); // 输出:8 console.log(add(5)(7)); // 输出:12

分析:

相当于t=x+y,进行第一次柯里化变成t=5+y

四、总结

闭包就是需要对于函数内部变量进行外部调用后者或者通过对于参数的实例化形成新的函数,

相关推荐
hunterandroid4 分钟前
[鸿蒙从零到一] HarmonyOS 分布式能力与设备协同实战:从发现设备到任务闭环
前端
lichenyang45320 分钟前
从图片创作到本地可复现的 AIGC 全栈闭环:AIGC Creative Studio 实践复盘
前端·后端
牧艺27 分钟前
别急着 Vibe Coding:AI 三小时写完需求后,我为什么宁愿多花一天
前端·agent·vibecoding
java1234_小锋29 分钟前
Vue3+Vite简介以及构建第一个HelloWorld实例
前端·javascript·vue.js·vite
前进的搬砖er29 分钟前
1.cesium 的基础知识篇
前端
计算机魔术师34 分钟前
在 M1 Max 上运行 2.8T 参数的 Kimi K3:Deltafin 项目实现 0.0687 token/s 推理
前端
黄林晴35 分钟前
你敢信吗?同样是跨端,KMP 跟 RN 居然差这么多!
android·前端
windliang37 分钟前
Claude Code 源码分析(四):Tool 工具系统-从 Schema 到真实执行
前端·ai编程·claude
10WTW011 小时前
Sprite-Motion-Lab:雪碧图动画编辑器
前端·css·雪碧图·spritemotionlab·10wtw01
夏天要喝冰可乐1 小时前
用 Gitee Go 搭建WorkBuddy云端定时任务
前端·ai编程