`
bird12010
  • 浏览: 8086 次
  • 性别: 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知识点总结(十六)之Javascript闭包(Closure)代码详解

    在深入讨论JavaScript闭包之前,首先需要了解JavaScript的变量作用域。在JavaScript中,变量的作用域分为两种:全局变量和局部变量。全局变量是在函数外部定义的变量,可以在JavaScript程序的任何地方被访问。局部...

    Javascript闭包实例详解

    JavaScript中的闭包是一种重要的编程概念,它涉及到函数、作用域和变量持久化。闭包本质上是函数能够记住并访问其词法作用域内的变量,即使该函数已经执行完毕且其外部作用域不再存在。这种特性使得闭包成为...

    JavaScript闭包详解1

    JavaScript中的闭包是一种高级特性,它允许一个函数访问并操作其外部作用域的变量,即使在外部函数已经执行完毕后。这种机制的核心在于,当内部函数引用了外部函数的变量时,JavaScript会保持对外部作用域的引用,...

    理解_JavaScript_闭包

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

    javaScript闭包技术资料

    ### JavaScript闭包技术详解 #### 一、闭包的基本概念 **闭包**是JavaScript中一个重要的概念,它涉及到函数的执行环境、作用域链等关键要素。简单来说,闭包是一个函数及其相关的引用环境的组合。具体而言,当一...

    揭开Javascript闭包的真实面目

    【JavaScript 闭包详解】 闭包是JavaScript编程中一个核心且关键的概念,尤其对于初学者而言,理解起来可能有些挑战。闭包本质上是一种特殊的作用域,它可以捕获并存储其外部函数作用域内的变量,即使外部函数已经...

    JAVASCRIPT闭包详解

    ### JavaScript闭包详解 #### 一、闭包概念与特性 **闭包**是JavaScript中最强大的特性之一,它指的是一个函数及其相关的引用环境的组合。简单来说,闭包就是一个能够记住并访问其自身作用域以外变量的函数。这种...

    JavaScript闭包详解

    根据提供的文件信息,我们可以从标题、描述、标签以及部分内容中提取和总结JavaScript闭包相关的知识点。以下是对这些信息的详细解读: ### 闭包的定义与理解 JavaScript闭包是函数和声明该函数的词法环境的组合。...

    javascript闭包

    ### JavaScript闭包详解 #### 一、闭包概念与工作机制 **闭包**是JavaScript中最强大的特性之一,它使得函数能够记住并访问其定义时所在的作用域中的变量。要理解和运用闭包,首先需要理解作用域、作用域链以及...

    学习Javascript闭包

    ### 学习JavaScript闭包详解 #### 一、引言 闭包是JavaScript语言中一个重要的概念,也是理解和掌握高级编程技巧的关键之一。本文将基于阮一峰的文章《学习JavaScript闭包》进行深入探讨,旨在帮助读者理解闭包的...

    JavaScript闭包的定义和理解,含代码示例

    ### JavaScript闭包详解 #### 一、闭包的定义与概念 闭包是JavaScript中一个非常重要的概念,它涉及到函数作用域以及变量的作用域链。简单来说,闭包就是一个能够访问其外部作用域中变量的函数。具体而言,当一个...

    javaScript闭包

    ### JavaScript闭包详解 #### 引言 JavaScript作为一种动态、弱类型的编程语言,在Web开发领域占据了举足轻重的地位。其中,“闭包”是JS语言中一个非常重要的概念,它不仅能够帮助开发者实现某些特殊的功能,如...

    100多个javescript函数[定义].pdf

    Javascript闭包(Closure)详解 Javascript闭包(Closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现。下面是对闭包的详细解释。 一、变量的作用域 要理解闭包,首先必须理解...

    javascript 闭包详解

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

    JavaScript闭包和回调详解

    JavaScript闭包和回调是两种重要的编程概念,它们在JavaScript中扮演着关键角色,特别是在处理异步操作和封装变量时。 闭包是一种特殊的函数,它能够记住并访问其词法作用域内的变量,即使该函数已经执行完毕,其...

Global site tag (gtag.js) - Google Analytics