JS自学
认识闭包
一、闭包需满足以下特点:
- 函数嵌套函数
- 内部函数使用外部函数的形参和变量
- 被引用的形参和变量不会被垃圾回收机制所回收
function a(num1) {
var num2 = 10;
function b() {
alert(num1 + "," + num2);
}
return b;
}
var res = a(20);
res();//20,10
二、闭包的好处
- 一个变量常驻在内存中
- 避免全局污染
- 可以声明私有成员
//声明私有变量
var A = (function () {
var age = 18;
function a() {
age += 2;
alert(age);
}
function b() {
age += 10;
alert(age);
}
return {
funcA: a,
funcB: b,
};
})();
var B = (function () {
var age = 18;
function a() {
age += 5;
alert(age);
}
function b() {
age *= 20;
alert(age);
}
return {
funcA: a,
funcB: b,
};
})();
A.funcA();//20
A.funcB();//30
B.funcA();//23
B.funcB();//460
三、立即执行函数
function show() {
alert("hello world");
}
show();
var show = function () {
alert("hello world");
};
show();
//立即执行函数
(function () {
alert("hello world");
})();//hello world
var res = (function () {
var a = 2;
return function () {
a++;
alert(a);
};
})();
res();//3
闭包实战
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script>
window.onload = function () {
var aBtns = document.getElementsByTagName("button");
for (var i = 0; i < aBtns.length; i++) {
aBtns[i].onclick = (function (index) {
return function () {
alert(index);
};
})(i);
}
};
</script>
</head>
<body>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
</body>
</html>
闭包时需要注意的地方:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
#div1 {
width: 100px;
height: 100px;
background-color: red;
}
</style>
<script>
window.onload = function () {
var oDiv = document.getElementById("div1");
/* 会有内存泄漏,下面提供了解决方法
oDiv.onclick = function () {
console.log(oDiv);
alert(oDiv.id);
}; */
/* var id = oDiv.id;
oDiv.onclick = function () {
alert(id);
};
oDiv = null; */
oDiv.onclick = function () {
alert(oDiv.id);
};
//页面解构的时候支持
window.onload = function () {
oDiv.onclick = null;
oDiv = null;
};
};
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>