闭包的概念及应用场景

一、闭包的定义

在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

四、总结

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

相关推荐
willingtolove16 小时前
使用chrome修改请求参数重新发送请求
前端·chrome
-曾牛16 小时前
CSRF跨站请求伪造:原理、利用与防御全解析
前端·网络·web安全·网络安全·渗透测试·csrf·原理解析
魂祈梦16 小时前
前端下载多个文件/浏览器批量下载文件
前端·浏览器
小明记账簿_微信小程序16 小时前
手写一个webpack插件(plugin)
前端
我命由我1234516 小时前
微信小程序 - scroll-view 的一些要点(scroll-view 需要设置滚动方向、scroll-view 需要设置高度)
开发语言·前端·javascript·微信小程序·小程序·前端框架·js
BD_Marathon17 小时前
【JavaWeb】CSS浮动
前端·css
1024肥宅17 小时前
手写 Promise:深入理解 JavaScript 异步编程的核心
前端·javascript·promise
铅笔侠_小龙虾17 小时前
Vue 学习目录
前端·vue.js·学习
悟能不能悟17 小时前
vue的history和hash模式有什么不一样
前端·vue.js
晓庆的故事簿17 小时前
前端的浏览器地址传参
前端