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 相关文章推荐
IE8 浏览器Cookie的处理
Jan 31 Javascript
判断浏览器的javascript版本的代码
Sep 03 Javascript
javascript模拟枚举的简单实例
Mar 06 Javascript
特殊情况下如何获取span里面的值
May 20 Javascript
JavaScript将一个数组插入到另一个数组的方法
Mar 19 Javascript
JavaScript控制图片加载完成后调用回调函数的方法
Mar 20 Javascript
jQuery使用post方法提交数据实例
Mar 25 Javascript
javascript转换静态图片,增加粒子动画效果
May 28 Javascript
浅析Bootstrap缩略图组件与警示框组件
Apr 29 Javascript
JS定时器实现数值从0到10来回变化
Dec 09 Javascript
jQuery动态添加.active 实现导航效果代码思路详解
Aug 29 jQuery
JavaScript面向对象程序设计创建对象的方法分析
Aug 13 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,不用COM,生成excel文件
2006/10/09 PHP
YII使用url组件美化管理的方法
2015/12/28 PHP
PHP join()函数用法与实例讲解
2019/03/11 PHP
laravel-admin自动生成模块,及相关基础配置方法
2019/10/08 PHP
PHP连续签到功能实现方法详解
2019/12/04 PHP
jQuery contains过滤器实现精确匹配使用方法
2013/04/12 Javascript
详解js图片轮播效果实现原理
2015/12/17 Javascript
bootstrap导航栏、下拉菜单、表单的简单应用实例解析
2017/01/06 Javascript
jQuery Validate 校验多个相同name的方法
2017/05/18 jQuery
vue之数据交互实例代码
2017/06/20 Javascript
解析Json字符串的三种方法日常常用
2018/05/02 Javascript
react native基于FlatList下拉刷新上拉加载实现代码示例
2018/09/30 Javascript
微信小程序实现的绘制table表格功能示例
2019/04/26 Javascript
一文读懂ES7中的javascript修饰器
2019/05/06 Javascript
梳理一下vue中的生命周期
2020/12/30 Vue.js
python自动化测试之从命令行运行测试用例with verbosity
2014/09/28 Python
Python编程给numpy矩阵添加一列方法示例
2017/12/04 Python
python 对象和json互相转换方法
2018/03/22 Python
python3中获取文件当前绝对路径的两种方法
2018/04/26 Python
基于Python实现用户管理系统
2019/02/26 Python
python版DDOS攻击脚本
2019/06/12 Python
Windows 下更改 jupyterlab 默认启动位置的教程详解
2020/05/18 Python
浅谈matplotlib中FigureCanvasXAgg的用法
2020/06/16 Python
python 如何利用argparse解析命令行参数
2020/09/11 Python
利用CSS3实现毛玻璃效果示例源码
2016/09/25 HTML / CSS
HTML5 Canvas绘制圆点虚线实例
2015/01/01 HTML / CSS
印度尼西亚综合购物网站:Lazada印尼
2016/09/07 全球购物
世界上最大的二手相机店:KEN
2017/05/17 全球购物
找到您丢失的钥匙、钱包和手机:Tile
2017/05/19 全球购物
人资专员岗位职责
2014/04/04 职场文书
经典团队口号
2014/06/06 职场文书
幼儿教师辞职信
2015/02/27 职场文书
2019年销售部季度工作计划3篇
2019/10/09 职场文书
Java Optional<Foo>转换成List<Bar>的实例方法
2021/06/20 Java/Android
光之国的四大叛徒:第一贝利亚导致宇宙毁灭,赛文奥特曼在榜
2022/03/18 日漫
使用ICOM IC-R9500接收机同时测评十台收音机中波接收性能
2022/05/10 无线电