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 相关文章推荐
关于恒等于(===)和非恒等于(!==)
Aug 20 Javascript
用JS写的一个TableView控件代码
Jan 23 Javascript
javascript中的new使用
Mar 20 Javascript
jQuery判断一个元素是否可见的方法
Jun 05 Javascript
jquery分页插件jquery.pagination.js使用方法解析
Apr 01 Javascript
AngularJS入门教程之静态模板详解
Aug 18 Javascript
手机端点击图片放大特效PhotoSwipe.js插件实现
Aug 24 Javascript
jQuery Ztree行政地区树状展示(点击加载)
Nov 09 Javascript
Bootstrap的class样式小结
Dec 01 Javascript
javascript 开发之百度地图使用到的js函数整理
May 19 Javascript
Webstorm2016使用技巧(SVN插件使用)
Oct 29 Javascript
简单了解小程序+node梳理登陆流程
Jun 24 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
smarty内置函数capture用法分析
2015/01/22 PHP
Laravel5.5 手动分页和自定义分页样式的简单实现
2019/10/15 PHP
PHP高并发和大流量解决方案整理
2021/03/09 PHP
IE中直接运行显示当前网页中的图片 推荐
2006/08/31 Javascript
javascript 多级checkbox选择效果
2009/08/20 Javascript
jquery表单验证使用插件formValidator
2012/11/10 Javascript
JS实现匀速运动的代码实例
2013/11/29 Javascript
Javascript学习笔记之 对象篇(四) : for in 循环
2014/06/24 Javascript
jQuery实现简洁的导航菜单效果
2015/11/23 Javascript
jQuery form插件之ajaxForm()和ajaxSubmit()的可选参数项对象
2016/01/23 Javascript
JS随机洗牌算法之数组随机排序
2016/03/23 Javascript
NodeJs读取JSON文件格式化时的注意事项
2016/09/25 NodeJs
Bootstrap popover用法详解
2016/12/22 Javascript
javascript实现秒表计时器的制作方法
2017/02/16 Javascript
node.js操作mongodb简单示例分享
2017/05/25 Javascript
最适应的vue.js的form提交涉及多种插件【推荐】
2018/08/27 Javascript
pm2启动ssr失败的解决方法
2019/06/29 Javascript
解决layui数据表格table的横向滚动条显示问题
2019/09/04 Javascript
解决vue项目运行npm run serve报错的问题
2020/10/26 Javascript
python实现根据月份和日期得到星座的方法
2015/03/27 Python
python实现教务管理系统
2018/03/12 Python
python3连接MySQL数据库实例详解
2018/05/24 Python
Flask框架Jinjia模板常用语法总结
2018/07/19 Python
使用urllib库的urlretrieve()方法下载网络文件到本地的方法
2018/12/19 Python
Python常用模块之requests模块用法分析
2019/05/15 Python
python 已知平行四边形三个点,求第四个点的案例
2020/04/12 Python
Django models文件模型变更错误解决
2020/05/11 Python
python math模块的基本使用教程
2021/01/16 Python
Python爬虫入门教程02之笔趣阁小说爬取
2021/01/24 Python
广告设计专业自荐信范文
2013/11/14 职场文书
十佳班主任事迹材料
2014/01/18 职场文书
师德师风个人总结
2015/02/06 职场文书
单位证明范文
2015/06/18 职场文书
CSS3 天气图标动画效果
2021/04/06 HTML / CSS
python开发的自动化运维工具ansible详解
2021/08/07 Python
MySQL库表太大怎么办? 数据库分库分表项目实践
2022/04/11 MySQL