定义:声明一个匿名函数,并立即执行这个匿名函数
匿名函数声明
语法:function(){}
立即执行函数写法
(function(){alert("我是立即执行函数");}()); //最前最后加上括号
(function(){alert("我是立即执行函数");})(); //function前后加括号再调用
/*在函数前加运算符,当然这里主要是为了通过语法验证,介绍下这样的方法也可以,常用的有加!和void*/
!function () {alert("我是匿名函数")}()
+function () {alert("我是匿名函数")}()
-function () {alert("我是匿名函数")}()
~function () {alert("我是匿名函数")}()
void function () {alert("我是匿名函数")}()
new function () {alert("我是匿名函数")}()
var result=function(){alert("我是匿名函数");}();//赋值运算符
//当然最安全的函式加括号的形式,因为有些运算符还会和函数的返回值进行运算,有时造成不必要的麻烦。
立即执行函数的参数
可以给立即执行函数传递参数,例如
(function(a,b)
{console.log(a+b);}
(m,n));
//立即执行函数若中需要全局变量,全局变量会可以作为参数传递给立即执行函数
立即执行函数返回值
像其他函数一样,立即执行函数也可以有返回值。除了可以返回基本类型值以外,立即执行函数也能返回任何类型的值,比如对象,函数。
var result=(function(){
var sum=2+3;
return function(){
return sum;
}
})();
cosole.log(result());//5
立即执行函数作用
1. 避免污染全局,首先不必为函数命名,避免污染了全局变量,你定义的所有变量都会成为立即执行函数的局部变量
如上图的代码,这些变量如果写在外面就成了全局变量就会造成全局的污染,所以用立即执行函数之后,这些变量都不会在全局变量中存在,以后也不会其他地方使用,有效的避免了污染全局变量。当然也可以返回一个在全局中需要的变量(使用return来返回)。
2. 立即执行函数内部形成了一个单独的作用域,可以封装一些外部无法读取的私有变量
3. 可以将这些代码封装进一个立即执行函数中,并且确保页面没有它的情况下也能正常工作。
当然还有其他的使用方法,现在就浅谈至此。
立即执行函数函数的一个实际用法
<body>
<ul id="list">
<li>公司简介</li>
<li>联系我们</li>
<li>营销网络</li>
</ul>
<script>
var list = document.getElementById("list");
var li = list.children;
for(var i = 0 ;i<li.length;i++){
li[i].onclick=function(){
alert(i); // 结果总是3.而不是0,1,2
}
}
</script>
</body>
如果按照上述这样写的话,结果永远都是3,因为用户触发点击时,循环已经执行完毕了,所以i已经是3了,i是贯穿整个作用域的,而不是给每一个li分配一个i,点击事件是异步。
这时我们可以使用立即执行函数来解决这个问题
利用立即执行函数,给每个li创建一个独立的作用域,在立即执行函数执行的时候,i的值从0到2,对应三个立即执行函数,这3个立即执行函数里边的j分别是0,1,2所以就能正常输出了,看下边例子:
<body>
<ul id="list">
<li>公司简介</li>
<li>联系我们</li>
<li>营销网络</li>
</ul>
<script>
var list = document.getElementById("list");
var li = list.children;
for(var i = 0 ;i<li.length;i++){
( function(j){
li[j].onclick = function(){
alert(j);
})(i); 把实参i赋值给形参j
}
}
</script>
</body>
关于立即执行函数的理解和用法当然还有很多的,这里只是一个初步的介绍,后续随着不断学习会不断扩充。
这篇文章主要借鉴了简书的一位作者的理解大佬传送门