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 相关文章推荐
JS JavaScript获取Url参数,src属性参数
Mar 09 Javascript
收藏一些不常用,但是有用的代码
Mar 12 Javascript
WordPress JQuery处理沙发头像
Jun 22 Javascript
如何用js控制frame的隐藏或显示的解决办法
Mar 20 Javascript
jquery实现人性化的有选择性禁用鼠标右键
Jun 30 Javascript
jQuery中attr()方法用法实例
Jan 05 Javascript
javascript实现博客园页面右下角返回顶部按钮
Feb 22 Javascript
JavaScript 数组- Array的方法总结(推荐)
Jul 21 Javascript
jQuery常见面试题之DOM操作详析
Jul 05 jQuery
vue全局自定义指令-元素拖拽的实现代码
Apr 14 Javascript
微信小程序自定义菜单切换栏tabbar组件代码实例
Dec 30 Javascript
Vue中this.$nextTick的作用及用法
Feb 04 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/03/11 PHP
PHP 输出缓冲控制(Output Control)详解
2016/08/25 PHP
解决laravel session失效的问题
2019/10/14 PHP
asp批量修改记录的代码
2008/06/25 Javascript
禁止你的左键复制实用技巧
2013/01/04 Javascript
javascript实现的右下角弹窗实例
2015/04/24 Javascript
js canvas实现简单的图像扩散效果
2020/06/28 Javascript
JS实现图片转换成base64的各种应用场景实例分析
2018/06/22 Javascript
nodejs中express入门和基础知识点学习
2018/09/13 NodeJs
微信小程序日历组件使用方法详解
2018/12/29 Javascript
JS实现数组删除指定元素功能示例
2019/06/05 Javascript
微信小程序实现蓝牙打印
2019/09/23 Javascript
Jquery属性的获取/设置及样式添加/删除操作技巧分析
2019/12/23 jQuery
vue项目中使用vue-layer弹框插件的方法
2020/03/11 Javascript
JS严格模式原理与用法实例分析
2020/04/27 Javascript
JS如何操作DOM基于表格动态展示数据
2020/10/15 Javascript
Python之PyUnit单元测试实例
2014/10/11 Python
python实现实时监控文件的方法
2016/08/26 Python
python实现给微信公众号发送消息的方法
2017/06/30 Python
Python栈算法的实现与简单应用示例
2017/11/01 Python
解决Pycharm界面的子窗口不见了的问题
2019/01/17 Python
Python中按键来获取指定的值
2019/03/02 Python
如何通过Python实现标签云算法
2019/07/02 Python
在pycharm中显示python画的图方法
2019/08/31 Python
Python3的unicode编码转换成中文的问题及解决方案
2019/12/10 Python
tensorflow ckpt模型和pb模型获取节点名称,及ckpt转pb模型实例
2020/01/21 Python
Pycharm如何导入python文件及解决报错问题
2020/05/10 Python
使用keras内置的模型进行图片预测实例
2020/06/17 Python
基于Python3读写INI配置文件过程解析
2020/07/23 Python
Nordgreen美国官网:在线购买极简主义斯堪的纳维亚手表
2019/07/24 全球购物
《蓝色的树叶》教学反思
2014/02/24 职场文书
2014年妇女工作总结
2014/12/06 职场文书
2016年春季趣味运动会开幕词
2016/03/04 职场文书
利用python调用摄像头的实例分析
2021/06/07 Python
Nginx工作模式及代理配置的使用细节
2022/03/21 Servers
HttpClient实现文件上传功能
2022/08/14 Java/Android