时生闭包的学习

2024-04-11 01:32

文章标签 学习闭包时生

本文主要是介绍时生闭包的学习，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>时生闭包的学习,教程来自妙味课堂</title>
<script>
//-------------------------------------------------------------------------------------------
//1.什么是闭包
//函数嵌套函数，内部函数可以引用外部函数的参数和变量，变量和参数不会被垃圾回收机制所收回
/*
function aaa(a){var b = 5;function bbb(){console.log(a); //a,b可以访问到，并不会被垃圾回收机制回收console.log(b);    }
}
aaa();
*//*JS中的垃圾回收机制
function aaa(){var a = 1;       
}
这个函数执行完，这个变量a就会被回收机制回收了。*///测试
/*
function aaa(){var a = 5;function bbb(){console.log(a);}return bbb;
}
var c = aaa();
c();//c = bbb();  弹出5
*///-------------------------------------------------------------------------------------------
/*
2.闭包的好处
1)希望一个变量长期驻扎在内存中
2)避免全局变量的污染
3)私有成员的存在
*/
//用法1.模块化代码
//用法2.在循环中直接找到对应元素的索引
/*var a = 1;
function aaa(){a++;alert(a);
}
aaa();    //2
aaa();    //3
alert(a);//在函数外可以调用。*//*function aaa(){var a = 1;    //局部变量a++;alert(a);
}aaa();    //2
aaa();    //2        每次都重新执行了
*//*function aaa(){var a = 1;    return function(){a++;alert(a);    }
}
var c = aaa();
c();    //2
c();    //3*/
//alert(a);    //a is not defined//用法1.模块化代码
/*
(function(){})  //函数表达式
(function(){})() //调用*//*
var aaa = (function(){var a = 1;return function(){a++;alert(a);}    
})()//模块化代码，避免全局变量的污染aaa();     
aaa();*//*
var aaa =(function(){var a= 1;    //私有属性function bbb(){    //私有方法a++;alert(a);}function ccc(){a++;alert(a);}return {b:bbb,c:ccc}
})()
aaa.b();    //2
aaa.c();    //3
alert(a);    //没有找到 is not defined
alert(bbb);    //没有找到 is not defined
alert(ccc);    //没有找到 is not defined
*///用法2.在循环中直接找到对应元素的索引
window.onload = function(){var _li = document.getElementsByTagName("li");/*for(var i = 0 ; i < _li.length ; i++){//循环执行结束制还没执行onclick_li[i].onclick = function(){alert(i);        //点击都为3}}*///写法一/*for(var i = 0 ; i < _li.length ; i++){(function(i){//利用闭包将i作为参数传进来_li[i].onclick = function(){alert(i);    // 0,1,2}})(i)}*///写法二/*for(var i = 0 ; i < _li.length ; i++){_li[i].onclick = (function(i){return function(){alert(i);    // 0,1,2}})(i)}*/
//--------------------------------------------------------------------------------
//3.使用闭包需要注意什么？
//闭包在IE下容易引发内存泄漏
//内存泄漏会导致页面跳转时变量还没释放导致CPU一直增加，只有关闭浏览器才会释放。
//引发原因
//当一个变量(oDiv)是DOM节点或数组对象的时候,他的一个属性(oDiv.onclick)去引用一个内部函数，而内部函数里的变量又去引用外部的(oDiv.id)var oDiv = document.getElementById('div1');oDiv.onclick = function(){alert(oDiv.id);    };//解决方法1. 变量属性为NULL;
    window.onunload = function(){oDiv.onclick = null;    }//解决方法2.将对象为NULL；var oDiv = document.getElementById('div1');var id = oDiv.id;oDiv.onclick = function(){alert(id);    };oDiv = null;
}</script>
</head>
<body>
<ul id="myul">
<li>11111</li>
<li>22222</li>
<li>33333</li>
</ul><div id="div1">aaaa</div>
</body>
</html>