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


Posted in Javascript onJanuary 12, 2014

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

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 相关文章推荐
基于jQuery实现图片的前进与后退功能
Apr 24 Javascript
JavaScript 事件绑定及深入
Apr 13 Javascript
AngularJS中的$watch(),$digest()和$apply()区分
Apr 04 Javascript
AngularJS中关于ng-class指令的几种实现方式详解
Sep 17 Javascript
微信小程序 Storage API实例详解
Oct 02 Javascript
AngularJS2中一种button切换效果的实现方法(二)
Mar 27 Javascript
JavaScript通过改变文字透明度实现的文字闪烁效果实例
Apr 27 Javascript
JavaScript 跨域之POST实现方法
May 07 Javascript
javascript实现点亮灯泡特效示例
Oct 15 Javascript
element中的$confirm的使用
Apr 26 Javascript
怎么理解wx.navigateTo的events参数使用详情
May 18 Javascript
手把手教你如何编译打包video.js
Dec 09 Javascript
IE的事件传递-event.cancelBubble示例介绍
Jan 12 #Javascript
Javascript实现带关闭按钮的网页漂浮广告代码
Jan 12 #Javascript
jquery toolbar与网页浮动工具条具体实现代码
Jan 12 #Javascript
jQuery在iframe中无法弹出对话框的解决方法
Jan 12 #Javascript
js弹窗返回值详解(window.open方式)
Jan 11 #Javascript
JS中表单的使用小结
Jan 11 #Javascript
js opener的使用详解
Jan 11 #Javascript
You might like
phpExcel导出大量数据出现内存溢出错误的解决方法
2013/02/28 PHP
php实现统计目录文件大小的函数
2015/12/25 PHP
Zend Framework入门教程之Zend_View组件用法示例
2016/12/09 PHP
node.js中的fs.close方法使用说明
2014/12/17 Javascript
JavaScript学习小结(一)——JavaScript入门基础
2015/09/02 Javascript
js格式化时间的方法
2015/12/18 Javascript
js 实现数值的千分位及保存小数方法(推荐)
2016/08/01 Javascript
基于原生js运动方式关键点的总结(推荐)
2017/10/01 Javascript
Nodejs中crypto模块的安全知识讲解
2018/01/03 NodeJs
如何在微信小程序里面退出小程序的方法
2019/04/28 Javascript
JS访问对象两种方式区别解析
2020/08/29 Javascript
js实现点击按钮随机生成背景颜色
2020/09/05 Javascript
JavaScript实现轮播图效果
2020/10/30 Javascript
微信小程序实现页面监听自定义组件的触发事件
2020/11/01 Javascript
python executemany的使用及注意事项
2017/03/13 Python
Python入门_浅谈逻辑判断与运算符
2017/05/16 Python
Python用sndhdr模块识别音频格式详解
2018/01/11 Python
Django处理文件上传File Uploads的实例
2018/05/28 Python
python爬虫正则表达式之处理换行符
2018/06/08 Python
python中的decimal类型转换实例详解
2019/06/26 Python
tensorflow 查看梯度方式
2020/02/04 Python
打包PyQt5应用时的注意事项
2020/02/14 Python
Keras - GPU ID 和显存占用设定步骤
2020/06/22 Python
8款使用 CSS3 实现超炫的 Loading(加载)的动画效果
2015/03/17 HTML / CSS
佛罗里达州印第安河新鲜水果:Hale Groves
2017/02/20 全球购物
电大物流学生的自我评价
2013/10/25 职场文书
医学检验专业大学生求职信
2013/11/18 职场文书
大学生村官考核材料
2014/05/23 职场文书
黄石寨导游词
2015/02/05 职场文书
卫生院艾滋病宣传活动总结
2015/05/09 职场文书
劳动仲裁代理词范文
2015/05/25 职场文书
2015年三好一满意工作总结
2015/07/24 职场文书
2015年秋季灭鼠工作总结
2015/07/27 职场文书
2019中秋节祝福语大全,提前收藏啦
2019/09/10 职场文书
Mac环境Nginx配置和访问本地静态资源的实现
2021/03/31 Servers
使用Postman测试需要授权的接口问题
2022/06/21 Java/Android