闭包的概念及应用场景

一、闭包的定义

在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

四、总结

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

相关推荐
GISer_Jing1 小时前
前端性能指标及优化策略——从加载、渲染和交互阶段分别解读详解并以Webpack+Vue项目为例进行解读
前端·javascript·vue
不知几秋1 小时前
数字取证-内存取证(volatility)
java·linux·前端
水银嘻嘻3 小时前
08 web 自动化之 PO 设计模式详解
前端·自动化
Zero1017134 小时前
【详解pnpm、npm、yarn区别】
前端·react.js·前端框架
&白帝&5 小时前
vue右键显示菜单
前端·javascript·vue.js
Wannaer5 小时前
从 Vue3 回望 Vue2:事件总线的前世今生
前端·javascript·vue.js
羽球知道5 小时前
在Spark搭建YARN
前端·javascript·ajax
光影少年5 小时前
vue中,created和mounted两个钩子之间调用时差值受什么影响
前端·javascript·vue.js
青苔猿猿5 小时前
node版本.node版本、npm版本和pnpm版本对应
前端·npm·node.js·pnpm
一只码代码的章鱼6 小时前
Spring的 @Validate注解详细分析
前端·spring boot·算法