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 相关文章推荐
DOM Scripting中的图片切换[兼容Firefox]
Jun 12 Javascript
在子窗口中关闭父窗口的一句代码
Oct 21 Javascript
jQuery中wrapInner()方法用法实例
Jan 16 Javascript
解析Javascript单例模式概念与实例
Dec 05 Javascript
Bootstrap CSS组件之输入框组
Dec 17 Javascript
ES6新特性四:变量的解构赋值实例
Apr 21 Javascript
详解vue过滤器在v2.0版本用法
Jun 01 Javascript
Easyui ueditor 整合解决不能编辑的问题(推荐)
Jun 25 Javascript
weebox弹出窗口不居中显示的解决方法
Nov 27 Javascript
微信小程序实现点击卡片 翻转效果
Sep 04 Javascript
JS实现纵向轮播图(初级版)
Jan 18 Javascript
JavaScript基于用户照片姓名生成海报
May 29 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去除数组中重复数据
2014/11/18 PHP
Yii框架引入coreseek分页功能示例
2019/02/08 PHP
Dojo之路:如何利用Dojo实现Drag and Drop效果
2007/04/10 Javascript
基于jquery循环map功能的代码
2011/02/26 Javascript
JavaScript+CSS控制打印格式示例介绍
2014/01/07 Javascript
5个书写JavaScript代码的坏习惯,看看你中枪了没?
2014/11/06 Javascript
Three.js学习之网格
2016/08/10 Javascript
Jquery循环截取字符串的方法(多出的字符串处理成&quot;...&quot;)
2016/11/28 Javascript
Bootstrap基本组件学习笔记之列表组(11)
2016/12/07 Javascript
Bootstrap免费字体和图标网站(值得收藏)
2017/03/16 Javascript
jQuery Ajax前后端使用JSON进行交互示例
2017/03/17 Javascript
详解Angular2组件之间如何通信
2017/06/22 Javascript
微信小程序使用wx.request请求服务器json数据并渲染到页面操作示例
2019/03/30 Javascript
巧妙运用v-model实现父子组件传值的方法示例
2019/04/07 Javascript
jQuery Migrate 插件用法实例详解
2019/05/22 jQuery
[03:07]DOTA2英雄基础教程 冰霜诅咒极寒幽魂
2013/12/06 DOTA
[14:57]DOTA2 HEROS教学视频教你分分钟做大人-幽鬼
2014/06/13 DOTA
python 排序算法总结及实例详解
2016/09/28 Python
Python实现简单的语音识别系统
2017/12/13 Python
Python实现PS滤镜碎片特效功能示例
2018/01/24 Python
对Python中type打开文件的方式介绍
2018/04/28 Python
python根据url地址下载小文件的实例
2018/12/18 Python
Python装饰器使用你可能不知道的几种姿势
2019/10/25 Python
django框架中ajax的使用及避开CSRF 验证的方式详解
2019/12/11 Python
python实现简单坦克大战
2020/03/27 Python
Python通过Schema实现数据验证方式
2020/11/12 Python
js正则匹配markdown里的图片标签的实现
2021/03/24 Javascript
高级电工工作职责
2013/11/21 职场文书
酒店中秋节活动方案
2014/01/31 职场文书
农林环境专业求职信
2014/03/13 职场文书
教师师德承诺书
2014/03/26 职场文书
老公保证书范文
2014/04/29 职场文书
公司的门卫岗位职责
2014/09/09 职场文书
中学生旷课检讨书模板
2014/10/08 职场文书
学校机关党总支领导班子整改工作方案
2014/10/26 职场文书
运动会跳远广播稿
2015/08/19 职场文书