详解javascript中的闭包

闭包:利用函数的嵌套,实现将外层函数中的局部变量,在外层函数外部修改的过程。本质上,闭包是将函数内部和函数外部连接起来的桥梁。

闭包的形成环境:

  • 函数的嵌套 (例:有一个函数A , 在函数A内部返回一个函数B)
  • 内部函数使用外部函数的变量 (在函数B中访问函数A的私有作用域变量)
  • 将内部函数返回,在外部函数的外部声明变量接收返回值,并执行 (在函数A外部,有变量引用函数B)

以上三个条件,缺一不可
例如:js 部分

function fn(){
	var a = 10;
	return function(){
		a++;
		console.log(a);
	}
}
var f = fn();
f();		//11
f();		//12

闭包的特点

  • 作用域空间不销毁
  • 可以通过闭包语法,从外部访问函数内部变量
  • 保护私有变量(解决所有的全局变量,防止污染,节省内存空间)

闭包的应用场景

html 部分:

<ul class="list">
	<li>link1</li>
	<li>link2</li>
	<li>link3</li>
	<li>link4</li>
</ul>
1.循环中的事件 (事件处理函数使用循环的计数器):

js 部分

var ali = document.querySelectorAll(".list li");
	for(var i=0;i<ali.length;i++){
		ali[i].onclick = (function(index){
			return function(){
				console.log(index);
			}
		})(i);
}
2.给系统某些默认的回调函数 (如:计时器的回调函数) 传参:

js 部分:

function fn(str){
	return function(){
		console.log(str);
	}
}
setTimeout(fn("hello"),1000);
3.为了处理掉全局变量,最好一开始就是一个匿名函数 (简易闭包):
var fn = (function(){
	var a = "hello";
	return function(){
		console.log(a + "world");
	}
})();
fn();
4.事件委托的封装:

js 部分:

var ali = document.querySelectorAll(".list li");
document.onmouseover = eveEnt(ali,function(){
  	console.log(this);
});
function eveEnt(child,callback){
	return function(eve){
		var e = eve || window.event;
		var tar = e.target || e.srcElement;
		for(var i=0;i<child.length;i++){
			if(child[i] == tar){
				callback.call(tar);
			}
		}
	}
}

适用于模块化开发…

发布了6 篇原创文章 · 获赞 41 · 访问量 190

猜你喜欢

转载自blog.csdn.net/anr_safely/article/details/105522775
今日推荐