关于Javascript闭包与应用的详解


Posted in Javascript onApril 22, 2021

前言

Javascript闭包在学习过程中一般较难理解,本文从什么是闭包,常见闭包示例,闭包作用,闭包应用及闭包问题等方面来介绍闭包,希望能给大家带来更深层次的认识,有不恰当之处请指出,谢谢。

一、什么是闭包?

闭包是指一个嵌套的内部(子)函数引用了父函数作用域中数据的函数,这就产生了闭包。

关键理解:

1. 产生闭包必须要有嵌套函数
2. 闭包是函数,并是嵌套的内部函数
3. 闭包内部函数必须要引用父函数作用域中数据

如果不满足以上条件,则不能产生闭包,接下来示例说明。

1.1闭包满足条件代码

<script>
			function person(){
				var name='marshal';
				function student(){ //声明子函数
					console.log(name);//引用父函数作用域的变量name
				}
			}
			person();//函数执行,产生闭包
		</script>

关于Javascript闭包与应用的详解

1.2闭包产生时机

<script>
			function person(){
				var name='marshal';//js执行此行时,产生闭包
				function student(){ //声明子函数
					console.log(name);//引用父函数作用域的变量name
				}
				student();//内部函数在外部函数调用
			}
			person();//函数执行,虽满足闭包条件,但未产生闭包
		</script>

关于Javascript闭包与应用的详解

闭包产生时机:嵌套子函数代码块有引用父函数作用域的数据,并该嵌套子函数要执行前,创建上下文时产生闭包。或者简单说该该嵌套子函数在外部被执行时,此刻产生了闭包。

<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, 从而确保其内存在适当时候可以被回收。

到此这篇关于关于Javascript闭包与应用的详解的文章就介绍到这了,更多相关js闭包与应用内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
jquery select(列表)的操作(取值/赋值)
Aug 06 Javascript
js 获取中文拼音,Select自动匹配字母获取值的代码
Sep 23 Javascript
jQuery中的val()示例应用
Feb 26 Javascript
javascript如何判断输入的url是否正确
Apr 11 Javascript
jQuery实现表格行上移下移和置顶的方法
May 22 Javascript
js获取iframe中的window对象的实现方法
May 20 Javascript
微信小程序与后台PHP交互的方法实例分析
Dec 10 Javascript
Vue项目中使用jsonp抓取跨域数据的方法
Nov 10 Javascript
Vue分页效果与购物车功能
Dec 13 Javascript
javascript 设计模式之组合模式原理与应用详解
Apr 08 Javascript
JavaScript如何实现防止重复的网络请求的示例
Jan 28 Javascript
vue项目中的支付功能实现(微信支付和支付宝支付)
Feb 18 Vue.js
vue首次渲染全过程
使用 JavaScript 制作页面效果
Apr 21 #Javascript
一道JS算法面试题——冒泡、选择排序
Apr 21 #Javascript
吃通javascript正则表达式
Apr 21 #Javascript
Ajax是什么?Ajax高级用法之Axios技术
在HTML5 localStorage中存储对象的示例代码
Apr 21 #Javascript
canvas多重阴影发光效果实现
You might like
用php来检测proxy
2006/10/09 PHP
一个简单php扩展介绍与开发教程
2010/08/19 PHP
Pain 全世界最小最简单的PHP模板引擎 (普通版)
2011/10/23 PHP
PHP函数preg_match_all正则表达式的基本使用详细解析
2013/08/31 PHP
php版微信自动登录并获取昵称的方法
2016/09/23 PHP
php设计模式之模板模式实例分析【星际争霸游戏案例】
2020/03/24 PHP
jQuery(1.3.2) 7行代码搞定跟随屏幕滚动的层
2009/05/21 Javascript
jquery动画4.升级版遮罩效果的图片走廊--带自动运行效果
2012/08/24 Javascript
javascript中expression的用法整理
2014/05/13 Javascript
jQuery实现移动 和 渐变特效的点击事件
2015/02/26 Javascript
JQuery ztree带筛选、异步加载实例讲解
2016/02/25 Javascript
jQuery中选择器的基础使用教程
2016/05/23 Javascript
JS实现图片的不间断连续滚动的简单实例
2016/06/03 Javascript
全面解析JavaScript中的valueOf与toString方法(推荐)
2016/06/14 Javascript
Sortable.js拖拽排序使用方法解析
2016/11/04 Javascript
BootStrap按钮标签及基本样式
2016/11/23 Javascript
jQuery图片轮播(二)利用构造函数和原型创建对象以实现继承
2016/12/06 Javascript
jQuery实现CheckBox全选、全不选功能
2017/01/11 Javascript
vuejs响应用户事件(如点击事件)
2017/03/14 Javascript
webpack4 处理CSS的方法示例
2018/09/03 Javascript
Angular使用cli生成自定义文件、组件的方法
2018/09/04 Javascript
vue 列表页跳转详情页获取id以及详情页通过id获取数据
2019/03/27 Javascript
VUE路由动态加载实例代码讲解
2019/08/26 Javascript
[34:10]Secret vs VG 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.24
2019/09/10 DOTA
Python3指定路径寻找符合匹配模式文件
2015/05/22 Python
Python 的内置字符串方法小结
2016/03/15 Python
Python中强大的命令行库click入门教程
2016/12/26 Python
Python实现屏幕截图的两种方式
2018/02/05 Python
在pycharm中debug 实时查看数据操作(交互式)
2020/06/09 Python
Python Excel vlookup函数实现过程解析
2020/06/22 Python
python 实现单例模式的5种方法
2020/09/23 Python
工商管理专业学生的自我评价
2013/10/01 职场文书
应届大学生简历中的自我评价
2014/01/15 职场文书
正科级干部考察材料
2014/05/29 职场文书
2014年客房部工作总结
2014/11/22 职场文书
新闻稿标题
2015/07/18 职场文书