闭包:什么是闭包、闭包的作用、闭包的解决

article/2025/11/6 8:37:24

1、什么是闭包

学习闭包我们要清楚函数作用域、内存回收机制、作用域继承。

1.1 函数作用域

作用域我们可以认为它是一个封闭的盒子,只让它在这个盒子里面进行操作,也可以称这个盒子为独立作用域。在js中,一个函数要执行时就会在内存里面创建一个独立作用域————封闭的盒子。

比如在函数中第一一个变量,只能在函数这个独立作用域中使用(也就是封闭的盒子)。只要跳出这个作用域,就找不到该变量了。

而且函数执行完毕之后,这个独立作用域或(封闭的盒子)就会删除。有一种情况下这个封闭的盒子是不会删除的,那就是“闭包”,后面会讲到。

1.2 内存回收机制

内存回收机制就是不在用到的内存空间,系统会自动进行清理出空间提供给其他程序使用。那回收的前提是什么呢?

内部函数引用外部的函数的变量,外部函数执行完毕,作用域也不会删除。从而形成了一种不删除的独立作用域。

某一个变量或者对象被引用,因此在回收的时候不会释放它,因为被引用代表着被使用,回收机制不会对正在引用的变量或对象进行回收的。

1.3 作用继承

所谓的作用域继承,就像是儿子可以继承父亲的财产一样。比如我这里有一个大的盒子作为一个父级的作用域,然后在这个大的盒子里边放一个小的盒子,作为子作用域。我们规定可以在小盒子中获取到大盒子中的东西,大盒子不能获取小盒子里的东西就称为作用域继承。

在 JS 中,道理是一样的,在一个函数里边我们再声明一个函数,内部函数可以访问外部函数作用域的变量,而外部的函数不能获取到内部函数的作用域变量。

那好,上边的这几个概念理解了之后,什么是闭包对你来说已经不是什么问题。

什么是闭包,那就是在一个函数里边再定义一个函数。这个内部函数一直保持有对外部函数中作用域的访问(小盒子可以一直访问大盒子但大盒子不能访问小盒子)。

函数执行,形成一个独立作用域,保护里边的私有变量不受外界的干扰,除了保护私有变量外,还可以存储一些内容,这样的模式叫做闭包。

2、闭包的作用是什么

闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现。

作用是:通过一系方法,将函数内部的变量(局部变量)转化为全局变量

3、闭包的用途

闭包可以用在许多地方。它的最大用处有两个,一个是前面提到的可以读取函数内部的变量,另一个就是让这些变量的值始终保持在内存中。

  function f1(){

    var n=999;

    nAdd=function(){

alert(n+=1);  

}

    function f2(){
alert(n);
}

    return f2;

  }

  var result=f1();

  result(); //999

  nAdd();//1000

  result(); //1001

在这段代码中,result实际上就是闭包f2函数。它一共运行了两次,第一次的值是999,第二次的值是1000。这证明了,函数f1中的局部变量n一直保存在内存中,并没有在f1调用后被自动清除。

为什么会这样呢?原因就在于f1是f2的父函数,而f2被赋给了一个全局变量,这导致f2始终在内存中,而f2的存在依赖于f1,因此f1也始终在内存中,不会在调用结束后,被垃圾回收机制(garbage collection)回收。

这段代码中另一个值得注意的地方,就是"nAdd=function(){n+=1}"这一行,首先在nAdd前面没有使用var关键字,因此nAdd是一个全局变量,而不是局部变量。 其次,nAdd的值是一个匿名函数(anonymous function),而这个匿名函数本身也是一个闭包,所以nAdd相当于是一个操控者,可以在函数外部对函数内部的局部变量进行操作。

4、使用闭包的注意点

1)由于闭包会使得函数中的变量都被保存在内存中,内存消耗很大,所以不能滥用闭包,否则会造成网页的性能问题,在IE中可能导致内存泄露。解决方法是,在退出函数之前,将不使用的局部变量全部删除。

