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

1. 前言

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

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

[html] view plaincopy

  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>

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

[html] view plaincopy

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/

时间: 2024-08-05 07:07:18

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

笔记:IIFE 立即执行的函数表达式 +function ($) { }(window.jQuery);

在Bootstrap源码(具体请看<Bootstrap源码解析1>)和其他jQuery插件经常看到如下的写法: +function ($) { }(window.jQuery); 这种写法称为:IIFE 2(Imdiately InvokedFunction Expression 立即执行的函数表达式). 解析: 先弄清函数表达式(function expression)3和 函数声明(function declaration)的区别: 函数表达式  var test = function()

[javascript]IIFE立即执行的函数表达式

近况:最近一直忙着找实习没有更新,不过学习还是在继续的.最近在写Node.js又稍带把javascript的角落知识捡了一遍,过半个月打算去看看python和一些CSS深层的书和博客.工作找的还好,拿了两份实习offer,决定好去当小二了.这几天在看司徒老师的<javascript框架设计>,开篇第一张讲种子模块(即核心模块)里面提到了一个没见过的缩写词IIFE,查了查.看了看. 1.什么是IIFE IIFE是缩写,全拼Imdiately Invoked Function Expression

JS学习笔记3_函数表达式

1.函数表达式与函数声明的区别 函数声明有“提升”(hoisting)的特性,而函数表达式没有.也就是说,函数声明会在加载代码时被预先加载到context中,而函数表达式只有在执行表达式语句时才会被加载 2.闭包 有权访问另一个函数作用域中的变量的函数.闭包可以访问另一个作用域中的变量,因此闭包得到的变量值是最终值,而不是该变量在某一时刻的值,有一个很经典的例子: function createFuns(){ var result = new Array(); for(var i = 0;i <

IIFE(Imdiately Invoked Function Expression 立即执行的函数表达式)

+function($){}(jQuery); 今天看到js代码里面有这个格式的代码,不知道啥意思,就去查了一下,我也是js小白.首先前面的+号,这个不是固定非要写+号,只要写一级运算符都可以.目的是为了引导解析器,指明运算符附近是一个表达式.+function($){}就是一个函数表达式,(jQuery)就是调用这个函数表达式并且jQuery是参数.(传参,为了避免$与其他库或者模板申明冲突,jQuery 作为参数传递). (function($){})(jQuery)  这种写法跟上面的那种

Javascript---Immediately-Invoked Function Expression (IIFE)立即执行的函数表达式

1.一下是几种形式的函数调用: 各种调用的效率:在这编文章中有谈到: http://suqing.iteye.com/blog/1981591 // Either of the following two patterns can be used to immediately invoke // a function expression, utilizing the function's execution context to // create "privacy." (funct

JavaScript:立即执行的函数表达式

先要理解清楚几个概念: 以下转自:http://www.cnblogs.com/TomXu/archive/2011/12/31/2289423.html 问题的核心 当你声明类似function foo(){}或var foo = function(){}函数的时候,通过在后面加个括弧就可以实现自执行,例如foo(),看代码: // 因为想下面第一个声明的function可以在后面加一个括弧()就可以自己执行了,比如foo(),// 因为foo仅仅是function() { /* code *

javascript立即执行的函数表达式

函数表达式和立即执行函数的区别 http://www.cnblogs.com/TomXu/archive/2011/12/31/2289423.html http://benalman.com/news/2010/11/immediately-invoked-function-expression/

js 自执行匿名函数(转载)

自执行匿名函数: 常见格式:(function() { /* code */ })(); 解释:包围函数(function(){})的第一对括号向脚本返回未命名的函数,随后一对空括号立即执行返回的未命名函数,括号内为匿名函数的参数. 作用:可以用它创建命名空间,只要把自己所有的代码都写在这个特殊的函数包装内,那么外部就不能访问,除非你允许(变量前加上window,这样该函数或变量就成为全局).各JavaScript库的代码也基本是这种组织形式. 总结一下,执行函数的作用主要为 匿名 和 自动执行

js自执行函数表达式

// 下面2个括弧()都会立即执行 (function () { /* code */ } ()); // 推荐使用这个(function () { /* code */ })(); // 但是这个也是可以用的 和普通function执行的时候传参数一样,自执行的函数表达式也可以这么传参,因为闭包直接可以引用传入的这些参数,利用这些被lock住的传入参数,自执行函数表达式可以有效地保存状态. // 这个代码是错误的,因为变量i从来就没背locked住// 相反,当循环执行以后,我们在点击的时候i