对javascript闭包理解

最新推荐文章于 2023-03-01 18:07:36 发布

wabcgn

最新推荐文章于 2023-03-01 18:07:36 发布

阅读量140

点赞数 1

本文链接：https://blog.csdn.net/wabcgn/article/details/78752679

版权

刚开始想尝试javascript，所以自己也不知道会有多少错误，请多加提点。

现在了解到的闭包函数有返回函数和不返回函数的2种

下面这个是返回函数的

<html>
  <head>
    <title>test</title>
	<script type="text/javascript">
		function foo() {
			var tmp = 3;
			return function () {
				tmp += 1;
				alert(tmp);
			}
		}
		var bar = foo();
		function test() {
			bar();
			//bar = null;
			//bar = foo();
		}
	</script>
	</head>
	<body>
		<input type="button" value="test" onclick="test();"/>
	</body>
</html>

运行这段代码每点击一次按钮值都会加1

但当把代码里的那2行注释去掉的话每次的值都是4

个人理解是tmp这个对象就是个局部的全局变量，因为在return的function中引用了这个对象，返回的这个函数又被bar引用，而bar是全局变量，因此便在关掉这个页面前不会释放tmp这个变量。但在去掉代码里的现行注释后bar释放了对返回的函数的引用，因此也就释放了tmp，当重新bar=foo()时，已经是另一次创建的tmp了，因此去掉注释后每次都是弹出的4

另一种是下面这种不带return的

<html>
  <head>
    <title>test</title>
	<script type="text/javascript">
		function closureExample(objID, text, timedelay){
			setTimeout(function() {
				document.getElementById(objID).innerHTML = text;
			}, timedelay);
		}
		function test(){
			closureExample('myDiv', 'Closure is created', 2000);
		}
	</script>
	</head>
	<body>
		<div id='myDiv'></div>
		<input type="button" value="test" onclick="test();"/>
	</body>
</html>

这种其实也是一样的，以text这个参数为例，这里传的是字面量，因此closureExamplej引用的是text的一个临时副本，相当于如下

因为setTimeout的回调引用了这个临时的副本，所以这个临时的副本也会成为一个局部的全局变量，在时间到时还能得到正确的值