关于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 相关文章推荐
YUI 读码日记之 YAHOO.util.Dom - Part.1
Mar 22 Javascript
jquery.ui.draggable中文文档
Nov 24 Javascript
JS跨域总结
Aug 30 Javascript
浅析XMLHttpRequest的缓存问题
Dec 13 Javascript
javascript动态创建及删除元素的方法
Dec 22 Javascript
jQuery实现单击和鼠标感应事件
Feb 01 Javascript
javascript实现完美拖拽效果
May 06 Javascript
JS实现同一个网页布局滑动门和TAB选项卡实例
Sep 23 Javascript
新入门node.js必须要知道的概念(必看篇)
Aug 10 Javascript
遍历json 对象的属性并且动态添加属性的实现
Dec 02 Javascript
three.js中文文档学习之如何本地运行详解
Nov 20 Javascript
Vue 中 template 有且只能一个 root的原因解析(源码分析)
Apr 11 Javascript
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
用文本文件制作留言板提示(下)
2006/10/09 PHP
php简单静态页生成过程
2008/03/27 PHP
几个php应用技巧
2008/03/27 PHP
php 需要掌握的东西 不做浮躁的人
2009/12/28 PHP
thinkPHP的Html模板标签使用方法
2012/11/13 PHP
PHP实现基于mysqli的Model基类完整实例
2016/04/08 PHP
Ajax和PHP正则表达式验证表单及验证码
2016/09/24 PHP
php微信开发之音乐回复功能
2018/06/14 PHP
php使用event扩展的io复用测试的示例
2020/10/20 PHP
jquery中防刷IP流量软件影响统计的一点对策
2011/07/10 Javascript
jQuery动态地获取系统时间实现代码
2013/05/24 Javascript
jQuery制作仿腾讯web qq用户体验桌面
2013/08/20 Javascript
跨域传值即主页面与iframe之间互相传值
2013/12/09 Javascript
jQuery之选项卡的简单实现
2014/02/28 Javascript
jquery进行数组遍历如何跳出当前的each循环
2014/06/05 Javascript
javascript中关于&amp;&amp; 和 || 表达式的小技巧分享
2015/04/10 Javascript
JS非Alert实现网页右下角“未读信息”效果弹窗
2015/09/26 Javascript
JavaScript 模块的循环加载实现方法
2015/12/13 Javascript
jQuery中的siblings用法实例分析
2015/12/24 Javascript
JavaScript中的对象继承关系
2016/08/01 Javascript
JavaScript每天必学之数组和对象部分
2016/09/17 Javascript
jstree的简单实例
2016/12/01 Javascript
微信小程序 实战程序简易新闻的制作
2017/01/09 Javascript
基于VUE选择上传图片并页面显示(图片可删除)
2017/05/25 Javascript
Vue中使用matomo进行访问流量统计的实现
2019/11/05 Javascript
如何基于JS截获动态代码
2019/12/25 Javascript
Django入门使用示例
2017/12/12 Python
Python中如何导入类示例详解
2019/04/17 Python
Django如何实现网站注册用户邮箱验证功能
2019/08/14 Python
Alexandre Birman美国官网:亚历山大·伯曼
2019/10/30 全球购物
英国领先的在线高尔夫商店:Gamola Golf
2019/11/16 全球购物
《第一朵杏花》教学反思
2014/04/16 职场文书
股指期货心得体会
2014/09/13 职场文书
2015年社区教育工作总结
2015/05/13 职场文书
2016年4月份红领巾广播稿
2015/12/21 职场文书
SpringBoot+VUE实现数据表格的实战
2021/08/02 Java/Android