`
bird12010
  • 浏览: 7497 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

详解javascript闭包

阅读更多

定义:函数嵌套函数,内部函数可以引用外部函数的参数和变量,参数和变量不会被垃圾回收机制所收回

function aaa(a){
//a,b都要在内部函数中被引用,所以不会被垃圾回收机制收回。	
	var b = 5;

	function bbb(){
		alert(a);
		 alert(b);
	}

}

aaa();



//JS中的垃圾回收机制

function aaa(){
	
	var a = 1;
	
}

aaa();
//当函数执行完毕后,变量a就会被垃圾回收机制收回。

function aaa(){
	var a = 5;
	function bbb(){
		alert(a);
	}
	return bbb;
}

var c = aaa();//a已经执行完毕,c代表的就是bbb这个函数
c();//c执行的话变量其实并没有收回。

 

好处

1.希望一个变量长期驻扎在内存当中,例子见上
2.避免全局变量的污染

var a = 1;
function aaa(){
	a++;
	alert(a);
}

//aaa();  //2
//aaa();  //3
//alert(a);
//由于a是一个全局变量,所以在外部是能被访问到的。为了提高性能,尽量避免出现全局变量。

function aaa(){
	var a = 1;
	a++;
	alert(a);
}
aaa();  //2
aaa();  //2
之所以弹出两次2,是因为当每一次调用时,代码都执行了一次,这样的话a就不会继续累加了。
如何做到既让a是一个局部变量,又要让a累加?这就是闭包所能做到的。
function aaa(){
	var a = 1;
	return function(){//这样就构成了一个函数嵌套函数的关系,而变量a相对于内部函数是可以被找到的,而且不受外部执行函数的影响,当它执行完毕后,函数依然可以调用函数a的变量,而且还会累加。
		a++;
		alert(a);
	}
}

var b = aaa();

b();  //2
b();  //3
alert(a);//此时外部引用a就访问不到了。因为它是一个局部变量。

将函数声明改成函数表达式,
var aaa = (function(){//将一个匿名函数赋给变量aaa,这样函数运行时就会执行一次,
此时变量aaa就是外部函数执行完毕的返回值。

	var a = 1;
	return function(){
		a++;
		alert(a);
	}

})();
aaa();  //2
aaa();  //3
通常将这种方式叫做代码模块化,防止全局变量的污染。

 
3.私有成员的存在

 

var aaa = (function(){

	var a = 1;  //局部变量,相对于下面私有方法是全局的
	
	function bbb(){  //私有方法
		a++;
		alert(a);
	}
	
	function ccc(){//私有方法
		a++;
		alert(a);
	}
	
	return {//返回一个json的结构
		
		b : bbb,
		c : ccc
		
	}

})();


aaa.b();  //2
aaa.c();  //3

//alert(a); undefined
//alert(bbb);undefined
//alert(ccc);undefined

 

 

 

应用

 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link type="text/css" rel="stylesheet" href="css/style.css">
<script type="text/javascript">
window.onload=function(){
	var aLi = document.getElementsByTagName('li');
	/*	
	for (var i = 0; i < aLi.length; i++) {
		aLi[i].onclick = function(){//当点击时for循环已经结束了,所以每次点击都是3
			alert(i);
		}
	};*/
//方法1 利用闭包的形式将值0123传进去,让它永远存在内存中,需要调用时直接来用
	/*for (var i = 0; i < aLi.length; i++) {
		(function(i){
			aLi[i].onclick = function(){
				alert(i);
			}
		})(i);
		
	};*/

//当点击时,已经执行完毕,然后接着return一个返回值,返回一个匿名函数,

for (var i = 0; i < aLi.length; i++) {

			aLi[i].onclick = (function(i){ //i存在在内存中
				return function(){
					alert(i);//此处调用的i是存在在内存中的i
				}
			})(i);
		
	};
}
</script>
</head>
<body>
    <ul>
    	<li>111</li>
    	<li>222</li>
    	<li>333</li>
    	<li>444</li>
    </ul>
</body>
</html>

 闭包需要注意的地方。

在ie下会引发内存泄露。

 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link type="text/css" rel="stylesheet" href="css/style.css">
<script type="text/javascript">
/*window.onload = function(){
	var oDiv = document.getElementById('div1');
	
	oDiv.onclick = function(){
		alert(oDiv.id);
	};
	
	window.onunload = function(){ //页面出来的时候把事件给取消掉
		oDiv.onclick = null;
	};
	
};*/

window.onload = function(){
	var oDiv = document.getElementById('div1');
	
	var id = oDiv.id; //提前赋给一个变量
	
	oDiv.onclick = function(){
		alert(id);//在里面去调用
	};
	
	oDiv = null; //接着让其为空
	
};
</script>
</head>
<body>
   <div id="div1">aaa</div>
</body>
</html>

 

分享到:
评论

相关推荐

    【JavaScript源代码】详解JavaScript闭包问题.docx

    详解JavaScript闭包问题  闭包是纯函数式编程语言的传统特性之一。通过将闭包视为核心语言构件的组成部分,JavaScript语言展示了其与函数式编程语言的紧密联系。由于能够简化复杂的操作,闭包在主流JavaScript库...

    javascript闭包详解

    javascript闭包详解 javascript闭包详解 javascript闭包详解

    javascript闭包详解中文word版

    资源名称:javascript闭包详解 中文word版   内容简介: Javascript中有几个非常重要的语言特性——对象、原型继承、闭包。其中闭包 对于那些使用传统静态语言C/C 的程序员来说是一个新的...

    JavaScript闭包详解1

    闭包 是指有权访问另一个函数作用域中的变量的函数,创建闭包的最常见的方式就是在一个函数内创建另一个函数,通过另一个函数访问这个函数的局部变量闭包的缺点就是常驻内

    理解_JavaScript_闭包

    本文结合 ECMA 262 规范详解了闭包的内部工作机制,让 JavaScript 编程人员对闭包的理解从“嵌套的函数”深入到“标识符解析、执行环境和作用域链”等等 JavaScript 对象背后的运行机制当中,真正领会到闭包的实质。

    JavaScript闭包详解

    本文详细介绍了javascript闭包,十分的详尽,推荐给有需要的小伙伴参考下。

    JAVASCRIPT闭包详解

    闭包是 ECMAScript (JavaScript)最强大的特性之一,但用好闭包的前提是必须 理解闭包。闭包的创建相对容易,人们甚至会在不经意间创建闭包,但这些无意创建的闭包却存在潜在的危害 ,尤其是在比较常见的浏览器环境...

    理解 JavaScript 闭包

    本文结合 ECMA 262 规范详解了闭包的内部工作机制,让 JavaScript 编程人员对闭包的理解从“嵌套的函数”深入到“标识符解析、执行环境和作用域链”等等 JavaScript 对象背后的运行机制当中,真正领会到闭包的实质。

    javascript 闭包详解

    主要详细介绍了javascript 闭包的相关资料,十分详尽,需要的朋友可以参考下

    JavaScript闭包和回调详解

    本文主要讲解了JavaScript闭包和回调,闭包的概念和特性,结合实例分析了使用步骤与方法

    Javascript闭包实例详解

    闭包就是函数的局部变量集合,只是这些局部变量在函数返回后会继续存在,本文通过代码实例给大家介绍javascript闭包,对javascipt闭包相关知识感兴趣的朋友一起学习吧

    JavaScript知识点总结(十六)之Javascript闭包(Closure)代码详解

    很早就接触过闭包这个概念了,但是一直糊里糊涂的,没有能够弄明白JavaScript的闭包到底是什么,有什么用,今天在网上看到了一篇讲JavaScript闭包的文章(原文链接),讲得非常好,这下算是彻底明白了JavaScript的闭包...

    javascript 闭包详解及简单实例应用

    主要介绍了javascript 闭包详解及应用的相关资料,需要的朋友可以参考下

    详解JavaScript作用域 闭包

    JavaScript闭包,是JS开发工程师必须深入了解的知识。3月份自己曾撰写博客《JavaScript闭包》,博客中只是简单阐述了闭包的工作过程和列举了几个示例,并没有去刨根问底,将其弄明白! 现在随着对JavaScript更深入的...

    JavaScript闭包和范围实例详解

    主要介绍了JavaScript闭包和范围,结合实例形式详细分析了javascript闭包的使用及变量的作用范围,需要的朋友可以参考下

    JavaScript 闭包详细介绍

    主要介绍了JavaScript 闭包的相关资料,需要的朋友可以参考下

    Javascript 闭包详解及实例代码

    Javascript 闭包 闭包,是 Javascript 比较重要的一个概念,对于初学者来讲,闭包是一个特别抽象的概念,特别是ECMA规范给的定义,如果没有实战经验,很难从定义去理解它。因此,本文不会对闭包的概念进行大篇幅描述...

    JavaScript 闭包机制详解及实例代码

    主要介绍了JavaScript 闭包机制详解及实例代码的相关资料,需要的朋友可以参考下

    JavaScript闭包实例详解

    主要介绍JavaScript闭包知识,包括闭包的基本概念,闭包的用途等相关知识,介绍的非常详细,具有参考借鉴价值,感兴趣的朋友一起看看吧

Global site tag (gtag.js) - Google Analytics