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

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

<!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次

  

<!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>

  

依次点击上面的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>

  

 红色的点击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。

引用关系如图:

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

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

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

 

先看一道闭包的题:

<!doctype html>
<html lang="en">

	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<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 class="red"></div>
		<div class="green"></div>
	</body>

</html>

  页面渲染:

  猜一猜:

点击红色的输出什么?

		$(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)
			})

  

点击绿色的输出什么?

 

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

答案:

 

 

<!doctype html>
<html lang="en">

	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<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 class="red"></div>
		<div class="green"></div>
	</body>

</html>

  

 

Javascript的匿名函数与自执行

 

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

 

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

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

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

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

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

第三种:

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

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

 

 

匿名函数的创建

 

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

第二种方式:

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

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

 

 

自执行的匿名函数

 

    1. 什么是自执行的匿名函数?
    它是指形如这样的函数: (function {// code})();

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

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

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

如:

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

 

 

匿名函数与闭包

 

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

闭包的含义:闭包说白了就是函数的嵌套,内层的函数可以使用外层函数的所有变量,即使外层函数已经执行完毕(这点涉及JavaScript作用域链)。

1
2
3
4
5
6
7
function checkClosure(){ 
    var str = 'rain-man'
    setTimeout( 
        function(){ alert(str); } //这是一个匿名函数 
    , 2000); 
checkClosure();

这个例子看上去十分的简单,仔细分析下它的执行过程还是有许多知识点的:checkClosure函数的执行是瞬间的(也许用时只是0.00001毫秒),在checkClosure的函数体内创建了一个变量str,在checkClosure执行完毕之后str并没有被释放,这是因为setTimeout内的匿名函数存在这对str的引用。待到2秒后函数体内的匿名函数被执行完毕,str才被释放。

 

用闭包来优化代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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语言的特性之一),并且还可以构建命名空间,以减少全局变量的使用。

 

1
2
3
4
5
6
7
8
var oEvent = {}; 
(function(){  
    var addEvent = function(){ /*代码的实现省略了*/ }; 
    function removeEvent(){} 
     
    oEvent.addEvent = addEvent; 
    oEvent.removeEvent = removeEvent; 
})();

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

 

1
2
3
4
5
6
7
8
var rainman = (function(x , y){ 
    return x + y; 
})(2 , 3); 
/** 
 * 也可以写成下面的形式,因为第一个括号只是帮助我们阅读,但是不推荐使用下面这种书写格式。 
 * var rainman = function(x , y){ 
 *    return x + y; 
 * }(2 , 3);

在这里我们创建了一个变量rainman,并通过直接调用匿名函数初始化为5,这种小技巧有时十分实用。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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 闭包允许内层函数引用父函数中的变量,但是该变量是最终值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/** 
 * <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。

解决方法一:

1
2
3
4
5
6
7
8
var lists = document.getElementsByTagName('li'); 
for(var i = 0 , len = lists.length ; i < len ; i++){ 
    (function(index){ 
        lists[ index ].onmouseover = function(){ 
            alert(index);     
        };                     
    })(i); 
}

解决方法二:

1
2
3
4
5
6
7
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);     
    }; 
}

解决方法三:

1
2
3
4
5
6
7
8
9
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! 
    });  
}

结果点击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的值传到匿名函数里面
} 

思考题

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

代码片段一。

  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
posted @ 2016-10-14 22:06  最骚的就是你  阅读(6486)  评论(1编辑  收藏