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 相关文章推荐
document.getElementById方法在Firefox与IE中的区别
May 18 Javascript
js的2种继承方式详解
Mar 04 Javascript
一个简单的jquery进度条示例
Apr 28 Javascript
php和js对数据库图片进行等比缩放示例
Apr 28 Javascript
js数组去重的5种算法实现
Nov 04 Javascript
node.js实现爬虫教程
Aug 25 Javascript
canvas 弹幕效果(实例分享)
Jan 11 Javascript
vue+webpack 打包文件 404 页面空白的解决方法
Feb 28 Javascript
Node.js readline 逐行读取、写入文件内容的示例
Mar 01 Javascript
详解vscode中vue代码颜色插件
Oct 11 Javascript
详解vue如何使用rules对表单字段进行校验
Oct 17 Javascript
解决antd 下拉框 input [defaultValue] 的值的问题
Oct 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
关于Zend Studio 配色方案插件的介绍
2013/06/24 PHP
php的mkdir()函数创建文件夹比较安全的权限设置方法
2014/07/28 PHP
php readfile下载大文件失败的解决方法
2017/05/22 PHP
PHP预定义超全局数组变量小结
2018/08/20 PHP
解决laravel5中auth用户登录其他页面获取不到登录信息的问题
2019/10/08 PHP
jquery.combobox中文api和例子,修复了上面的小bug
2011/03/28 Javascript
关于window.pageYOffset和document.documentElement.scrollTop
2011/04/05 Javascript
javascript history对象(历史记录)使用方法(实现浏览器前进后退)
2014/01/07 Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
2014/09/04 Javascript
理解Javascript图片预加载
2016/02/23 Javascript
Node.js中process模块常用的属性和方法
2016/12/13 Javascript
详解能在多种前端框架下使用的表格控件
2017/01/11 Javascript
jquery DataTable实现前后台动态分页
2017/06/17 jQuery
axios进阶实践之利用最优雅的方式写ajax请求
2017/12/20 Javascript
使用NestJS开发Node.js应用的方法
2018/12/03 Javascript
vue实现的树形结构加多选框示例
2019/02/02 Javascript
详解JavaScript的数据类型以及数据类型的转换
2019/04/20 Javascript
详解ng-alain动态表单SF表单项设置必填和正则校验
2019/06/11 Javascript
ES6函数实现排它两种写法解析
2020/05/13 Javascript
Vue 使用iframe引用html页面实现vue和html页面方法的调用操作
2020/11/16 Javascript
Python StringIO模块实现在内存缓冲区中读写数据
2015/04/08 Python
pyenv命令管理多个Python版本
2017/03/26 Python
Python中Qslider控件实操详解
2021/02/20 Python
优衣库台湾官网:UNIQLO台湾
2019/02/01 全球购物
俄罗斯购买剧院和演唱会门票网站:Parter.ru
2019/11/09 全球购物
爱尔兰旅游网站:ebookers.ie
2020/01/24 全球购物
某公司C#程序员面试题笔试题
2014/05/26 面试题
运动会800米加油稿
2014/02/22 职场文书
李敖北大演讲稿
2014/05/24 职场文书
预备党员综合考察材料
2014/05/31 职场文书
单位工作证明格式模板
2014/10/04 职场文书
工程技术员岗位职责
2015/04/11 职场文书
投诉书格式范本
2015/07/02 职场文书
大学学习委员竞选稿
2015/11/20 职场文书
2019年入党思想汇报
2019/03/25 职场文书
delete in子查询不走索引问题分析
2022/07/07 MySQL