分享两个立即执行表达式和闭包的用法

通常的立即执行表达式有两种

(function(){/* code */}());//括号内的表达式代表函数立即调用表达式
(function(){/* code */})(); //括号内的表达式表示函数表达式

这两种模式都可以被用来立即调用一个函数表达式，利用函数的执行来创造私有变量

我们来看一个闭包的应用

<a href="#">点击我弹出1</a>
<a href="#">点击我弹出2</a>
<a href="#">点击我弹出3</a>
<a href="#">点击我弹出4</a>
<a href="#">点击我弹出5</a>

var eles = document.getElementsByTagName('a');
for(var i = 0;i < eles.length; i++ ) {
    eles[i].addEventListener('click',function(e){
        e.preventDefault();
        alert('我是' + i)
        },false);
}

在这种情况下我们点击执行函数，循环早已结束，所以弹出的i值始终是5。并不是我们希望的效果。

当把函数改变一下

var eles = document.getElementsByTagName('a');
for(var i = 0;i < eles.length; i++ ) {
	(function(Uindex){
		eles[i].addEventListener('click',function(e){
        e.preventDefault();
        alert('我是' + `${Uindex+1}`)
        },false);
	})(i)
}

可以使用立即执行函数包裹功能函数，保存闭包的状态，这样点击执行函数虽然循环早已结束，但是i值已经被保存。所以能得到我们希望的结果。

var eles = document.getElementsByTagName('a');
for(var i = 0;i < eles.length; i++ ) {
		eles[i].addEventListener('click',(function(Uindex){
			return function(e){
				e.preventDefault();
        		alert('我是' + `${Uindex+1}`)
			}
        })(i),false);
}

这个写个效果也是一样。

立即执行函数一个最显著的优势是就算它没有命名或者说是匿名，函数表达式也可以在没有使用标识符的情况下被立即调用，一个闭包也可以在没有当前变量污染的情况下被使用。