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 相关文章推荐
用jquery ajax获取网站Alexa排名的代码
Dec 12 Javascript
JS中的public和private对象,即static修饰符
Jan 18 Javascript
jquery简单图片切换显示效果实现方法
Jan 14 Javascript
javascript中this的四种用法
May 11 Javascript
Bootstarp风格的toggle效果分享
Feb 23 Javascript
js中 计算两个日期间的工作日的简单实例
Aug 08 Javascript
详解js实现线段交点的三种算法
Aug 09 Javascript
html、css和jquery相结合实现简单的进度条效果实例代码
Oct 24 Javascript
详解照片瀑布流效果(js,jquery分别实现与知识点总结)
Jan 01 Javascript
Node.js发送HTTP客户端请求并显示响应结果的方法示例
Apr 12 Javascript
JavaScript中正则表达式使数字、中文或指定字符高亮显示
Oct 31 Javascript
vue图片加载失败时用默认图片替换的方法
Aug 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函数代码
2010/04/22 PHP
PHP 中关于ord($str)&amp;gt;0x80的详细说明
2012/09/23 PHP
对PHP PDO的一些认识小结
2015/01/23 PHP
php中get_cfg_var()和ini_get()的用法及区别
2015/03/04 PHP
动态表单验证的操作方法和TP框架里面的ajax表单验证
2017/07/19 PHP
JavaScript 事件属性绑定带参数的函数
2009/03/13 Javascript
在线编辑器中换行与内容自动提取
2009/04/24 Javascript
jquery 图片上传按比例预览插件集合
2011/05/28 Javascript
jquery ajax修改全局变量示例代码
2013/11/08 Javascript
jquery将一个表单序列化为一个对象的方法
2013/12/02 Javascript
javacript使用break内层跳出外层循环分析
2015/01/12 Javascript
jquery实现炫酷的叠加层自动切换特效
2015/02/01 Javascript
实现音乐播放器的代码(html5+css3+jquery)
2015/08/04 Javascript
JavaScript模拟数组合并concat
2016/03/06 Javascript
JQuery解析XML数据的几个简单实例
2016/05/18 Javascript
jquery实现的table排序功能示例
2017/03/10 Javascript
JS排序算法之冒泡排序,选择排序与插入排序实例分析
2017/12/13 Javascript
Vue-cropper 图片裁剪的基本原理及思路讲解
2018/04/17 Javascript
JS使用tween.js动画库实现轮播图并且有切换功能
2018/07/17 Javascript
vue 中的keep-alive实例代码
2018/07/20 Javascript
VuePress 中如何增加用户登录功能
2019/11/29 Javascript
Vue使用vue-draggable 插件在不同列表之间拖拽功能
2020/03/12 Javascript
python字符串str和字节数组相互转化方法
2017/03/18 Python
Python实现希尔排序算法的原理与用法实例分析
2017/11/23 Python
python爬虫selenium和phantomJs使用方法解析
2019/08/08 Python
python函数修饰符@的使用方法解析
2019/09/02 Python
Pytorch maxpool的ceil_mode用法
2020/02/18 Python
利用Python实现某OA系统的自动定位功能
2020/05/27 Python
Python爬虫之App爬虫视频下载的实现
2020/12/08 Python
浅谈基于HTML5的在线视频播放方案
2016/02/18 HTML / CSS
C++:memset ,memcpy和strcpy的根本区别
2013/04/27 面试题
预备党员入党思想汇报
2014/01/04 职场文书
《永远的白衣战士》教学反思
2014/04/25 职场文书
房地产推广策划方案
2014/05/19 职场文书
关于读书的演讲稿1000字
2014/08/27 职场文书
vue实现省市区联动 element-china-area-data插件
2022/04/22 Vue.js