js匿名自执行函数中闭包的高级使用

Js+JQuery helloweb 次浏览 已收录 评论() 扫描二维码
扫描二维码

先看看最常见的一个问题:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            window.onload = function() {
                var a = document.getElementsByTagName('li');
                for(var i = 0; i < a.length; i++) {
                    (function(i,j,k) {
                        a[i].onclick = function() {
                            console.log(i++,j,k);
                        }
                    })(i,'sb','db')
                }
 
            }
        </script>
    </head>
 
    <body>
        <li>A</li>
        <li>B</li>
        <li>C</li>
        <li>D</li>
        <li>E</li>
    </body>
 
</html>

A 点击6次,E点击1次

1.png

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="js/jquery-3.1.1.js"></script>
        <style type="text/css">
            span{
                color: red;
                margin-left: 25px;
            }
        </style>
        <script type="text/javascript">
            window.onload = function() {
                var json = [{
                    "SB": "A",
                    "url": "https://www.baidu.com/"
                }, {
                    "SB": "B",
                    "url": "http://www.cnblogs.com/"
                }, {
                    "SB": "C",
                    "url": "https://wx.qq.com/"
                }, {
                    "SB": "D",
                    "url": "https://www.ttpod.com/"
                }, ];
 
                for(var i = 0; i < json.length; i++) {
                    var html = $("<li>" + json[i].SB + "</li>");
                    (function(i) {
                        html.click(function() {
                            $(this).append('<span>' + json[i].url + '</span>');
                        })
                    })(i);
                    $("body").append(html);
                }
            }
        </script>
    </head>
 
    <body>
    </body>
</html>

2.png

依次点击上面的A,B,C,D;

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="js/jquery-3.1.1.js"></script>
        <style type="text/css">
            span {
                color: red;
                margin-left: 25px;
            }
             
            .red {
                width: 100px;
                height: 100px;
                background: red;
            }
             
            .green {
                width: 100px;
                height: 100px;
                background: green;
            }
        </style>
        <script type="text/javascript">
            window.onload = function() {
                var json = [{
                    "SB": "A",
                    "url": "https://www.baidu.com/"
                }, {
                    "SB": "B",
                    "url": "http://www.cnblogs.com/"
                }, {
                    "SB": "C",
                    "url": "https://wx.qq.com/"
                }, {
                    "SB": "D",
                    "url": "https://www.ttpod.com/"
                }, ];
 
                for(var i = 0; i < json.length; i++) {
                    var html = $("<li>" + json[i].SB + "</li>");
                    (function(i) {
                        html.click(function() {
                            $(this).append('<span>' + json[i].url + '</span>');
                        })
                    })(i);
                    $("body").append(html);
                }
            }
            $(function() { //这是第一种写法
                (function(i, j, k) {
                    $(".red").click(function() {
                        console.log(i++, j++, k++);
                    })
                })(1, 2, 3)
            });
            $(function() { //这是第二种写法
                $(".green").click((function(i, j, k) {
                    return function() {
                        console.log(i++, j++, k++);
                    }
                })(10, 11, 12));
            });
        </script>
    </head>
 
    <body>
        <div class="red"></div>
        <div class="green"></div>
    </body>
</html>

3.png

红色的点击5次,绿色的点击5次



一、什么是闭包 :

有权访问另一个函数作用域内变量的函数都是闭包。

官方”的解释是:闭包是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分。

相信很少有人能直接看懂这句话,因为他描述的太学术。其实这句话通俗的来说就是:JavaScript中所有的function都是一个闭包。不过一般来说,嵌套的function所产生的闭包更为强大,也是大部分时候我们所谓的“闭包”。看下面这段代码:

function a() { 
 var i = 0; 
 function b() { alert(++i); } 
 return b;
}
var c = a();
c();

这段代码有两个特点:

1、函数b嵌套在函数a内部;

2、函数a返回函数b。

引用关系如图:

1.jpg    


这样在执行完 var c=a() 后,变量c实际上是指向了函数b,再执行c()后就会弹出一个窗口显示i的值(第一次为1)。这段代码其实就创建了一个闭包,为什么?因为函数a外的变量c引用了函数a内的函数b,就是说:

