关于Javascript闭包与应用的详解

 更新时间:2021年04月21日 11:30:43   作者:Marshal_dj  
这篇文章主要介绍了关于Javascript闭包与应用的详解,文中有非常详细的代码示例.对正在学习js的伙伴们有很好的帮助,需要的朋友可以参考下

前言

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

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

相关文章

  • 微信小程序 MD5的方法详解及实例代码

    微信小程序 MD5的方法详解及实例代码

    这篇文章主要介绍了微信小程序 MD5的方法详解及实例代码的相关资料,需要的朋友可以参考下
    2017-03-03
  • 微信小程序  checkbox组件详解及简单实例

    微信小程序 checkbox组件详解及简单实例

    这篇文章主要介绍了微信小程序 checkbox组件详解及简单实例的相关资料,需要的朋友可以参考下
    2017-01-01
  • ajax与302响应代码测试

    ajax与302响应代码测试

    服务器端的响应是302 Found,在ajax的回调函数中能够获取这个状态码吗?能够从Response Headers中得到Location的值进行重定向吗?让我们来一起动手写写代码看看实际情况吧。
    2013-10-10
  • 精确到按钮级别前端权限管理实现方案

    精确到按钮级别前端权限管理实现方案

    这篇文章主要为大家介绍了精确到按钮级别前端权限管理实现方案详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-09-09
  • 通过修改referer下载文件的方法

    通过修改referer下载文件的方法

    遇到了一个郁闷的事:如果让Http对象作全局变量,那么onreadystatechange只会在第一次执行时触发,以后都不会触发这个事件了。 只好在每次Down文件时重新创建一个XmlHttp对象。
    2008-05-05
  • 解析Clipboard API剪贴板操作实例

    解析Clipboard API剪贴板操作实例

    这篇文章主要为大家介绍了解析Clipboard API剪贴板操作实例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-09-09
  • 如何编写高质量 JavaScript 代码

    如何编写高质量 JavaScript 代码

    如果要编写出高质量的 JavaScript 代码,可以从以下三个方面去考虑。分别是:易阅读的代码、高性能的代码、健壮性的代码。下面我将分别对这三个方面进行阐述。需要的朋友可以参考一下
    2021-09-09
  • 微信小程序页面传值实例分析

    微信小程序页面传值实例分析

    这篇文章主要介绍了微信小程序页面传值实例分析的相关资料,需要的朋友可以参考下
    2017-04-04
  • 微信小程序 wxapp内容组件 text详细介绍

    微信小程序 wxapp内容组件 text详细介绍

    这篇文章主要介绍了微信小程序 wxapp内容组件 text详细介绍的相关资料,并附简单实例代码,需要的朋友可以参考下
    2016-10-10
  • JavaScript 反射学习技巧

    JavaScript 反射学习技巧

    这篇文章主要给大家分享的是JavaScript 的反射学习技巧,主要是区别在于所有的函数对象属性过于复杂,而且额外增加可能会导致程序行为不合理,所以扩展 Reflect 函数来专门对函数对象处理调用方法,构造对象,获取或者设置属性等相关操作。下面一起进入文章内容吧
    2021-10-10

最新评论