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 相关文章推荐
Javascript面向对象编程
Mar 18 Javascript
自己实现string的substring方法 人民币小写转大写,数字反转,正则优化
Sep 02 Javascript
用Jquery重写windows.alert方法实现思路
Apr 03 Javascript
JavaScript的事件代理和委托实例分析
Mar 25 Javascript
JavaScript中reduce()方法的使用详解
Jun 09 Javascript
jQuery实现文件上传进度条特效
Aug 12 Javascript
jQuery简单实现input文本框内灰色提示文本效果的方法
Dec 02 Javascript
JavaScript中使用数组方法汇总
Feb 16 Javascript
jquery获取复选框的值的简单实例
May 26 Javascript
JavaScript类型系统之布尔Boolean类型详解
Jun 26 Javascript
JS中判断字符串存在和非空的方法
Sep 12 Javascript
Vue3 响应式侦听与计算的实现
Nov 11 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程序员编程注意事项
2008/04/10 PHP
基于php常用函数总结(数组,字符串,时间,文件操作)
2013/06/27 PHP
THINKPHP支持YAML配置文件的设置方法
2015/03/17 PHP
PHP预定义变量9大超全局数组用法详解
2016/04/23 PHP
Yii2中如何使用modal弹窗(基本使用)
2016/05/30 PHP
PHP new static 和 new self详解
2017/02/19 PHP
Windows平台实现PHP连接SQL Server2008的方法
2017/07/26 PHP
如何让动态插入的javascript脚本代码跑起来。
2007/01/09 Javascript
js 文本滚动效果的实例代码
2013/08/17 Javascript
只需一行代码,轻松实现一个在线编辑器
2013/11/12 Javascript
JQuery中使用Ajax赋值给全局变量失败异常的解决方法
2014/08/18 Javascript
简单谈谈javascript中this的隐式绑定
2016/02/22 Javascript
概述jQuery中的ajax方法
2016/12/16 Javascript
jQuery动态生成表格及右键菜单功能示例
2017/01/13 Javascript
js/jquery控制页面动态加载数据 滑动滚动条自动加载事件的方法
2017/02/08 Javascript
bootstrap weebox 支持ajax的模态弹出框
2017/02/23 Javascript
深入学习JavaScript 高阶函数
2019/06/11 Javascript
vue+render+jsx实现可编辑动态多级表头table的实例代码
2020/04/01 Javascript
python实现udp数据报传输的方法
2014/09/26 Python
Python实现发送QQ邮件的封装
2017/07/14 Python
python抓取搜狗微信公众号文章
2019/04/01 Python
python 列表推导式使用详解
2019/08/29 Python
python中def是做什么的
2020/06/10 Python
Python 抓取数据存储到Redis中的操作
2020/07/16 Python
Python常用外部指令执行代码实例
2020/11/05 Python
基于注解实现 SpringBoot 接口防刷的方法
2021/03/02 Python
英国度假别墅预订:Sykes Cottages
2017/06/12 全球购物
蜜蜂引路教学反思
2014/02/04 职场文书
协议书的格式
2014/04/23 职场文书
奥巴马上海演讲稿
2014/09/10 职场文书
领导班子四风查摆对照检查材料思想汇报
2014/10/05 职场文书
微观世界观后感
2015/06/10 职场文书
2015初中团委工作总结
2015/07/28 职场文书
2016教师年度考核评语大全
2015/12/01 职场文书
导游词之平津战役纪念馆
2019/11/04 职场文书
python 逐步回归算法
2021/04/06 Python