关于Javascript闭包与应用的详解
作者:Marshal_dj 时间:2024-04-23 09:09:28
前言
Javascript闭包在学习过程中一般较难理解,本文从什么是闭包,常见闭包示例,闭包作用,闭包应用及闭包问题等方面来介绍闭包,希望能给大家带来更深层次的认识,有不恰当之处请指出,谢谢。
一、什么是闭包?
闭包是指一个嵌套的内部(子)函数引用了父函数作用域中数据的函数,这就产生了闭包。
关键理解:
1. 产生闭包必须要有嵌套函数
2. 闭包是函数,并是嵌套的内部函数
3. 闭包内部函数必须要引用父函数作用域中数据
如果不满足以上条件,则不能产生闭包,接下来示例说明。
1.1闭包满足条件代码
<script>
function person(){
var name='marshal';
function student(){ //声明子函数
console.log(name);//引用父函数作用域的变量name
}
}
person();//函数执行,产生闭包
</script>
1.2闭包产生时机
<script>
function person(){
var name='marshal';//js执行此行时,产生闭包
function student(){ //声明子函数
console.log(name);//引用父函数作用域的变量name
}
student();//内部函数在外部函数调用
}
person();//函数执行,虽满足闭包条件,但未产生闭包
</script>
闭包产生时机:嵌套子函数代码块有引用父函数作用域的数据,并该嵌套子函数要执行前,创建上下文时产生闭包。或者简单说该该嵌套子函数在外部被执行时,此刻产生了闭包。
<script>
function person(){
var name='marshal';
function student(){
console.log(name); //该方法代码内为闭包代码
}
return student;
}
var p=person();//因创建子函数对像,此时产生第一次闭包,并将子函数student返回给p,由于p没有消失,子函数引用的变量name,一直在内存在存储,直到将p=null,进行回收
p();//执行子函数的闭包代码块,输出"marhsal"
p();//第二次执行子函数的闭包代码块,输出"marhsal"
person();//第二次创建子函数调对象,此时产生第二次闭包,但不执行子函数student代码块
</script>
二、常见闭包示例
2.1 子函数做为实参传递
<script>
function setTimeoutTest(message,time){
setTimeout(function(){
alert(message);//嵌套子函数引用父函数变量message,产生闭包
},time);
}
setTimeoutTest('提示信息',1000);
</script>
2.2 计数器使用(函数返回)
<script>
function count(){
var i=1;
function add(){
i++;
console.log(i);
}
return add;
}
var c=count();//生产闭包
c();//2
c();//3
c();//4
</script>
三、闭包作用
3.1 闭包作用
1)子函数引用父函数的变量或函数,生命周期延长
2)其变量或函数一直存在,外部可以访问函数内部的值
<script>
function count(){
var i=1;
function add(){
i++;
console.log(i);
}
return add;
}
var c=count();
c();//2
c();//3 i的生命周期延长
</script>
四、闭包应用
4.1 自定义封装js代码
外部js代码 out.js 实现自加与自减
(function count(){
var i=1;
function add(){
i++;
console.log(i);
}
function subtract(){
i--
console.log(i);
}
window.count={
add:add,
subtract:subtract
}
})();
引用 out.js代码
<script src=out.js></script>
<script>
count.add(); //2
count.subtract();//1
count.subtract();//0
</script>
五、闭包问题
5.1 闭包与this
<script>
var name="marshal"; //创建全局变量
var person={
name:"leo",
getName:function(){ //返回匿名函数
return function(){ //返回this.name
return this.name; //返回字符串
}
}
};
alert(person.getName()()); //输出marshal,内部函数不可能直接访问外部函数this
</script>
解决方法
<script>
var name="marshal";
var person={
name:"leo",
getName:function(){
var that=this;//把this保存到闭包可以访问的另一个变量中
return function(){
return that.name;
}
}
};
alert(person.getName()());//that 指向person,而不是window
</script>
5.2 内存泄露
在使用闭包时,因变量一直存在,需要解除对象的引用,将对象设置为null, 从而确保其内存在适当时候可以被回收。
来源:https://blog.csdn.net/Marshaljun/article/details/115785867
标签:js,闭包,应用
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
python命令行参数argparse模块基本用法详解
2023-07-31 03:14:21
![](https://img.aspxhome.com/file/2023/2/59282_0s.png)
python利用后缀表达式实现计算器功能
2022-08-26 03:25:35
![](https://img.aspxhome.com/file/2023/1/112011_0s.jpg)
redis服务器环境下mysql实现lnmp架构缓存
2024-01-20 01:44:29
![](https://img.aspxhome.com/file/2023/1/107441_0s.png)
MySQL将select结果执行update的实例教程
2024-01-17 14:00:59
![](https://img.aspxhome.com/file/2023/6/68606_0s.png)
实现WordPress主题侧边栏切换功能的PHP脚本详解
2024-06-05 09:23:40
![](https://img.aspxhome.com/file/2023/5/122855_0s.png)
asp 通用修改和增加函数代码
2011-03-16 11:15:00
在数据库‘master’中拒绝CREATE DATABASE权限问题的解决方法
2011-10-24 19:46:55
浅析SQL Server 2008企业级新特性
2008-11-24 17:01:00
Mysql的MERGE存储引擎详解
2024-01-25 22:26:49
去除HTML代码中所有标签的两种方法
2023-07-03 03:40:48
webpack的 rquire.context用法实现工程自动化的方法
2024-05-11 09:05:29
![](https://img.aspxhome.com/file/2023/0/127190_0s.png)
Win10下Python3.7.3安装教程图解
2023-09-02 18:16:54
![](https://img.aspxhome.com/file/2023/6/62316_0s.jpg)
微信跳一跳php代码实现
2024-06-05 09:46:20
利用numpy和pandas处理csv文件中的时间方法
2023-01-21 09:44:56
![](https://img.aspxhome.com/file/2023/4/88984_0s.jpg)
使用AJAX的一个简单的例子
2007-09-21 17:55:00
Windows11下MySQL 8.0.29 安装配置方法图文教程
2024-01-24 09:20:40
![](https://img.aspxhome.com/file/2023/7/117807_0s.jpg)
Sql Server 和 Access 操作数据库结构Sql语句
2008-02-11 18:59:00
Django 构建模板form表单的两种方法
2021-07-01 23:44:41
![](https://img.aspxhome.com/file/2023/7/130827_0s.png)
原生js实现tab选项卡切换
2024-04-19 10:43:14
![](https://img.aspxhome.com/file/2023/9/135809_0s.jpg)
Mysql GTID Mha配置方法
2024-01-16 22:58:51