闭包的概念及应用场景

一、闭包的定义

在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

四、总结

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

相关推荐
10年前端老司机4 小时前
React无限级菜单:一个项目带你突破技术瓶颈
前端·javascript·react.js
阿芯爱编程8 小时前
2025前端面试题
前端·面试
前端小趴菜059 小时前
React - createPortal
前端·vue.js·react.js
晓13139 小时前
JavaScript加强篇——第四章 日期对象与DOM节点(基础)
开发语言·前端·javascript
菜包eo10 小时前
如何设置直播间的观看门槛,让直播间安全有效地运行?
前端·安全·音视频
烛阴10 小时前
JavaScript函数参数完全指南:从基础到高级技巧,一网打尽!
前端·javascript
chao_78911 小时前
frame 与新窗口切换操作【selenium 】
前端·javascript·css·selenium·测试工具·自动化·html
天蓝色的鱼鱼12 小时前
从零实现浏览器摄像头控制与视频录制:基于原生 JavaScript 的完整指南
前端·javascript
三原12 小时前
7000块帮朋友做了2个小程序加一个后台管理系统,值不值?
前端·vue.js·微信小程序
popoxf12 小时前
在新版本的微信开发者工具中使用npm包
前端·npm·node.js