2)闭包会在父函数外部,改变父函数内部变量的值。所以,如果你把父函数当作对象(object)使用,把闭包当作它的公用方法(Public Method),把内部变量当作它的私有属性(private value),这时一定要小心,不要随便改变父函数内部变量的值。

5、解决方案

当点击事件执行的时候,就会在独立作用域查找 i 的值,此时独立作用域没有 i ,就回去全局作用域查找,此时全局作用域的 i 已经被改变。所以说,要创建一个私有作用域的 i 。

方法一:

方法二:


作者:乖_小孩
链接:https://juejin.cn/post/7107545188880351240
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。


http://chatgpt.dhexx.cn/article/Q0ttQ1uY.shtml

相关文章

基于SSH的学生考勤管理系统

020基于SSH的学生考勤管理系统 开发环境: Jdk7(8)Tomcat7(8)MysqlIntelliJ IDEA(Eclipse) 数据库: MySQL 技术: SpringStruts2HiberanteJqueryJavaScriptAjaxJSPBootstrap 适用于: 课程设计,毕业设计,学…

springboot学生考勤管理系统

032-springboot学生考勤管理系统演示录像2022 开发语言:Java 框架:springboot JDK版本:JDK1.8 服务器:tomcat7 数据库:mysql 5.7(一定要5.7版本) 数据库工具:Navicat11 开发软件&…

java管理系统课设,基于Java的学生考勤管理系统设计毕业设计

基于Java的学生考勤管理系统设计毕业设计 本科生毕业论文(设计)本科生毕业论文(设计) 基于基于 JavaJava 的学生考勤管理的学生考勤管理系统设计系统设计 Design of Student Attendance Management System Based on Java 专 业 电子信息工程 姓 名 学 号 指 导 教 师 完 成 时…

学生考勤及行为管理系统_学生考勤管理系统_考勤管理系统-先知科技

考勤管理系统简介: 先知智慧校园考勤管理系统帮助各大院校解决教职工考勤,学生上课考勤多种方式考勤。可通过手机端app考勤,终端考勤机器考勤,刷卡通过人形通道考勤,电子班牌考勤,人脸识别考勤多种方式正对…

基于php013学生考勤管理系统

经过查阅关于高校考勤系统的优秀毕业设计,使我对基于PHP的学生考勤管理系统的设计有了进一步了解,大致分为三个大模块:学生模块,教师模块和管理员模块。系统为需要考勤的人员和学院提供不同权限的管理、查询、考勤等操作。考勤系统…

[附源码]java毕业设计基于的高校学生考勤管理系统

项目运行 环境配置: Jdk1.8 Tomcat7.0 Mysql HBuilderX(Webstorm也行) Eclispe(IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持)。 项目技术: SSM mybatis Maven Vue 等等组成,B/S模式 M…

基于jsp学生考勤管理系统设计

考勤作为一个学校的基础管理,是对学生的个人出勤情况的依据。传统的考勤靠手工操作、纸质传递,这样的方式造成了考勤不全面、数据不准确和资料的共享程度低。因此学校需要一个可以适应大量信息控制和数据处理的考勤管理系统,用计算机的高效处…

MySQL做学生考勤系统_Jsp+Ssh+Mysql实现的Java Web学生考勤管理系统

JspSshMysql实现的Java Web学生考勤管理系统https://www.yuanlrc.com/product/details.html?pid164&fuid6666 实现了管理员、学生、教师三个角色的功能,其中管理员可以管理基本信息,如班级信息、课程信息、用户信息、课程表等。教师可以管理自己班级…

(附源码)ssm学生考勤管理系统 毕业设计 260952

摘 要 21世纪的今天,随着社会的不断发展与进步,人们对于信息科学化的认识,已由低层次向高层次发展,由原来的感性认识向理性认识提高,管理工作的重要性已逐渐被人们所认识,科学化的管理,使信息存…

