时间：2021-07-01 10:21:17 帮助过：5人阅读
闭包的含义：闭包说白了就是函数的嵌套，内层的函数可以使用外层函数的所有变量，即使外层函数已经执行完毕（这点涉及JavaScript作用域链）。
示例一
- function checkClosure(){
- var str = 'rain-man';
- setTimeout(
- function(){ alert(str); } //这是一个匿名函数
- , 2000);
- }
- checkClosure();
这个例子看上去十分的简单，仔细分析下它的执行过程还是有许多知识点的：checkClosure函数的执行是瞬间的（也许用时只是0.00001毫秒），在checkClosure的函数体内创建了一个变量str，在checkClosure执行完毕之后str并没有被释放，这是因为setTimeout内的匿名函数存在这对str的引用。待到2秒后函数体内的匿名函数被执行完毕,str才被释放。
示例二，优化代码
- function forTimeout(x, y){
- alert(x + y);
- }
- function delay(x , y , time){
- setTimeout('forTimeout(' + x + ',' + y + ')' , time);
- }
- /**
- * 上面的delay函数十分难以阅读，也不容易编写，但如果使用闭包就可以让代码更加清晰
- * function delay(x , y , time){
- * setTimeout(
- * function(){
- * forTimeout(x , y)
- * }
- * , time);
- * }
- */
匿名函数最大的用途是创建闭包（这是JavaScript语言的特性之一），并且还可以构建命名空间，以减少全局变量的使用。
示例三：
- var oEvent = {};
- (function(){
- var addEvent = function(){ /*代码的实现省略了*/ };
- function removeEvent(){}
- oEvent.addEvent = addEvent;
- oEvent.removeEvent = removeEvent;
- })();
示例四：
- var rainman = (function(x , y){
- return x + y;
- })(2 , 3);
- /**
- * 也可以写成下面的形式，因为第一个括号只是帮助我们阅读，但是不推荐使用下面这种书写格式。
- * var rainman = function(x , y){
- * return x + y;
- * }(2 , 3);
- */
在这里我们创建了一个变量rainman，并通过直接调用匿名函数初始化为5，这种小技巧有时十分实用。
示例五：
- var outer = null;
- (function(){
- var one = 1;
- function inner (){
- one += 1;
- alert(one);
- }
- outer = inner;
- })();
- outer(); //2
- outer(); //3
- outer(); //4
这段代码中的变量one是一个局部变量（因为它被定义在一个函数之内），因此外部是不可以访问的。但是这里我们创建了inner函数，inner函数是可以访问变量one的；又将全局变量outer引用了inner，所以三次调用outer会弹出递增的结果。
注意：闭包允许内层函数引用父函数中的变量，但是该变量是最终值
示例六：
- /**
- * <body>
- * <ul>
- * <li>one</li>
- * <li>two</li>
- * <li>three</li>
- * <li>one</li>
- * </ul>
- */
- var lists = document.getElementsByTagName('li');
- for(var i = 0 , len = lists.length ; i < len ; i++){
- lists[ i ].onmouseover = function(){
- alert(i);
- };
- }
你会发现当鼠标移过每一个<li&rt;元素时，总是弹出4，而不是我们期待的元素下标。这是为什么呢？注意事项里已经讲了（最终值）。显然这种解释过于简单，当mouseover事件调用监听函数时，首先在匿名函数（ function(){ alert(i); }）内部查找是否定义了 i，结果是没有定义；因此它会向上查找，查找结果是已经定义了，并且i的值是4（循环后的i值）；所以，最终每次弹出的都是4。
解决方法一：
- var lists = document.getElementsByTagName('li');
- for(var i = 0 , len = lists.length ; i < len ; i++){
- (function(index){
- lists[ index ].onmouseover = function(){
- alert(index);
- };
- })(i);
- }
解决方法二：
- var lists = document.getElementsByTagName('li');
- for(var i = 0, len = lists.length; i < len; i++){
- lists[ i ].$$index = i; //通过在Dom元素上绑定$$index属性记录下标
- lists[ i ].onmouseover = function(){
- alert(this.$$index);
- };
- }
解决方法三：
- function eventListener(list, index){
- list.onmouseover = function(){
- alert(index);
- };
- }
- var lists = document.getElementsByTagName('li');
- for(var i = 0 , len = lists.length ; i < len ; i++){
- eventListener(lists[ i ] , i);
- }
以上就是详谈JavaScript函数闭包使用及注意事项代码详解的详细内容，更多请关注Gxl网其它相关文章！