闭包的概念及应用场景

一、闭包的定义

在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

四、总结

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

相关推荐
杨荧38 分钟前
【开源免费】基于Vue和SpringBoot的林业产品推荐系统(附论文)
前端·javascript·vue.js·spring boot·开源
光影少年1 小时前
前端进程和线程及介绍
前端·javascript
Franciz小测测1 小时前
VUE3 + Ant Design Vue4 开发笔记
前端·vue.js·vue
Swing_wingS1 小时前
SpringMvc解决跨域问题的源码汇总。
前端
乌龟的黑头-阿尔及利亚1 小时前
使用 Vite 创建 Vue 3 项目:从零开始的详细指南
前端·javascript·vue.js
三天不学习2 小时前
what?ngify 比 axios 更好用,更强大?
前端·axios·请求响应·ngify
2403_875180952 小时前
一键掌握多平台短视频矩阵营销/源码部署
java·前端·数据结构·线性代数·矩阵·php
Best_卡卡2 小时前
前端性能-HTTP缓存
前端·http·缓存
GIS好难学3 小时前
《Openlayers零基础教程》第六课:地图控件
前端·javascript·零基础·openlayers