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 相关文章推荐
js自定义方法通过隐藏iframe实现文件下载
Feb 21 Javascript
jQuery制作的别致导航有阴影背景高亮模式窗口
Apr 15 Javascript
上传图片预览JS脚本 Input file图片预览的实现示例
Oct 23 Javascript
JS实现动态给图片添加边框的方法
Apr 01 Javascript
关于javascript中dataset的问题小结
Nov 16 Javascript
BootStrap iCheck插件全选与获取value值的解决方法
Aug 24 Javascript
JS判断浏览器是否安装flash插件的简单方法
Sep 13 Javascript
Vue官网todoMVC示例代码
Jan 29 Javascript
详解Vue文档中几个易忽视部分的剖析
Mar 24 Javascript
详解一个小实例理解js原型和继承
Apr 24 Javascript
如何在微信小程序中存setStorage
Dec 13 Javascript
js实现跳一跳小游戏
Jul 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
PHP 数组入门教程小结
2009/05/20 PHP
PHP中使用unset销毁变量并内存释放问题
2012/07/05 PHP
从PHP $_SERVER相关参数判断是否支持Rewrite模块
2013/09/26 PHP
php Calender(日历)代码分享
2014/01/03 PHP
PHP include任意文件或URL介绍
2014/04/29 PHP
php模拟登陆的实现方法分析
2015/01/09 PHP
PHP将二维数组某一个字段相同的数组合并起来的方法
2016/02/26 PHP
PHP PDOStatement::fetch讲解
2019/01/31 PHP
php实现session共享的实例方法
2019/09/19 PHP
JavaScript入门教程(7) History历史对象
2009/01/31 Javascript
JavaScript下通过的XMLHttpRequest发送请求的代码
2011/06/28 Javascript
jquery动态添加删除div 具体实现
2013/07/20 Javascript
php常见的页面跳转方法汇总
2015/04/15 Javascript
javascript弹出拖动窗口
2015/08/11 Javascript
jQuery实现动态表单验证时文本框抖动效果完整实例
2015/08/21 Javascript
jQuery点击按钮弹出遮罩层且内容居中特效
2015/12/14 Javascript
js中window.open的参数及注意注意事项
2016/07/06 Javascript
javascript 中的继承实例详解
2017/05/05 Javascript
关于vue.extend和vue.component的区别浅析
2017/08/16 Javascript
Vue引入jquery实现平滑滚动到指定位置
2018/05/09 jQuery
webpack4 处理SCSS的方法示例
2018/09/03 Javascript
python将字符串转换成数组的方法
2015/04/29 Python
python进行两个表格对比的方法
2018/06/27 Python
Python实现的爬取小说爬虫功能示例
2019/03/30 Python
Python3内置模块pprint让打印比print更美观详解
2019/06/02 Python
Pycharm如何打断点的方法步骤
2019/06/13 Python
redis数据库及与python交互用法简单示例
2019/11/01 Python
Pytorch 搭建分类回归神经网络并用GPU进行加速的例子
2020/01/09 Python
python利用faker库批量生成测试数据
2020/10/15 Python
用HTML5的canvas实现一个炫酷时钟效果
2016/05/20 HTML / CSS
美国在线面料商店:Fashion Fabrics Club
2020/01/31 全球购物
给学校的建议书
2014/03/12 职场文书
工程建设实施方案
2014/03/14 职场文书
2015年感恩母亲节的演讲稿
2015/03/18 职场文书
2015年乡镇信访工作总结
2015/04/07 职场文书
spring boot中nativeQuery的用法
2021/07/26 Java/Android