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 操作XML入门
Dec 25 Javascript
javascript 函数及作用域总结介绍
Nov 12 Javascript
jquery获取颜色在ie和ff下的区别示例介绍
Mar 28 Javascript
用Jquery选择器计算table中的某一列某一行的合计
Aug 13 Javascript
js+css实现超简洁的二级下拉菜单效果代码
Sep 07 Javascript
jQuery获取某天的农历日期并判断是否除夕或新年的方法
Mar 01 Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(二)
May 17 Javascript
jQuery EasyUI之验证框validatebox实例详解
Apr 10 jQuery
vuejs使用$emit和$on进行组件之间的传值的示例
Oct 04 Javascript
使用 Vue 绑定单个或多个 Class 名的实例代码
Jan 08 Javascript
JavaScript中var的重要性实例分析
Jul 09 Javascript
vue大型项目之分模块运行/打包的实现
Sep 21 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
深入了解php4(1)--回到未来
2006/10/09 PHP
PHP入门速成教程
2007/03/19 PHP
两级联动select刷新后其值保持不变的实现方法
2014/01/27 PHP
PHP中的替代语法介绍
2015/01/09 PHP
解析WordPress中的post_class与get_post_class函数
2016/01/04 PHP
[原创]PHP实现字节数Byte转换为KB、MB、GB、TB的方法
2017/08/31 PHP
php实现生成带二维码图片并强制下载功能
2018/02/24 PHP
利用ASP发送和接收XML数据的处理方法与代码
2007/11/13 Javascript
Input 特殊事件onpopertychange和oninput
2009/06/17 Javascript
javascript Object与Function使用
2010/01/11 Javascript
能说明你的Javascript技术很烂的五个原因分析
2011/10/28 Javascript
JS短路原理的应用示例 精简代码的途径
2013/12/13 Javascript
页面加载完成后再执行JS的jquery写法以及区别说明
2014/02/22 Javascript
实现网页页面跳转的几种方法(meta标签、js实现、php实现)
2014/05/20 Javascript
Jquery实现仿京东商城省市联动菜单
2015/11/19 Javascript
基于JavaScript实现鼠标悬浮弹出跟随鼠标移动的带箭头的信息层
2016/01/18 Javascript
详解jQuery中的事件
2016/12/14 Javascript
jQuery中clone()函数实现表单中增加和减少输入项
2017/05/13 jQuery
vue+webpack 打包文件 404 页面空白的解决方法
2018/02/28 Javascript
实例详解BootStrap的动态模态框及静态模态框
2018/08/13 Javascript
Python实现端口复用实例代码
2014/07/03 Python
python学生管理系统代码实现
2020/04/05 Python
Python装饰器基础概念与用法详解
2018/12/22 Python
python判断文件夹内是否存在指定后缀文件的实例
2019/06/10 Python
Django 静态文件配置过程详解
2019/07/23 Python
python爬虫增加访问量的方法
2019/08/22 Python
python协程gevent案例 爬取斗鱼图片过程解析
2019/08/27 Python
PyCharm无法引用自身项目解决方式
2020/02/12 Python
详解python tkinter 图片插入问题
2020/09/03 Python
好矿嫂事迹材料
2014/01/21 职场文书
企业文化标语大全
2014/06/10 职场文书
群众路线查摆问题整改措施
2014/10/10 职场文书
三提三创主题教育活动查摆整改措施
2014/10/25 职场文书
暑期社会实践证明书
2014/11/17 职场文书
高三教师工作总结2015
2015/07/21 职场文书
Go语言特点及基本数据类型使用详解
2022/03/21 Golang