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

 更新时间:2014年01月12日 17:39:14   作者:  
如果不需要显示调用函数, 让这个函数在定义的时候就执行的话, 该如何写才可以呢,下面为大家介绍下具体的实现步骤,喜欢的朋友可以了解下
如果不需要显示调用函数, 让这个函数在定义的时候就执行的话, 该如何写才可以呢,接下来将详细介绍实现步骤,感兴趣的朋友可以了解下

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 ,....

相关文章

  • JavaScript获取radio选中值的几种常用方法小结

    JavaScript获取radio选中值的几种常用方法小结

    这篇文章主要介绍了JavaScript获取radio选中值的几种常用方法,结合实例形式总结分析了javascript获取radio选中值的常见实现方法与操作注意事项,需要的朋友可以参考下
    2023-06-06
  • 详解CocosCreator MVC架构

    详解CocosCreator MVC架构

    这篇文章主要介绍了CocosCreator MVC架构,同学们在制作游戏过程中,尽量使用一些架构,会避免很多问题
    2021-04-04
  • 微信小程序canvas开发水果老虎机的思路详解

    微信小程序canvas开发水果老虎机的思路详解

    这篇文章主要介绍了微信小程序canvas开发水果老虎机的思路,本文通过思路代码分步骤给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-02-02
  • Sourcemap源代码映射详细介绍

    Sourcemap源代码映射详细介绍

    这篇文章主要为大家介绍了Sourcemap源代码映射介绍及示例详解解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪<BR>
    2023-04-04
  • javascript学习笔记之10个原生技巧

    javascript学习笔记之10个原生技巧

    首先在这里要非常感谢无私分享作品的网友们,这些代码片段主要由网友们平时分享的作品代码里面和经常去逛网站然后查看源文件收集到的。把平时网站上常用的一些实用功能代码片段通通收集起来,方便网友们学习使用,利用好的话可以加快网友们的开发速度,提高工作效率。
    2014-05-05
  • js获取及判断键盘按键的方法

    js获取及判断键盘按键的方法

    这篇文章主要介绍了js获取及判断键盘按键的方法,涉及JavaScript键盘事件的获取及键值的判定技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-12-12
  • 微信小程序map地图使用方法详解

    微信小程序map地图使用方法详解

    这篇文章主要为大家详细介绍了微信小程序map地图使用的方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-10-10
  • 微信小程序去除左上角返回键的实现方法

    微信小程序去除左上角返回键的实现方法

    这篇文章主要介绍了微信小程序去除左上角返回键的实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-03-03
  • js微信应用场景之微信音乐相册案例分享

    js微信应用场景之微信音乐相册案例分享

    这篇文章主要为大家分享了js微信应用场景之微信音乐相册案例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-08-08
  • 关于layui表单中按钮自动提交的解决方法

    关于layui表单中按钮自动提交的解决方法

    今天小编就为大家分享一篇关于layui表单中按钮自动提交的解决方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09

最新评论