您的位置：首页 > Web前端 > JavaScript

js 闭包 匿名函数 JavaScript的IIFE（即时执行方法）immediately-invoked function expression

2015-12-03 17:05 666 查看
参考：http://segmentfault.com/a/1190000000348228
http://segmentfault.com/q/1010000000442042
问题：

(function(){
functiona(){
alert("a");
}
})();
这里的(function(){xxx})();是什么意思，为什么这么写，有什么好处？
答：

functionfoo(){...}//这是定义，Declaration；定义只是让解释器知道其存在，但是不会运行。

foo();//这是语句，Statement；解释器遇到语句是会运行它的。
（1）标准写法


Js代码


(function(window,document,undefined){

//

})(window,document);

（2）作用域Scope
JavaScript有function作用域，所以function首先创建一个私有的作用域，在执行的时候都会创建一个执行上下文。


Js代码


(function(window,document,undefined){

varname='张三';

})(window,document);

console.log(name);//因为作用域不同，这里的name未定义。

调用方法一：


Js代码


varlogMyName=function(name){

console.log(name);

};

logMyName('李四');

调用方法二：


Js代码


varlogMyName=(function(name){

console.log(name);

})('王五');

需要注意的是需要用括号把函数内容括起来：


Js代码


function(){

//...

})();

没有括号的话会报语法错：


Js代码


function(){

//...

}();

也可以强制JavaScript识别代码（一般很少这么用）：


Js代码


!function(){

//...

}();

+function(){

//...

}();

-function(){

//...

}();

~function(){

//...

}();

比如：


Js代码


vara=!function(){

returntrue;

}();

console.log(a);//打印输出false

varb=(function(){

returntrue;

})();

console.log(b);//打印输出true

（3）参数Arguments

传递参数给IIFE


Js代码


(function(window){

//这里可以调用到window

})(window);

(function(window,document){

//这里可以调用到window和document

})(window,document);

undefined参数
在ECMAScript3中undefined是mutable的，这意味着可以给undefined赋值，而在ECMASCript5的strict模式（'usestrict';）下是不可以的，解析式时会报语法错。

所以为了保护IIFE的变量需要undefined参数：


Js代码


(function(window,document,undefined){

//...

})(window,document);

即使有人给undefined赋值也没有关系：


Js代码


undefined=true;

(function(window,document,undefined){

//undefined指向的还是一个本地的undefined变量

})(window,document);

（4）代码压缩Minifying


Js代码


(function(window,document,undefined){

console.log(window);//window对象

})(window,document);

代码压缩后，undefined的参数不再存在，但是由于(window,document);的调用没有传递第三个参数，所有c依然是一个本地undefined变量，所有参数中undefined的名字是无所谓什么的，只需要知道他指向的是一个undefined变量。


Js代码


(function(a,b,c){

console.log(a);//window对象

})(window,document);

除undefined变量外，其他的所有希望只在函数内部有效的变量都可以通过参数传递进去，比如以下的jQuery对象。


Js代码


(function($,window,document,undefined){

//使用$指向jQuery，比如：

//$(document).addClass('test');

})(jQuery,window,document);

(function(a,b,c,d){

//代码会被压缩为：

//a(c).addClass('test');

})(jQuery,window,document);


(function(){})这样就是一个表达式

(function(){
varr,url;
vars=location.href;
url=/http:\/\/www.csdn.com.cn/i;
if(s.search(url)>=0){
varhead=document.getElementById("topHead");
head.style.width="990px";
}
})
声明了一个匿名函数
加个()执行它

就是不需要方法名,直接创建以后调用
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航