什么是闭包?聊聊javascript中闭包,看看闭包有哪些作用?

什么是闭包?看看闭包有哪些作用?下面本篇文章带大家聊聊javascript中闭包。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

什么是闭包?聊聊javascript中闭包,看看闭包有哪些作用?

在前端学习的过程中,我们难免会遇到许许多多的问题,那么今天我们来以一个初学者的角度来谈谈两个问题:

什么是闭包?闭包有哪些作用?

其实我们在学习javascript的时候闭包无处不在,你只需要能够识别并接受它。闭包并不是一个需要学习的新的语法或者模式才能使用的工具,闭包是基于词法作用域书写代码时所产生的自然结果。我们几乎不用在编写代码时刻意去创建闭包。

相信此时已经有不少小伙伴心里在嘀咕,这词法作用域有是个啥,不用慌,且听我缓缓道来,简而言之,词法作用域就是定义在词法阶段的作用域。换句话说,词法作用域是由你在写代码时将变量和块级作用域写在哪里决定的,因此当词法分析处理器处理代码时会保持作用域不变(大部分情况是这样的)。——《你不知道的javascript上卷》

立即学习“Java免费学习笔记(深入)”;

先来个例子

function test(){   var arr = []   for(var i=0;i<10;i++){       arr[i]=function(){           console.log(i);       }   }   return arr}var myArr = test()// myArr[0]()// myArr[1]()// ...for(var j = 0; j < 10; j++){    myArr[j]()}//为了避免繁琐此处使用了第二个循环来调用test函数里第一个循环里函数的打印出十个结果

我们先来分析一下这段代码:当这段代码执行时,按照常理分析应该是依次打印出0~9,十个数字;但是for循环运行时不需要时间(以微秒计算忽略不计),当函数test,return arr时,arr[]里面是10个function(){console.log(i);},此时数组里的函数没有执行,当var myArr = test()调用test函数时,由于for循环执行的时间忽略不计,所以此时i已经是10,所以打印出的是10个10。

相信此时就会有人问,这与我们要讲的闭包又有什么关系呢,那如果我们把这段代码稍微修改一下,改变成一个累加器,要如何实现他呢?

相信此时会有大佬表示那还不简单吗?

把var定义改成let定义,使得第一个for循环成为一个块级作用域,那么就可以变成累加器了。当然是没有问题的,

但是我们今天讲的是在ES5的时候如何实现累加器。那我们再看看下面这段代码:

豆包爱学 豆包爱学

豆包旗下AI学习应用

豆包爱学 674 查看详情 豆包爱学

function test(){    var arr = []    for(var i=0;i<10;i++){        (function(j){            arr[j]=function(){                console.log(j);            }        })(i)    }    return arr}var myArr = test()for(var j = 0; j < 10; j++){     myArr[j]()}

细心地朋友肯定会发现,这不就是把在循环里面的函数体改成一个自执行函数嘛,但是此时输出的结果就是从0~9依次输出十个数字,而这里面就包含了闭包,当我们开始执行这段代码的时候第二个for循环会调用十次,当每个自执行函数执行时会创建一个自执行函数的AO对象,这个自执行函数的AO对象里就存在一个属性名为j,照常理而言自执行函数执行完毕之后,它的AO对象就应该被销毁了,但是当myarr[j] ()执行时,现在作用域链顶端的arr[j]的AO对象里找属性名j,但是没有找到,顺着作用域链往下找,在自执行函数的AO对象里找到了,所以当自执行函数结束时,它的AO对象并不会被垃圾回收机制回收,否则当myarr[j] ()执行时就会报错,此时就形成了闭包。

当一个函数被保存到了外部,将会产生闭包

我们再来举个例子

