<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>闭包</title>
</head>
<body>
<script>
/*
* 什么是闭包？
* 就是函数嵌套函数，内部函数可以访问外部函数的参数和变量，
* 并且外部函数的变量和参数不会被垃圾回收机制所收回
* */
/*var c = (function (a) {
return function () {
a++;
alert(a);
};
})(1);
c(); // 2
c(); // 3*/
/*
* 闭包的好处？
* 1.使得变量长期处于内存
* 2.避免了全局变量的污染
* 3.将变量成员私有化
* */
/*var c = (function () {
var a = 1;
function bbb() {
a++;
alert(a);
}
function ccc() {
a++;
alert(a);
}
return {
bbb : bbb,
ccc : ccc,
}
})();
c.bbb();
c.ccc();*/
/*
* 闭包的用法？
* 1.模块化代码
* 2.在循环中直接找出对应元素的索引
* */
/*
* 引子：
* 不使用闭包的情况下，看看索引
* 你会发现，全部为4，
* 这是因为，for循环完毕了，才进行点击事件
* */
/*window.onload = function () {
var oUl = document.getElementById('ul1');
var aLi = oUl.getElementsByTagName('li');
for ( var i = 0; i < aLi.length; i++ ) {
aLi[i].onclick = function () {
alert(i); // 全部为4
}
}
}*/
/*
* 我们通过闭包来传参，以达到找到对应元素索引
*
* */
/*window.onload = function () {
var oUl = document.getElementById('ul1');
var aLi = oUl.getElementsByTagName('li');
for ( var i = 0; i < aLi.length; i++ ) {
aLi[i].onclick = (function (i) {
return function () {
alert(i);
}
})(i);
}
}*/
/*
* ps : 在IE中，闭包存在内存泄漏问题
* 什么是内存泄漏？
* 就是当你点击别的网页时，之前的变量依然存在内存中，只有关闭浏览器才释放
*
* 什么时候发生内存泄漏？
* 当一个对象（oUl）的属性为函数时，
* 这个函数内部去反向调用这个对象的属性(oUl.id)时，
* 这样会发生内存泄漏
* */
/*window.onload = function () {
var oUl = document.getElementById('ul1');
oUl.onclick = function () {
alert(oUl.id);
}
}*/
/*
* 如何去解决内存泄漏的问题
* 1.当页面卸载时，去掉该对象造成内存泄漏的属性
* 2.将需要调用的属性，提前存入变量，然后调用变量
* */
/*
* 第一种：当页面卸载时，去掉该对象造成内存泄漏的属性
* */
/*window.onload = function () {
var oUl = document.getElementById('ul1');
oUl.onclick = function () {
alert(oUl.id);
}
// 页面卸载
window.unload = function () {
oUl.onclick = null;
}
}*/
/*
* 第二种：将需要调用的属性，提前存入变量，然后调用变量
* */
window.onload = function () {
var oUl = document.getElementById('ul1');
var id = oUl.id;
oUl.onclick = function () {
alert(id);
}
}
</script>
<ul id="ul1">
<li>11111</li>
<li>11111</li>
<li>11111</li>
<li>11111</li>
</ul>
</body>
</html>
网友评论