C语言课程设计学生考勤管理系统

学生考勤管理系统 1、题目与要求 功能:设计一考勤系统。考勤信息记录了学生的缺课情况,它包括:缺课日期、第几节课、课程名称、学生姓名、学生学号、缺课类型(迟到、早退、请假及旷课)。系统具有以下功能&#xff1a…

C语言实现学生考勤管理系统

题目要求&#xff1a; 代码实现如下&#xff1a; 在这里插入代码片 #include<stdio.h> #include<stdlib.h> #include<string.h> int number;//全局变量&#xff0c;记录全部人的个数 //结构体&#xff0c;定义单个学生的信息 typedef struct student {i…

C++学生考勤管理系统报告

c课程设计学生考勤管理系统报告 1.需求分析 1.录入学生的缺课记录&#xff1b; 2&#xff0e;修改某个学生的缺课记录&#xff1b; 3&#xff0e;查询某个学生的缺课情况&#xff1b; 4&#xff0e;统计某段时间内&#xff0c;某门课旷课学生姓名及旷课次数&#xff0c;按旷课次…

学生考勤管理系统

学生考勤管理系统 学生考勤管理系统 背景分析&#xff1a; 随着高校校园信息化的逐步完善&#xff0c;有效地借助网络、数据库等技术提高工作和管理效率。如今针对师生的成绩查询系统、教务管理系统、招生就业系统、BBS、校园网站等系统在各大高校纷纷出现[1]&#xff0c;对全…

C语言课程设计——学生考勤管理系统

C语言课程设计——学生考勤管理系统 题目要求&#xff1a; 学生考勤管理系统设计 &#xff08;1&#xff09;问题描述 考勤信息记录了学生的缺课情况&#xff0c;它包括&#xff1a;缺课日期、第几节课、课程名称、学生姓名、缺课类型&#xff08;迟到、早退、请假及旷课&…

基于java学生考勤管理系统设计——计算机毕业设计

考勤作为一个学校的基础管理,是对学生的个人出勤情况的依据。传统的考勤靠手工操作、纸质传递,这样的方式造成了考勤不全面、数据不准确和资料的共享程度低。因此学校需要一个可以适应大量信息控制和数据处理的考勤管理系统,用计算机的高效处理方法和数据库的严谨结构代替手工操…

基于JavaSwing的学生考勤管理系统设计与实现

目录 前言 7 一、系统开发环境及相关技术 8 &#xff08;一&#xff09;系统设计思想及处理流程 8 &#xff08;二&#xff09;运行环境 8 &#xff08;三&#xff09;开发技术及开发工具简介 8 三、需求分析 10 &#xff08;一&#xff09;学生用户需求 10 &#xff08;二&…

《学生考勤信息管理系统》数据库课程设计

目录 一、 需求分析 前台功能模块 后台功能模块 1.1 功能模块的划分及介绍 1.2 实体及重要属性 1.3 业务流程图 二、 概念结构设计 2.1. E-R图的设计 三 、逻辑结构设计 表设计 User1-用户表 Student-学生信息表 College-院系信息表 Attendance personnel 考勤人员表 C…

多个div在同一行显示

使用float:left&#xff0c;也可以使用display : inline-block&#xff0c;可以使多个div在同一行显示。 <div class"search_row"><div class"form-group" style"float:left" > <%-- 通过左浮动使多个div在一行显示--%&g…

HTML如何让两个div并排在一行,如何实现两个或多个div并列于一行

div是块状元素&#xff0c;默认是独占据一行。 但是&#xff0c;如何让两个或多个块区域并列于一行&#xff1f; 块状元素有一个很重要的“float”属性&#xff0c;可以达成这种效果。float 属性也被称为浮动属性&#xff0c;这个词非常形象。 对前面的div元素设置浮动属性后&a…