当函数a的内部函数b被函数a外的一个变量引用的时候,就创建了一个闭包。

让我们说的更透彻一些。所谓“闭包”,就是在构造函数体内定义另外的函数作为目标对象的方法函数,而这个对象的方法函数反过来引用外层函数体中的临时变量。这使得只要目标 对象在生存期内始终能保持其方法,就能间接保持原构造函数体当时用到的临时变量值。尽管最开始的构造函数调用已经结束,临时变量的名称也都消失了,但在目 标对象的方法内却始终能引用到该变量的值,而且该值只能通这种方法来访问。即使再次调用相同的构造函数,但只会生成新对象和方法,新的临时变量只是对应新 的值,和上次那次调用的是各自独立的。

先看一道闭包的题:

<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<style type="text/css">
    .red {
        width: 100px;
        height: 100px;
        background: red;
    }
     
    .green {
        width: 100px;
        height: 100px;
        background: green;
    }
</style>
<script type="text/javascript">
    $(function() {       //闭包的常规用法
        var i = 0;
        function main() {
            return function() {
                console.log("我是:" + i++);
            }
        }
        var sbs = main();
        sbs();
        sbs();
        sbs();
        sbs();
    });

    $(function() {
        $(".red").click((function(a, b, c) {
            return function() {
                console.log(a++, b++, c++);
            }
        })(1, 2, 3));
    });

    $(function() {
        var haha = (function(a, b, c) {
            return function() {
                console.log(a++, b++, c++);
            }
        })(100, 200, 300)
        $(".green").click(haha);

    })
</script>
</head>

<body>
    <div></div>
    <div></div>
</body>
</html>

页面渲染:

794224-20161014220328218-981601799.png

猜一猜:

点击红色的输出什么?

$(function() {
    $(".red").click((function(a, b, c) {
        return function() {
            console.log(a++, b++, c++);
    	}
    })(1, 2, 3));
});

上面的代码等价于:

$(function() {
	(function(i, j, k) {
		$(".red").click(function() {
		  console.log(i++,j++,k++);
		})
	})(1, 2, 3)
})

点击绿色的输出什么?

红色的点三下,绿色的点三下,重复两次:

答案:

4.png

<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<style type="text/css">
.red {
    width: 100px;
    height: 100px;
    background: red;
} 
.green {
    width: 100px;
    height: 100px;
    background: green;
}
</style>
<script type="text/javascript">
$(function() { //闭包的常规用法
var i = 0;

function main() {
return function() {
console.log("我是:" + i++);
}
}
var sbs = main();  
sbs();   //0
sbs();   //1
sbs();   //2
sbs();   //3
});
$(function() {
var sb = (function(i, j) {
return i + j;
})(2, 3);
console.log("sb:" + sb);    //5
})
$(function() {
$(".red").click((function(a, b, c) {
return function() {
console.log(a++, b++, c++);
}
})(1, 2, 3));
});
//上面的原理
$(function() {
var haha = (function(a, b, c) {
return function() {
console.log(a++, b++, c++);
}
})(100, 200, 300)
$(".green").click(haha);

});
 
//上面的为啥会闭包:一般匿名自执行函数里面return函数就是闭包
//回调函数就是匿名自执行,里面return 就是闭包
$(function() {
var main = function() {
console.log('sb');   //sb,sb,sb,sb....
}
var set = setInterval(main, 1000)
})
</script>
</head>

<body>
<div></div>
<div></div>
</body>
</html>

 Javascript的匿名函数与自执行

函数是JavaScript中最灵活的一种对象,这里只是讲解其匿名函数的用途。匿名函数:就是没有函数名的函数。

函数的定义,大致可分为三种方式:

第一种:这也是最常规的一种

function double(x){    
    return 2 * x;       
}

第二种:这种方法使用了Function构造函数,把参数列表和函数体都作为字符串,很不方便,不建议使用。

var double = new Function('x', 'return 2 * x;');

第三种

var double = function(x) { return 2* x; }

注意“=”右边的函数就是一个匿名函数,创造完毕函数后,又将该函数赋给了变量square。

匿名函数的创建

第一种方式:就是上面所讲的定义square函数,这也是最常用的方式之一。

