js进阶学习之--闭包的理解

最新推荐文章于 2024-03-06 15:40:21 发布

Web攻城狮

最新推荐文章于 2024-03-06 15:40:21 发布

阅读量505

点赞数 1

分类专栏： js 文章标签： js进阶学习闭包闭包的理解机制函数

本文链接：https://blog.csdn.net/b1244154318/article/details/52133105

版权

js 专栏收录该内容

19 篇文章 2 订阅

订阅专栏

js进阶学习之--闭包

闭包概念：一个函数引用另一个函数中的变量的函数叫做闭包

	<script>
		//父函数中的变量不会被释放
		function closure(){
			var i = 0;
			return function(){
				alert(i++);
			}
		}
//将函数的返回值接回
		var fn = closure();
		var fn2 = closure();
		fn(); //返回结果1
		fn(); //返回结果2
		fn2();//返回结果1

//但是一般的函数，调用一次之后，函数的变量的值就会释放
		 function fn01(){
			var i = 0;
			alert(++i);
		}
		 fn01();//返回结果：1
		 fn01();//返回结果1
		 fn01();//返回结果1

		
	</script>

闭包：对外公开调用内部的接口，外部可以调用

function fn01(){
			var a = 10;
			var b = 100;
			
			return {
				fn03:function(){
					console.log(a);
				},
				fn04:function(){
					console.log(b);
				}
			}
		}

		var fn = fn01();
		fn.fn03();

		function fn02(){
			var a = 10;
			function fn03(){
				console.log(a);
			}
		}<pre name="code" class="javascript"><span style="white-space:pre">		</span>var fn = fn02();
		fn.fn03();

闭包实现li的点击事件

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>闭包3</title>
	<script>
		window.onload = function(){
			var liList = document.getElementsByTagName("li");
			for(var i = 0; i < liList.length; i++){
				// 第一种方式：
				// function fn01(i){
				// 	liList[i].onclick = function(){
				// 		alert(i);
				// 	}
				// }
				// fn01(i);


				// 第二种方式：
				// (function(i){
				// 	liList[i].onclick = function(){
				// 		alert(i);
				// 	}
				// })(i);


				// 第三种方式：
				liList[i].onclick = (function(i){
					return function(){
						alert(i);
					}
				})(i);
			}
		}
	</script>
</head>
<body>
	<ul>
		<li>1111111</li>
		<li>2222222</li>
		<li>3333333</li>
		<li>4444444</li>
	</ul>
</body>
</html>

Web攻城狮

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js进阶学习之--闭包的理解

js进阶学习之--闭包闭包概念：一个函数引用另一个函数中的变量的函数叫做闭包 //父函数中的变量不会被释放 function closure(){ var i = 0; return function(){ alert(i++); } }//将函数的返回值接回 var fn = closure(); var fn2 = closur
复制链接

扫一扫