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


Posted in Javascript onJanuary 16, 2013

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 ,....
Javascript 相关文章推荐
服务端 VBScript 与 JScript 几个相同特性的写法 By shawl.qiu
Mar 06 Javascript
JS解密入门之凭直觉解
Jun 25 Javascript
异步加载script的代码
Jan 12 Javascript
推荐10个超棒的jQuery工具提示插件
Oct 11 Javascript
Javascript设计模式理论与编程实战之简单工厂模式
Nov 03 Javascript
JQuery组件基于Bootstrap的DropDownList(完整版)
Jul 05 Javascript
jQuery基本过滤选择器用法示例
Sep 09 Javascript
jQuery表单插件ajaxForm实例详解
Jan 17 Javascript
AngularJS自定义指令详解(有分页插件代码)
Jun 12 Javascript
解决ele ui 表格表头太长问题的实现
Nov 13 Javascript
JS代码优化的8点建议
Feb 04 Javascript
React+EggJs实现断点续传的示例代码
Jul 07 Javascript
JQuery验证工具类搜集整理
Jan 16 #Javascript
js 实现在离开页面时提醒未保存的信息(减少用户重复操作)
Jan 16 #Javascript
js拦截alert对话框另类应用
Jan 16 #Javascript
javascript图像处理—仿射变换深度理解
Jan 16 #Javascript
用js获取电脑信息(是使用与IE浏览器)
Jan 15 #Javascript
使用jQuery fancybox插件打造一个实用的数据传输模态弹出窗体
Jan 15 #Javascript
尝试在让script的type属性等于text/html
Jan 15 #Javascript
You might like
php学习之数据类型之间的转换介绍
2011/06/09 PHP
解析thinkphp中的导入文件标签
2013/06/20 PHP
ThinkPHP3.1新特性之多层MVC的支持
2014/06/19 PHP
destoon实现不同会员组公司名称显示不同的颜色的方法
2014/08/22 PHP
浅析Yii2 gridview实现批量删除教程
2016/04/22 PHP
nginx下安装php7+php5
2016/07/31 PHP
JavaScript 笔记二 Array和Date对象方法
2010/05/22 Javascript
jquery.simple.tree插件 更简单,兼容性更好的无限树插件
2010/09/03 Javascript
jQuery拖动图片删除示例
2013/05/10 Javascript
深入理解JavaScript系列(17):面向对象编程之概论详细介绍
2015/03/04 Javascript
javascript正则表达式之分组概念与用法实例
2016/06/16 Javascript
vue动态组件实现选项卡切换效果
2017/03/08 Javascript
JavaScript数据结构之双向链表和双向循环链表的实现
2017/11/28 Javascript
js键盘事件实现人物的行走
2020/01/17 Javascript
node.js使用 http-proxy 创建代理服务器操作示例
2020/02/10 Javascript
原生js实现点击轮播切换图片
2020/02/11 Javascript
[07:03]显微镜下的DOTA2第九期——430圣堂刺客杀戮秀
2014/06/20 DOTA
python 图片验证码代码
2008/12/07 Python
简单讲解Python中的数字类型及基本的数学计算
2016/03/11 Python
Python实现Linux中的du命令
2017/06/12 Python
Python 余弦相似度与皮尔逊相关系数 计算实例
2019/12/23 Python
python中time tzset()函数实例用法
2021/02/18 Python
html5设计原理(推荐收藏)
2014/05/17 HTML / CSS
JINS眼镜官方网站:日本最大的眼镜邮购
2016/10/14 全球购物
吉列剃须刀美国官网:Gillette美国
2018/07/13 全球购物
网游商务专员求职信
2013/10/15 职场文书
电脑教师的教学自我评价
2013/11/26 职场文书
历史专业个人求职信分享
2013/12/20 职场文书
怎么写好自荐书
2014/03/02 职场文书
总账会计岗位职责
2014/03/13 职场文书
三八节主持词
2014/03/17 职场文书
2014年超市员工工作总结
2014/11/18 职场文书
网站文案策划岗位职责
2015/04/14 职场文书
2015年共青团工作总结
2015/05/15 职场文书
月考总结与反思
2015/10/22 职场文书
2019年描写人生经典诗句大全
2019/07/08 职场文书