第二种方式:

(function(x, y){  
    alert(x + y);    
})(2, 3);

这里创建了一个匿名函数(在第一个括号内),第二个括号用于调用该匿名函数,并传入参数。括号是表达式,是表达式就有返回值,所以可以在后面加一对括号让它们执行.

自执行的匿名函数

问:什么是自执行的匿名函数?

答:它是指形如这样的函数: (function {// code})();



疑问:为什么(function {// code})();可以被执行, 而function {// code}();却会报错?

分析:

    1、首先, 要清楚两者的区别:
    (function {// code})是表达式, function {// code}是函数声明.
    2、其次, js"预编译"的特点:
    js在"预编译"阶段, 会解释函数声明, 但却会忽略表式.
    3、当js执行到function() {//code}();时, 由于function() {//code}在"预编译"阶段已经被解释过,js会跳过function(){//code}, 试图去执行();, 故会报错;
    当js执行到(function {// code})();时, 由于(function {// code})是表达式, js会去对它求解得到返回值, 由于返回值是一 个函数, 故而遇到();时, 便会被执行.

   另外, 函数转换为表达式的方法并不一定要靠分组操作符(),我们还可以用void操作符,~操作符,!操作符……

如:

!function(){  
  alert("另类的匿名函数自执行");  
}();

匿名函数与闭包

闭包的英文单词是closure,这是JavaScript中非常重要的一部分知识,因为使用闭包可以大大减少我们的代码量,使我们的代码看上去更加清晰等等,总之功能十分强大。

闭包的含义:闭包说白了就是函数的嵌套,内层的函数可以使用外层函数的所有变量,即使外层函数已经执行完毕(这点涉及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;  
})();

在这段代码中函数addEvent和removeEvent都是局部变量,但我们可以通过全局变量oEvent使用它,这就大大减少了全局变量的使用,增强了网页的安全性。 我们要想使用此段代码:oEvent.addEvent(document.getElementById('box') , 'click' , function(){});

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会弹出递增的结果。

注意

1 闭包允许内层函数引用父函数中的变量,但是该变量是最终值

/**  
 * <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>元素时,总是弹出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);  
}

2 内存泄露

使用闭包十分容易造成浏览器的内存泄露,严重情况下会是浏览器挂死.

闭包-无处不在 

在前端编程中,使用闭包是非常常见的,我们经常有意无意,直接或间接用到了闭包。闭包可以使传递数据更加灵活(比如处理一些点击事件)

!function() {      
  var localData = "localData here";    
     document.addEventListener('click',    //处理点击事件时用到了外部局部变量,比如这里的localData       
        function(){              
           console.log(localData); 
    }); 
}();

又比如下面这个例子:(是不是很亲切~~)

!function() {      
  var localData = "localData here";      
  var url = "http://www.baidu.com/";      
  $.ajax({ 
     url : url,          
     success : function() {              
        // do sth...              
        console.log(localData); 
        } 
    }); 
}();

再来看一个例子~~这种情况就是我们通常所说的闭包

function outer() {   
  var localVal = 30;    
  return function(){      
    return localVal;    
  } 
} 
var func = outer();  
func(); // 30

这个例子中调用outer()返回匿名函数function(),这个匿名函数中可以访问outer()的局部变量localVal,在outer()调用结束后,再次调用func()的时候,仍然能访问到outer()的局部变量localVal

闭包的概念

闭包,不同于一般的函数,它允许一个函数在立即词法作用域外调用时,仍可访问非本地变量。 --维基百科 

闭包就是能够读取其他函数内部变量的函数。 --阮一峰

由于在Javascript语言中,只有函数内部的子函数才能读取局部变量,因此可以把闭包简单理解成"定义在一个函数内部的函数"。

所以,在本质上,闭包就是将函数内部和函数外部连接起来的一座桥梁

闭包的用途

这部分转自这篇博文

闭包可以用在许多地方。它的最大用处有两个,一个是前面提到的可以读取函数内部的变量,另一个就是让这些变量的值始终保持在内存中。

function f1(){
    var n=999;
    nAdd=function(){n+=1}
    function f2(){
      alert(n);
    }
    return f2;
  }
  var result=f1();
  result(); // 999
  nAdd();
  result(); // 1000

在这段代码中,result实际上就是闭包f2函数。它一共运行了两次,第一次的值是999,第二次的值是1000。这证明了,函数f1中的局部变量n一直保存在内存中,并没有在f1调用后被自动清除。

为什么会这样呢?原因就在于f1是f2的父函数,而f2被赋给了一个全局变量,这导致f2始终在内存中,而f2的存在依赖于f1,因此f1也始终在内存中,不会在调用结束后,被垃圾回收机制(garbage collection)回收。

这段代码中另一个值得注意的地方,就是"nAdd=function(){n+=1}"这一行,首先在nAdd前面没有使用var关键字,因此nAdd是一个全局变量,而不是局部变量。其次,nAdd的值是一个匿名函数(anonymous function),而这个匿名函数本身也是一个闭包,所以nAdd相当于是一个setter,可以在函数外部对函数内部的局部变量进行操作。

闭包-封装 

(function() {   
   var _userId = 23492;   
   var _typeId = 'item';    
   var export = {}; 
    
   function converter(userId) {          
     return +userId; 
   } 
    export.getUserId = function() {         
       return converter(_userId);     
   } 
   export.getTypeId = function() {          
      return _typeId; 
   }         
   window.export = export;   //通过此方式输出
}());

  export.getUserId(); // 23492 
  export.getTypeId();  // item 
  export._userId;    // undefined  
  export._typeId;    // undefined       
  export.converter; // undefined

利用闭包的特性能让我们封装一些复杂的函数逻辑,在这个例子中调用export上的方法(getUserId,getTypeId)间接访问函数里私有变量,但是直接调用export._userId是没法拿到_userId的。这也是Node里面常用到特性吧~

常见错误之循环闭包 

下面这个案例,我们添加3个div,值分别为aaa,bbb,ccc,我们想实现的是点击aaa输出1,点击bbb输出2,点击ccc输出3

document.body.innerHTML = "<div id=div1>aaa</div>" + "<div id=div2>bbb</div><div id=div3>ccc</div>";  
for (var i = 1; i < 4; i++) {      
  document.getElementById('div' + i).         
    addEventListener('click', function() {         
    alert(i); // all are 4! 
    });  
}

640.png

结果点击aaa,bbb还是ccc都是alert(4)~~

产生这样的问题在于这个i的值在初始化完成的时候就已经是4了

要达到我们想要的点击aaa输出1,点击bbb输出2,点击ccc输出3,要用到闭包的技巧,在每次循环的时候,用立即执行的匿名函数把它包装起来,这样子做的话,每次alert(i)的值就取自闭包环境中的i,这个i来自每次循环的赋值i就能输出1,2,3了

document.body.innerHTML = "<div id=div1>aaa</div>" + "<div id=div2>bbb</div>" + "<div id=div3>ccc</div>";  
for (var i = 1; i < 4; i++) {
  !function(i){ //②再用这个参数i,到getElementById()中引用     
    document.getElementById('div' + i).       
      addEventListener('click', function() {         
      alert(i); // 1,2,3
     });  
  }(i);  //①把遍历的1,2,3的值传到匿名函数里面
}

640.png

思考题

如果你能理解下面两段代码的运行结果,应该就算理解闭包的运行机制了。(来自阮老师)这题目总结得真秒~~

代码片段一。

var name = "The Window";
  var object = {
    name : "My Object",
    getNameFunc : function(){
      return function(){
        return this.name;
      };
    }
  };
  alert(object.getNameFunc()());    //The Window

代码片段二。

var name = "The Window";
  var object = {
    name : "My Object",
    getNameFunc : function(){
      var that = this;
      return function(){
        return that.name;
      };
    }
  };
  alert(object.getNameFunc()());    //My Object


原文链接

原文链接:HelloWeb前端网 » js匿名自执行函数中闭包的高级使用 » 感谢您的浏览,希望能有所帮助。

欢迎您加入“Helloweb” 学习交流群:HelloWeb-学习交流群 196291215 共同交流并结识同行,在这里说出您的收获与感想或有什么不同的观点,我们期待您的留言,分享,让我们一起进步!

喜欢 ()or分享