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

时间:2022-01-11 03:21:45

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>