js 在定义的时候立即执行的函数表达式(function)写法

1.前言
函数需要先定义，后使用。 这基本上所有编程语言的一条铁的定律。
一般状况下， 我们需要调用一个JavaScript 函数, 基本的状况都是先定义， 然后再调用。 看一个例子


代码如下:

<!--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>

但是如果不需要显示调用函数， 让这个函数在定义的时候就执行的话， 该如何写才可以呢？
2.思考的历程
从以上的例子来看，聪明的你结合以上的使用状况可能会想：
===》既然调用的时候是在函数名后面加上一对 是否在function 定义的后面加上一对大括号是否就可以执行了呢？ 像以下这样：


代码如下:

function sayHello()
{
alert("hello");
}();

不幸的是，以上的写法会报出js 的语法错误。
因为Javascript 的解析器在解析器解析全局的function或者function内部function关键字的时候， 默认会把大括号解析成function声明，而不是function表达式。

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

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


代码如下:

function sayHello()
{
alert("hello");
}(1);

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


代码如下:

function sayHello()
{
alert("hello");
};
(1);

这两句完全没有关系， 函数还是不会执行
3.正确的写法
对于JavaScript 来说，括弧()里面不能包含语句，所以在这一点上，解析器在解析function关键字的时候，会将相应的代码解析成function表达式，而不是function声明所以，只要将大括号将代码(包括函数部分和在后面加上一对大括号)全部括起来就可以了。


代码如下:

(function sayHello()
{
alert("hello");
}());

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


代码如下:

(function sayHello()
{
alert("hello");
})();

推荐是使用第一种方式。
但是目前很多比较好的js library 使用的都是第二种方式。
比如： web 图形绘制的: git , draw2d ,....

赞 (0)

相关推荐

  • JavaScript中的立即执行函数表达式介绍

    我们习惯看到这样的匿名函数 复制代码 代码如下: (function(){     console.log("test"); })(); 之前一直叫的是自执行的匿名函数(self-executing anonymous function) 发现原来还有一种叫法是: 立即调用函数表达式 (IIFE,Immediately-Invoked Function Expression) 立即调用函数表达式 相比于自执行匿名函数,立即调用函数表达式的意思来得更明确一些. 自执行函数有下面的这一些例

  • js立即执行函数: (function ( ){})( ) 与 (function ( ){}( )) 有什么区别?

    没有区别. 你需要明白 IIFE 的原理,我简单说一下: 复制代码 代码如下: function foo() {...}     // 这是定义,Declaration:定义只是让解释器知道其存在,但是不会运行. foo();                   // 这是语句,Statement:解释器遇到语句是会运行它的. IIFE 并非必须,传统一点可以这么写: 复制代码 代码如下: function foo() {...} foo(); 那么为什么要 IIFE? 1.传统的方法啰嗦,定义

  • 深入理解javascript中的立即执行函数(function(){…})()

    javascript和其他编程语言相比比较随意,所以javascript代码中充满各种奇葩的写法,有时雾里看花,当然,能理解各型各色的写法也是对javascript语言特性更进一步的深入理解. ( function(){-} )()和( function (){-} () )是两种javascript立即执行函数的常见写法,最初我以为是一个括号包裹匿名函数,再在后面加个括号调用函数,最后达到函数定义后立即执行的目的,后来发现加括号的原因并非如此.要理解立即执行函数,需要先理解一些函数的基本概念.

  • 详解javascript立即执行函数表达式IIFE

    详解javascript立即执行函数表达式IIFE

    一.IIFE解释 全拼Imdiately Invoked Function Expression,立即执行的函数表达式. 像如下的代码所示,就是一个匿名立即执行函数: (function(window, undefined){ // 代码... })(window); 二.括号的意义 2.1 包住function(){}的括号的意义 这个括号的目的,是为了把function(){}转化为表达式.像一些库的源码,喜欢用如下方式代替: ~function(){ // 代码... }(); 或者这种方

  • 详解JS中的立即执行函数

    1.匿名函数不能单独定义,必须进行赋值操作或者立即执行,否则会被JS引擎定义为语法错误 function(){alert(dada);} VM229:1 Uncaught SyntaxError: Unexpected token 2.在函数体后面加括号就能立即调用,这个函数形式必须是函数表达式,不能是函数声明 function(){alert(123);}(); VM265:1 Uncaught SyntaxError: Unexpected token 3.可以在函数前面加符号,或者用括号将

  • JavaScript立即执行函数的三种不同写法

    第一种: (function () { // open IIFE // inside IIFE }()); // close IIFE 第二种: !function () { // open IIFE // inside IIFE }(); // close IIFE 第三种: void function () { // open IIFE // inside IIFE }(); // close IIFE

  • 深入解析JavaScript中的立即执行函数

    它是什么 在 JavaScript 里,每个函数,当被调用时,都会创建一个新的执行上下文.因为在函数里定义的变量和函数是唯一在内部被访问的变量,而不是在外部被访问的变量,当调用函数时,函数提供的上下文提供了一个非常简单的方法创建私有变量. function makeCounter() { var i = 0; return function(){ console.log(++i); }; } //记住:`counter`和`counter2`都有他们自己的变量 `i` var counter =

  • 深入浅析javascript立即执行函数

    javascript和其他编程语言相比比较随意,所以javascript代码中充满各种奇葩的写法,有时雾里看花; 当然,能理解各型各色的写法也是对javascript语言特性更进一步的深入理解.  JavaScript 函数语法 函数就是包裹在花括号中的代码块,前面使用了关键词 function: function functionname() { 这里是要执行的代码 } 当调用该函数时,会执行函数内的代码. 可以在某事件发生时直接调用函数(比如当用户点击按钮时),并且可由 JavaScript

  • JavaScript中立即执行函数实例详解

    前言 js立即执行函数可以让你的函数在创建后立即执行,js立即执行函数模式是一种语法,可以让你的函数在定义后立即被执行,这种模式本质上就是函数表达式(命名的或者匿名的),在创建后立即执行. ( function(){-} )()和( function (){-} () )是两种javascript立即执行函数的常见写法,最初我以为是一个括号包裹匿名函数,再在后面加个括号调用函数,最后达到函数定义后立即执行的目的,后来发现加括号的原因并非如此. 下面话不多说了,来一起看看详细的介绍吧. 通常我们声

  • JS动态插入并立即执行回调函数的方法

    本文实例讲述了JS动态插入并立即执行回调函数的方法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <

随机推荐