JS 立即执行的函数表达式(function)写法

最新推荐文章于 2023-08-26 21:15:00 发布

转载最新推荐文章于 2023-08-26 21:15:00 发布 · 527 阅读

JS 专栏收录该内容

2 篇文章

订阅专栏

解释了如何在JavaScript中创建并立即执行函数表达式，提供了两种实现方式，并讨论了它们的区别和优缺点。

1. 前言

函数需要先定义，后使用。这基本上所有编程语言的一条铁的定律。

一般状况下，我们需要调用一个JavaScript 函数, 基本的状况都是先定义，然后再调用。看一个例子

[html]view plaincopy 
   
 <!--by oscar999 2013-1-16-->  
 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
 <html>  
 <head>  
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
 <title>Say Hello</title>  
 </head>  
 <body>  
 <script>  
     //define function  
     function sayHello()  
     {  
         alert("hello");  
     }  
     //call function  
     sayHello();  
 </script>  
 </body>  
 </html>  

但是如果不需要显示调用函数，让这个函数在定义的时候就执行的话，该如何写才可以呢？

[html]view plaincopy 
   
   

2. 思考的历程

从以上的例子来看，聪明的你结合以上的使用状况可能会想：

===》既然调用的时候是在函数名后面加上一对是否在function 定义的后面加上一对大括号是否就可以执行了呢？像以下这样：

[javascript]view plaincopy 
    
 function sayHello()  
 {  
     alert("hello");  
 }();  

不幸的是，以上的写法会报出js 的语法错误。

因为Javascript 的解析器在解析器解析全局的function或者function内部function关键字的时候，默认会把大括号解析成function声明，而不是function表达式。

也就是说，会把最后的一对大括号默认解析成一个缺少名字的function，并且抛出一个语法错误信息，因为function声明需要一个名字。

===》你可能又会想，如果我在大括号中传入参数是否就会解析成表达式了呢？

[javascript]view plaincopy 
    
 function sayHello()  
 {  
     alert("hello");  
 }(1);  

的确，错误是没有了。但是以上的写法等同于以下写法的效果

[javascript]view plaincopy 
    
 function sayHello()  
 {  
     alert("hello");  
 };  
 (1);  

这两句完全没有关系，函数还是不会执行

3. 正确的写法

对于JavaScript 来说，括弧()里面不能包含语句，所以在这一点上，解析器在解析function关键字的时候，会将相应的代码解析成function表达式，而不是function声明

所以，只要将大括号将代码(包括函数部分和在后面加上一对大括号)全部括起来就可以了。

[javascript]view plaincopy 
    
 (function sayHello()  
 {  
     alert("hello");  
 }());  

还有一种写法也可以，就是将后面的大括号移出来， as

[javascript]view plaincopy 
    
 (function sayHello()  
 {  
     alert("hello");  
 })();  

推荐是使用第一种方式。

但是目前很多比较好的js library 使用的都是第二种方式。

比如： web 图形绘制的: git , draw2d ,....

4. 参考

1. http://benalman.com/news/2010/11/immediately-invoked-function-expression/

ps:就是预加载方法(funciton funName(){}())