JavaScript闭包函数及其作用

一、认识闭包

案例:

页面有5个li标签,标签显示0~4五个数字,点击不同的标签在控制台中打印标签的索引。

主要代码:

	 <ul>
                <li>0</li>
	 	<li>1</li>
	 	<li>2</li>
	 	<li>3</li>
	 	<li>4</li>
	 </ul>
	 <script>
	 	var liList=document.getElementsByTagName("li");
	 	for(var i=0;i<liList.length;i++){
	 		liList[i].onclick=function(){
	 				console.log(i);
	 			}
	 	}
	 </script>

主要说明:

如果是你会不会这样写?

如果这样写,一旦运行就会发现不管点击那个标签打印的都是数字"5"。因为在执行点击操作时,for循环已经进行完毕且i值为"5"。那怎么做才能使每次循环时i值得以保存不被系统回收?闭包!

代码修改:

         <ul>
	 	<li>0</li>
	 	<li>1</li>
	 	<li>2</li>
	 	<li>3</li>
	 	<li>4</li>
	 </ul>
	 <script>
	 	var liList=document.getElementsByTagName("li");
	 	for(var i=0;i<liList.length;i++){
	 		liList[i].onclick=(function(j){
	 			return function(){
	 				console.log(j);
	 			}
	 		})(i);
	 	}
	 </script>

代码说明:

当两个函数发生嵌套,内部函数使用外部函数的变量或者参数就会形成闭包。形成闭包之后,内部函数的变量将会被保存在对应的函数内存中,不会像上面代码中内部函数变量被及时清除。

二、闭包的定义

1.函数嵌套函数

2.内层函数访问调用外层函数变量或参数(将参数或者变量长期保存在内存中)

三、闭包的作用

1.实现公有变量(函数累加器)  

function add(){
		var num = 0;
		function a(){
			console.log( ++ num);
		}
		return a;
	}
	var myadd = add();
	myadd();//结果为1
	myadd();//结果为2
	myadd();//结果为3


2.可以做缓存(存储结构)   
3.可以实现封装,属性私有化(私有化变量)   

function Deng(name,wife){
	var prepareWife = "xiaozhang";
	this.name = name;
	this.wife = wife;
	this.divorce = function(){
		this.wife = prepareWife;
	}
	this.changePrepareWife = function(target){
		prepareWife = target;
	}
	this.sayPrepareWife = function(){
		console.log(prepareWife);
	}
}
	var deng = new Deng('deng','xiaoliu');

 

  • 6
    点赞
  • 37
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值