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 相关文章推荐
Underscore.js 1.3.3 中文注释翻译说明
Jun 25 Javascript
基于replaceChild制作简单的吞噬特效
Sep 21 Javascript
JavaScript弹出对话框的三种方式
Mar 23 Javascript
Ionic如何实现下拉刷新与上拉加载功能
Jun 03 Javascript
使用JS实现图片展示瀑布流效果的实例代码
Sep 12 Javascript
Cpage.js给组件绑定事件的实现代码
Aug 31 Javascript
微信小程序商品详情页的底部弹出框效果
Nov 16 Javascript
webpack公共组件引用路径简化小技巧
Jun 15 Javascript
jQuery实现ajax回调函数带入参数的方法示例
Jun 26 jQuery
微信自定义分享链接信息(标题,图片和内容)实现过程详解
Sep 04 Javascript
vue+element表格导出为Excel文件
Sep 26 Javascript
vue中可编辑树状表格的实现代码
Oct 31 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发送邮件的问题详解
2015/06/22 PHP
apache和PHP如何整合在一起
2015/10/12 PHP
PHP检查网站是否宕机的方法示例
2017/07/24 PHP
extjs 学习笔记 四 带分页的grid
2009/10/20 Javascript
js限制文本框为整数和货币的函数代码
2010/10/13 Javascript
sencha touch 模仿tabpanel导航栏TabBar的实例代码
2013/10/24 Javascript
jQuery之过滤元素操作小结
2013/11/30 Javascript
jQuery实现Flash效果上下翻动的中英文导航菜单代码
2015/09/22 Javascript
初识angular框架后的所思所想
2016/02/19 Javascript
Node.js读写文件之批量替换图片的实现方法
2016/09/07 Javascript
Bootstrap实现圆角、圆形头像和响应式图片
2016/12/14 Javascript
layui弹出层效果实现代码
2017/05/19 Javascript
详解如何使用webpack在vue项目中写jsx语法
2017/11/08 Javascript
JS实现倒计时图文效果
2018/11/17 Javascript
vue 双向数据绑定的实现学习之监听器的实现方法
2018/11/30 Javascript
微信小程序项目总结之记账小程序功能的实现(包括后端)
2019/08/20 Javascript
js 对象使用的小技巧实例分析
2019/11/08 Javascript
JS轮播图的实现方法2
2020/08/25 Javascript
vue中重定向redirect:‘/index‘,不显示问题、跳转出错的完美解决
2020/09/28 Javascript
[59:36]2018DOTA2亚洲邀请赛 4.3 突围赛 Secret vs VG 第二场
2018/04/04 DOTA
Python 文本文件内容批量抽取实例
2018/12/10 Python
对python中Librosa的mfcc步骤详解
2019/01/09 Python
Django Rest framework解析器和渲染器详解
2019/07/25 Python
Python编写带选项的命令行程序方法
2019/08/13 Python
浅谈python已知元素,获取元素索引(numpy,pandas)
2019/11/26 Python
python 错误处理 assert详解
2020/04/20 Python
HTML5 对各个标签的定义与规定:body的介绍
2012/06/21 HTML / CSS
美国最大的家庭鞋类零售商之一:Shoe Carnival
2017/10/06 全球购物
Java中会存在内存泄漏吗,请简单描述
2016/12/22 面试题
怎么写有吸引力的自荐信
2013/11/17 职场文书
小学防溺水制度
2014/01/29 职场文书
超市开学活动方案
2014/03/01 职场文书
项目合作协议书
2014/09/23 职场文书
六五普法宣传标语
2014/10/06 职场文书
单位实习工作证明怎么写
2014/11/02 职场文书
MySQL事务的隔离级别详情
2022/07/15 MySQL