js 立即调用的函数表达式如何写

如果不需要显示调用函数， 让这个函数在定义的时候就执行的话， 该如何写才可以呢,接下来将详细介绍实现步骤，感兴趣的朋友可以了解下

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


代码如下:

<!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 foo() {} 函数 foo 将会在整个程序执行前被 hoist (提升),因此它在定义 foo 函数的整个 scope (作用域)中都是可用的.即使在函数定义之前调用它也没问题. foo(); // Works because foo was created before this code runs function foo() {} 因为我打算专门写篇介绍作用域的文章,所以这里就不详述了. 函数表达式 对于函数声明,函数的名称是必须的,而对于函数表达式而言则是

  • js中函数声明与函数表达式

    目前为止,我们一直没有对函数声明和函数表达式加以区别.而实际上,解析器在向执行环境中加载数据时,对函数声明和函数表达式并非一视同仁.解析器会率先读取函数声明,并使其在执行任何代码之前可用(可以访问):至于函数表达式,则必须等到解析器执行到它所在的代码行,才会真正被解释执行.如下例子: 复制代码 代码如下: alert(sum(10,10)); function sum(num1,num2) {     return num1+num2; } 以上代码完全可以正确执行,因为在代码开始执行之前,解析

  • javascript 函数声明与函数表达式的区别介绍

    还是一样,先上代码: 复制代码 代码如下: <script> var f = function g() { return 1; }; if (false) { f = function g(){ return 2; }; } alert(g()); // 2 </script> 把这段代码扔到IE 6 里面和chorme里面是完全不同的两种效果. 这里输出2 是在ie6里面的效果,如果在chorme会出现g没有定义. 这也算是JScript的bug吧. 在这里很明显,这里的只是定义

  • javascript函数声明和函数表达式区别分析

    javascript函数声明和函数表达式区别分析

    平时再用js写函数的时候,一般都是以惯例 function fn () {} 的方式来声明一个函数,在阅读一些优秀插件的时候又不免见到 var fn = function () {} 这种函数的创建,究竟他们用起来有什么区别呢,今天就本着打破砂锅问到底的精神,好好来说说这个让人神魂颠倒的--函数声明. 函数声明 函数声明示例代码 复制代码 代码如下: function fn () {     console.log('fn 函数执行..');     // code.. } 这样我们就声明了一个

  • 浅析javascript函数表达式

    开始学习javascript函数表达式,仔细阅读下文. 1.一般形式的创建函数,在执行代码之前会先读取函数声明,所以可以把函数声明写在函数调用的下面: sayHi(); function sayHi(){ alert("Hi!"); } 2.使用函数表达式创建函数,调用前必须先赋值: sayHi(); //错误!!函数不存在 var sayHi=function(){ alert("Hi!"); } 3.递归 一般递归 function factorial(num)

  • 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.dt

  • 深入理解JavaScript系列(4) 立即调用的函数表达式

    前言 大家学JavaScript的时候,经常遇到自执行匿名函数的代码,今天我们主要就来想想说一下自执行. 在详细了解这个之前,我们来谈了解一下"自执行"这个叫法,本文对这个功能的叫法也不一定完全对,主要是看个人如何理解,因为有的人说立即调用,有的人说自动执行,所以你完全可以按照你自己的理解来取一个名字,不过我听很多人都叫它为"自执行",但作者后面说了很多,来说服大家称呼为"立即调用的函数表达式". 本文英文原文地址:http://benalman

  • JS 有名函数表达式全面解析

    Example #1: Function expression identifier leaks into an enclosing scope 实例1:函数表达式标示符渗进了外围作用域 var f = function g(){}; typeof g; // "function" Remember how I mentioned that an identifier of named function expression is not available in an enclosi

  • js 立即调用的函数表达式如何写

    如果不需要显示调用函数, 让这个函数在定义的时候就执行的话, 该如何写才可以呢,接下来将详细介绍实现步骤,感兴趣的朋友可以了解下 1.前言 函数需要先定义,后使用. 这基本上所有编程语言的一条铁的定律. 一般状况下, 我们需要调用一个JavaScript 函数, 基本的状况都是先定义, 然后再调用. 看一个例子 代码如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "

  • JS随机调用指定函数的方法

    本文实例讲述了JS随机调用指定函数的方法.分享给大家供大家参考.具体如下: 本代码通过随机定时器调用指定函数,可达到间隔随机时间之行指定的函数的目的 function randRange(data) { var newTime = data[Math.floor(data.length * Math.random())]; return newTime; } function toggleSomething() { var timeArray = new Array(200, 300, 150,

  • JavaScript函数声明和函数表达式的区别

    JavaScript函数声明和函数表达式的区别

    目录 一.写法不一样 二.函数声明加载 三.分析浏览器如何执行代码 一.写法不一样 //函数声明 let res1 = sum1(10 , 20) console.log(res1) function sum1(num1, num2) { return num1 + num2 } //函数表达式 let res2 = sum2(10 , 20) console.log(res2) let sum2 = function ( num1, num2 ){ return num1 + num2 } 二

  • JS访问SWF的函数用法实例

    本文实例讲述了JS访问SWF的函数用法.分享给大家供大家参考.具体分析如下: 关于Flash和JS相互调用的例子已经说很多了,这不是难题,当然,调用错误这也不是Flash和JS的错误,我们今天就来彻底解决IE,FF和Chrome之间的不兼容问题! 我们知道,Flash中,如果访问外部JS函数,只需  复制代码 代码如下: flash.external.ExternalInterface.call("JS中的函数名"); 这一句即可 如果要JS访问Flash中的函数,需要用addCall

  • 浅析javascript中函数声明和函数表达式的区别

    javascript中声明函数的方法有两种:函数声明式和函数表达式. 区别如下: 1).以函数声明的方法定义的函数,函数名是必须的,而函数表达式的函数名是可选的. 2).以函数声明的方法定义的函数,函数可以在函数声明之前调用,而函数表达式的函数只能在声明之后调用. 3).以函数声明的方法定义的函数并不是真正的声明,它们仅仅可以出现在全局中,或者嵌套在其他的函数中,但是它们不能出现在循环,条件或者try/catch/finally中,而     函数表达式可以在任何地方声明. 下面分别用两种方法定

  • 浅谈javascript 函数表达式和函数声明的区别

    浅谈javascript 函数表达式和函数声明的区别

    javascript中声明函数的方法有两种:函数声明式和函数表达式. 区别如下: 1).以函数声明的方法定义的函数,函数名是必须的,而函数表达式的函数名是可选的. 2).以函数声明的方法定义的函数,函数可以在函数声明之前调用,而函数表达式的函数只能在声明之后调用. 3).以函数声明的方法定义的函数并不是真正的声明,它们仅仅可以出现在全局中,或者嵌套在其他的函数中,但是它们不能出现在循环,条件或者try/catch/finally中,而     函数表达式可以在任何地方声明. 下面分别用两种方法定

  • 基于js里调用函数时,函数名带括号和不带括号的区别

    示例代码: <span style="font-size:18px;">function hi(){ var a = 1; return function(){ console.log(a++); }; }; var aaa = hi(); var bbb = hi; </span> 如以上代码: aaa 是将 hi() 的运行结果赋值给它,即 return 返回的匿名函数,此时有一个闭包,则每次调用 aaa 时都访问的同一个 a,aaa() 第一次运行结果为

  • 常用js,css文件统一加载方法(推荐) 并在加载之后调用回调函数

    为了方便资源管理和提升工作效率,常用的js和css文件的加载应该放在一个统一文件里面完成,也方便后续的资源维护.所以我用js写了以下方法,存放在"sourceController.js"文件内. function sourceController(){ var root = ""; var cssCount = 0; // css加载计数器 var jsCount = 0; // js加载计数器 this.callfunc = null; // 回调函数 this.

随机推荐