function a(){    function b(){        var bbb = 234        console.log(aaa);    }    var aaa = 123    return b // b出生在a里面,但是被保存出去了}var glob = 100var demo = a()demo()

这段代码我们先用预编译来分析,首先是定义一个全局的GO对象,在找全局的声明找全局变量声明,将将变量声明作为 GO 的属性名,值为undefined,在全局找函数声明,将函数名作为 GO 对象的属性名,值赋予函数体。此时应该为GO{ glob: undefined—>100 ; demo: undefined ; a: fa(){}  };再对函数a创建一个AO{ aaa:undefined—>123;b: fb(){}  },最后再对函数a里面的函数b进行预编译创建一个b的AO{ b: undefined—>234};此时作用域链的顺序为1. 函数b的AO对象;2. 函数a的AO对象;3. 全局GO对象。当我们打印函数b里面的aaa时,先从作用域链的顶端开始找,在函数b的AO对象里没有aaa,那就会顺着作用域链往下找,找到第二层函数a的AO对象是找到了aaa的值为123,输出结果。

如果我们没有从预编译的角度去分析就会认为此时的aaa应该会报错的,当var demo = a()执行时,当a函数执行结束,那么a对应的AO对象应该被销毁了,照常理分析当我们执行demo时作用域链此时应该会创建b的AO对象和GO对象,此时只有b的AO对象,没有a的AO对象,应该不能打印出aaa的值,但是此时aaa的值为123,则说明a的AO对象没有被销毁,那么为什么呢?原因就在于这里创建了闭包,当var demo = a()执行结束之后,垃圾回收机制会来问,a函数老兄,我看你都执行完毕了,你的运行内存是不是可以给我释放了,但是此时a函数只能无奈摇摇头说道,老哥,我也不确定我有没有执行完毕,我执行完创建了一个b,但是b又不归我管,所以我也不确定b有没有被调用,所以我也不确定我有没有执行完毕,垃圾回收机制想了想,既然你都不知道那我就不回收了,要是回收了还没执行完的就该报错了,所以此时a的AO对象就没有被回收。

补充全面一点就是:当一个函数内部的函数被保存到函数外部时,就会产生闭包。

相信通过这两个例子,你已经对闭包有了一个大概的了解,那接下来我们说一下闭包有哪些作用。

闭包的作用

实现公有变量 例如:累加器(3.js)做缓存可以实现封装,属性私有化模块化开发,防止污染全局变量

我们对闭包的作用也来一个例子(3.js)

 var count = 0 function add() {   return count++ } console.log(add()); console.log(add()); console.log(add());

 这是一段比较普通的累加的代码,但是如果我们在实习甚至是工作的时,公司要求你把累加器封装成一个模块化的代码,那么
 此时,为了模块化我们尽可能避免定义全局变量,但是不定义全局变量我们如何实现呢,此时我们就可以用到闭包了;

function add() {    var count = 0    function a() {      ++count      console.log(count);    }    return a  }  var res = add()  res()  res()    //add函数结束之后,add的AO对象没有被销毁,因为add函数执行完了之后,返回的a不知道是否被调用就形成了闭包,这样  就能使得不使用全局变量也能封装成一个模块化的累加器。

结语

那么关于闭包以及闭包的作用相关的一些个人见解就是这些,目前对于闭包也只是一些浅显的了解,后期学习之后完善过后会出后续关于闭包的相关文章,感谢您的观看,欢迎批评斧正,一起共同进步。

【相关推荐:javascript视频教程、web前端】

以上就是什么是闭包?聊聊javascript中闭包,看看闭包有哪些作用?的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/549584.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
java怎么解释多态
上一篇 2025年11月9日 19:21:27
Linux如何快速清空回收站
下一篇 2025年11月9日 19:21:30

相关推荐

  • safari浏览器如何开启画中画模式播放视频_safari浏览器画中画模式开启方法

    如果您在观看网页视频时希望同时进行其他操作,可以启用 Safari 浏览器的画中画模式,让视频以浮动小窗形式继续播放。此功能支持大多数主流视频网站,如 YouTube、优酷等。 本文运行环境:MacBook Air,macOS Sonoma 一、通过视频右键菜单开启画中画 此方法适用于正在播放的视频…

    2026年9月23日
    000
  • Java中使用栈验证JSON字符串结构:深入理解与实践

    本文探讨了在Java中利用栈验证JSON字符串结构的核心原理与常见陷阱。我们将分析一种初始实现中处理引号、转义字符及字符串内部结构字符的不足,并提供一个更健壮的栈基方法,以准确判断JSON的括号、方括号和引号是否平衡,同时纠正关于不完整JSON片段有效性的常见误解。 1. JSON结构与验证的重要性…

    2026年9月23日
    100
  • 苹果手机USB调试模式开启方法

    准备工作 在操作前,请确保你的iPhone已连接网络,并升级至最新的iOS系统版本。同时,准备一台安装了最新版iTunes(Windows)或Finder(macOS)的电脑,以确保设备能够被正确识别和管理。 步骤一:开启相关调试功能 打开iPhone上的“设置”应用。 进入“Safari”浏览器设…

    2026年9月23日
    100
  • Java中基于栈验证JSON字符串结构有效性的方法

    本文探讨了在Java中利用栈(Stack)数据结构验证JSON字符串结构有效性的方法。我们将分析一个常见的基于栈的实现示例,指出其在处理字符串内部字符、引号平衡以及转义字符方面的潜在缺陷。文章将提供一个改进的解决方案,并强调此方法主要用于结构匹配,而非完整的JSON语法验证,同时建议生产环境中使用专…

    2026年9月23日
    200
  • Java JSON字符串有效性验证:基于栈的实现与常见陷阱

    本文深入探讨了使用Java栈结构验证JSON字符串有效性的方法。通过分析一个常见错误示例,详细阐述了在处理括号、方括号以及字符串引号时的正确逻辑,特别强调了字符串内部字符(包括转义字符)不应影响结构平衡的原则,并提供了改进思路,旨在帮助开发者构建健壮的JSON验证器。 JSON结构与栈的适用性 JS…

    2026年9月23日
    100
  • Vue.js 项目中实现练习进度保存的策略与实践

    本文将探讨在vue.js项目中实现用户练习进度保存的最佳实践。针对需要跨会话保留用户进度的场景,我们将重点介绍如何利用浏览器localstorage进行数据持久化,包括数据的序列化与反序列化、在关键生命周期钩子中加载与保存数据,以及相关的注意事项,确保用户能够从上次中断的地方继续练习。 在开发基于V…

    2026年9月23日
    100
  • Karate框架中处理带方括号和日期范围的GET请求参数

    本文旨在解决Karate框架中构建包含复杂、带方括号(如filters[start_date])及日期范围的GET请求参数时遇到的URL编码问题。通过对比直接定义查询对象和使用param关键字的方法,详细阐述了如何正确地构造URL,确保参数格式符合预期,从而有效进行API测试。 1. 问题背景与挑战…

    2026年9月22日
    200
  • Karate教程:优雅处理GET请求中的复杂查询参数(含日期范围)

    本教程将详细介绍在Karate框架中如何正确发送包含复杂查询参数(特别是带有方括号的参数名,如filters[start_date])的GET请求。我们将通过实际示例,演示如何利用Karate的* param关键字优雅地构建URL,确保参数被正确编码并传递给后端服务,尤其适用于日期范围等场景。 理解…

    2026年9月22日
    300
  • safari浏览器怎么阻止网站访问剪贴板_safari浏览器阻止网站访问剪贴板方法

    可通过关闭网站剪贴板权限、启用无痕浏览、禁用JavaScript或使用内容拦截扩展来阻止Safari网站访问剪贴板,保护隐私安全。 如果您在使用 Safari 浏览器时发现某些网站尝试自动读取或写入剪贴板内容,可能会导致隐私泄露或意外粘贴敏感信息。为防止此类行为,您可以采取以下措施限制网站对剪贴板的…

    2026年9月22日
    1900
  • PHP中操作JSON数组对象:添加与修改属性的实践指南

    本教程详细阐述如何在php中高效地处理包含对象的json数组。我们将学习如何利用`json_decode()`将json字符串转换为php数据结构,进而为数组中的现有对象添加或修改属性,并通过`json_encode()`将其转换回json字符串,避免手动构建json的常见错误。 在现代Web开发中…

    2026年9月22日
    1300
  • 在Java中如何开发简易问答社区

    答案是Java结合Spring Boot可快速构建问答社区,通过设计questions、answers、users三张表实现数据存储,使用JPA进行持久化,前端用HTML+JS调用后端API完成用户提问、回答、查看与互动功能。 开发一个简易问答社区,核心是实现用户提问、回答、查看问题和互动功能。Ja…

    2026年9月22日
    200
  • 谷歌浏览器官网直接进入 Chrome浏览器官方登录入口

    谷歌浏览器官网直接进入方式为访问https://www.google.com/chrome/,该网站是Chrome官方登录入口,提供跨平台同步、V8引擎加速、地址栏集成搜索、自动填充表单等核心功能,支持极简界面、深色模式、自定义新标签页及侧边栏服务,具备安全浏览、隐私沙盒、密码检查和无痕模式等安全机…

    2026年9月22日
    200
  • 设计VSCode三维图形编程界面与WebGL实时预览模块

    VSCode通过集成WebGL预览插件实现三维图形编程的实时反馈,利用扩展架构提供GLSL语法支持、文件关联及命令注册,并通过Webview嵌入渲染窗口,结合消息通信与动态编译技术实现实时预览,配合保存自动刷新、错误定位与多视图布局优化交互体验,构建高效闭环开发环境。 在使用 VSCode 进行三维…

    2026年9月22日
    200
  • 如何利用 JavaScript 实现一个支持拖放排序的交互界面?

    答案是利用HTML5拖放API实现拖拽排序,通过设置draggable属性和监听dragstart、dragover、drop事件控制元素移动,结合CSS提升交互反馈。 要实现一个支持拖放排序的交互界面,核心是利用 HTML5 的拖放 API(Drag and Drop API)结合 JavaScr…

    2026年9月22日
    100
  • 360浏览器怎么禁止网页自动刷新_360浏览器阻止页面定时刷新设置方法

    1、通过360浏览器开发者工具删除含http-equiv=”refresh”的meta标签可临时阻止刷新;2、启用弹窗拦截功能可屏蔽由脚本触发的自动刷新;3、使用无痕模式浏览可限制脚本运行,避免页面刷新;4、安装“Tampermonkey”等扩展并添加屏蔽规则可实现长期有效阻…

    2026年9月22日
    400
  • UC浏览器为什么无法登录某些网站账号_UC浏览器部分网站无法登录原因及对策

    首先关闭广告过滤功能,清除缓存与Cookie,关闭云端加速,切换网络或DNS,最后尝试桌面模式或其他浏览器解决UC浏览器登录无响应问题。 如果您尝试在UC浏览器中登录某个网站账号,但页面无响应或提示错误,则可能是由于浏览器的安全策略、缓存问题或设置限制导致无法正常加载登录界面。以下是解决此问题的步骤…

    2026年9月22日
    200
  • 解决PHP应用中本地文件更新后网页视图不刷新的缓存问题

    本文探讨了PHP应用中,本地JSON或图片文件更新后,网页视图无法实时刷新的常见问题。核心原因在于浏览器缓存机制。文章将提供多种解决方案,包括强制刷新、隐身模式诊断、以及通过URL参数、服务器配置(.htaccess)和文件版本控制来有效管理缓存,确保用户始终获取最新数据。 理解问题:本地文件更新与…

    2026年9月22日
    300
  • Bun 1.3 正式发布

    2025年10月10日,高性能 javascript 运行时 bun 发布了 1.3 版本。这是 bun 项目迄今为止最重大的版本更新,标志着 bun 从单纯的运行时工具演变为一个功能完备的全栈 javascript 开发平台。 从运行时到全栈平台的跨越 Bun 1.3 的核心突破在于将前端开发能力…

    2026年9月21日
    100
  • safari浏览器如何设置链接在新窗口而不是新标签页打开_safari浏览器链接新窗口打开设置

    通过快捷键或第三方扩展可实现Safari中链接在新窗口打开:1. 按住Command键点击链接可临时在新窗口打开;2. 使用AppleScript脚本通过“自动操作”创建快速操作以新建Safari窗口;3. 网站自身代码如window.open()会强制新窗口打开;4. 安装可信扩展如“Link i…

    2026年9月21日
    100
  • VSCode语言特性贡献点配置

    通过配置package.json中的contributes字段可实现VSCode语言扩展,依次需设置语法高亮(grammars)、语言绑定(languages)、激活事件(activationEvents)及语言服务器功能(如补全、跳转),并定义language-configuration.json…

    2026年9月21日
    100

发表回复

登录后才能评论
关注微信