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 浮动导航栏实现代码
Aug 27 Javascript
range 标准化之获取
Aug 28 Javascript
JS获取网页图片name属性的方法
Apr 01 Javascript
jquery获取多个checkbox的值异步提交给php
Jul 07 Javascript
jQuery实现鼠标经过时出现隐藏层文字链接的方法
Oct 12 Javascript
基于JS实现新闻列表无缝向上滚动实例代码
Jan 22 Javascript
利用Mongoose让JSON数据直接插入或更新到MongoDB
May 03 Javascript
JS中Attr的用法详解
Oct 09 Javascript
JS设计模式之状态模式概念与用法分析
Feb 05 Javascript
JavaScript ES6中的简写语法总结与使用技巧
Dec 30 Javascript
node.js开发辅助工具nodemon安装与配置详解
Feb 06 Javascript
js实现数据导出为EXCEL(支持大量数据导出)
Mar 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 魔术函数使用说明
2010/02/21 PHP
php制作中间带自己定义图片二维码的方法
2014/01/27 PHP
体育彩票排列三组选三算法分享
2014/03/07 PHP
php去掉URL网址中带有PHPSESSID的配置方法
2014/07/08 PHP
php通过递归方式复制目录和子目录的方法
2015/03/13 PHP
PHP伪造来源HTTP_REFERER的方法实例详解
2015/07/06 PHP
PHP实现的简单操作SQLite数据库类与用法示例
2017/06/19 PHP
javascript基础知识大全 便于大家学习,也便于我自己查看
2012/08/17 Javascript
js根据给定的日期计算当月有多少天实现思路及代码
2013/02/25 Javascript
jQuery 删除/替换DOM元素的几种方式
2014/05/20 Javascript
浅析AngularJS中的指令
2016/03/20 Javascript
JavaScript语言精粹经典实例(整理篇)
2016/06/07 Javascript
Vue表单实例代码
2016/09/05 Javascript
巧用Vue.js+Vuex制作专门收藏微信公众号的app
2016/11/03 Javascript
windows系统下更新nodejs版本的方案
2017/11/24 NodeJs
学习Vue组件实例
2018/04/28 Javascript
通过Nodejs搭建网站简单实现注册登录流程
2019/06/14 NodeJs
微信小程序自定义tabBar的踩坑实践记录
2020/11/06 Javascript
微信小程序实现点击导航条切换页面
2020/11/19 Javascript
python常见的格式化输出小结
2016/12/15 Python
Python numpy 常用函数总结
2017/12/07 Python
python psutil库安装教程
2018/03/19 Python
python将一个英文语句以单词为单位逆序排放的方法
2018/12/20 Python
Pyqt5如何让QMessageBox按钮显示中文示例代码
2019/04/11 Python
Python求均值,方差,标准差的实例
2019/06/29 Python
python 哈希表实现简单python字典代码实例
2019/09/27 Python
Python使用plt.boxplot() 参数绘制箱线图
2020/06/04 Python
台湾最大网路书店:博客来
2018/03/18 全球购物
Herschel美国官网:背包、手提袋及配件
2020/03/10 全球购物
请介绍一下Ant
2016/07/22 面试题
天逸系统(武汉)有限公司Java笔试题
2015/12/29 面试题
出纳的岗位职责
2013/11/09 职场文书
解除合同协议书
2014/04/17 职场文书
暑期培训心得体会
2014/09/02 职场文书
主持稿开场白
2015/06/01 职场文书
Nginx反向代理多个服务器的实现方法
2021/03/31 Servers