打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

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

1. 前言

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

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

  1. <!--by oscar999 2013-1-16-->  
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  3. <html>  
  4. <head>  
  5. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
  6. <title>Say Hello</title>  
  7. </head>  
  8. <body>  
  9. <script>  
  10.     //define function  
  11.     function sayHello()  
  12.     {  
  13.         alert("hello");  
  14.     }  
  15.     //call function  
  16.     sayHello();  
  17. </script>  
  18. </body>  
  19. </html>  

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

  1.   

2. 思考的历程

从以上的例子来看,聪明的你结合以上的使用状况可能会想:
===》既然调用的时候是在函数名后面加上一对 是否在function 定义的后面加上一对大括号是否就可以执行了呢? 像以下这样:
[javascript] view plaincopy
  1. function sayHello()  
  2. {  
  3.     alert("hello");  
  4. }();  

不幸的是,以上的写法会报出js 的语法错误。
因为Javascript 的解析器在解析器解析全局的function或者function内部function关键字的时候, 默认会把大括号解析成function声明,而不是function表达式。
也就是说, 会把最后的一对大括号默认解析成一个缺少名字的function,并且抛出一个语法错误信息,因为function声明需要一个名字。

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

[javascript] view plaincopy
  1. function sayHello()  
  2. {  
  3.     alert("hello");  
  4. }(1);  
的确, 错误是没有了。 但是以上的写法等同于以下写法的效果
[javascript] view plaincopy
  1. function sayHello()  
  2. {  
  3.     alert("hello");  
  4. };  
  5. (1);  
这两句完全没有关系, 函数还是不会执行


3. 正确的写法


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

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

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

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

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

推荐是使用第一种方式。

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

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


 4. 参考


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

1
0
本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
js中(function(){}()),(function(){})(),$(function(){});之间的区别
[从jQuery看JavaScript]-匿名函数与闭包(Anonymous Function and Closure)
深入理解JavaScript函数及其模式(一)
深入理解javascript中的立即执行函数(function(){…})()
Jquery与Prototype混合用法对比
JavaScript(js)函数声明与函数表达式的区别
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服