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 相关文章推荐
一个原生的用户等级的进度条
Jul 03 Javascript
发布一个基于javascript的动画类 Fx.js
Nov 05 Javascript
改变隐藏的input中value值的方法
Mar 19 Javascript
无刷新上传文件并返回自定义值
Jun 11 Javascript
JavaScript中实现Map的示例代码
Sep 09 Javascript
九种原生js动画效果
Nov 11 Javascript
EasyUI在表单提交之前进行验证的实例代码
Jun 24 Javascript
axios基本入门用法教程
Mar 25 Javascript
JS获取数组中出现次数最多及第二多元素的方法
Oct 27 Javascript
Angular2.0/4.0 使用Echarts图表的示例代码
Dec 07 Javascript
Vue Router 实现动态路由和常见问题及解决方法
Mar 06 Javascript
微信小程序换肤功能实现代码(思路详解)
Aug 25 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
基于mysql的论坛(3)
2006/10/09 PHP
php数组函数序列之asort() - 对数组的元素值进行升序排序,保持索引关系
2011/11/02 PHP
php 生成唯一id的几种解决方法
2013/03/08 PHP
PHP基于cookie与session统计网站访问量并输出显示的方法
2016/01/15 PHP
PHP 7.0新增加的特性介绍
2017/06/08 PHP
php自定义排序uasort函数示例【二维数组按指定键值排序】
2019/06/19 PHP
为数据添加append,remove功能
2006/10/03 Javascript
html数组字符串拼接的最快方法
2009/09/16 Javascript
jQuery插件windowScroll实现单屏滚动特效
2015/07/14 Javascript
jQuery图片渐变特效的简单实现
2016/06/25 Javascript
jQuery基础_入门必看知识点
2016/07/04 Javascript
JS匹配日期和时间的正则表达式示例
2017/05/12 Javascript
jQuery实现全选、反选和不选功能
2017/08/16 jQuery
深入浅析javascript继承体系
2017/10/23 Javascript
vue 使用eventBus实现同级组件的通讯
2018/03/02 Javascript
vue :src 文件路径错误问题的解决方法
2018/05/15 Javascript
vue项目中实现图片预览的公用组件功能
2018/10/26 Javascript
Vue源码探究之状态初始化
2018/11/14 Javascript
vue和better-scroll实现列表左右联动效果详解
2019/04/29 Javascript
IE11下处理Promise及Vue的单项数据流问题
2019/07/24 Javascript
layui添加动态菜单与选项卡
2019/07/26 Javascript
[00:29]2019完美世界全国高校联赛(秋季赛)总决赛海口落幕
2019/12/10 DOTA
Python里disconnect UDP套接字的方法
2015/04/23 Python
python实现图片变亮或者变暗的方法
2015/06/01 Python
Python2.7基于淘宝接口获取IP地址所在地理位置的方法【测试可用】
2017/06/07 Python
Python中函数eval和ast.literal_eval的区别详解
2017/08/10 Python
python XlsxWriter模块创建aexcel表格的实例讲解
2018/05/03 Python
python实现远程控制电脑
2019/05/23 Python
Python json格式化打印实现过程解析
2020/07/21 Python
经济实惠的豪华家具:My-Furniture
2019/03/12 全球购物
敏捷开发的主要原则都有哪些
2015/04/26 面试题
造价工程师个人求职信
2013/09/21 职场文书
电钳专业个人求职信
2014/01/04 职场文书
师说教学反思
2014/02/07 职场文书
CSS三大特性继承性、层叠性和优先级详解
2022/01/18 HTML / CSS
德生BCL3000抢先使用感受和评价
2022/04/07 无线电