js 立即调用的函数表达式如何写


Posted in Javascript onJanuary 12, 2014

如果不需要显示调用函数, 让这个函数在定义的时候就执行的话, 该如何写才可以呢,接下来将详细介绍实现步骤,感兴趣的朋友可以了解下

1.前言
函数需要先定义,后使用。 这基本上所有编程语言的一条铁的定律。
一般状况下, 我们需要调用一个JavaScript 函数, 基本的状况都是先定义, 然后再调用。 看一个例子
代码如下:

<!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动态删除div元素基本思路及实现代码
May 08 Javascript
JS实现动态给图片添加边框的方法
Apr 01 Javascript
setTimeout内不支持jquery的选择器的解决方案
Apr 28 Javascript
JavaScript记录光标在编辑器中位置的实现方法
Apr 22 Javascript
Node.js Addons翻译(C/C++扩展)
Jun 12 Javascript
JavaScript实现翻页功能(附效果图)
Feb 16 Javascript
vue货币过滤器的实现方法
Apr 01 Javascript
浅谈struts1 &amp; jquery form 文件异步上传
May 25 jQuery
Angularjs添加排序查询功能的实例代码
Oct 24 Javascript
使用vue-cli导入Element UI组件的方法
May 16 Javascript
详解webpack打包后如何调试的方法步骤
Nov 07 Javascript
vue实现输入框自动跳转功能
May 20 Javascript
IE的事件传递-event.cancelBubble示例介绍
Jan 12 #Javascript
Javascript实现带关闭按钮的网页漂浮广告代码
Jan 12 #Javascript
jquery toolbar与网页浮动工具条具体实现代码
Jan 12 #Javascript
jQuery在iframe中无法弹出对话框的解决方法
Jan 12 #Javascript
js弹窗返回值详解(window.open方式)
Jan 11 #Javascript
JS中表单的使用小结
Jan 11 #Javascript
js opener的使用详解
Jan 11 #Javascript
You might like
php出现Cannot modify header information问题的解决方法大全
2008/04/09 PHP
php+mysqli事务控制实现银行转账实例
2015/01/29 PHP
Yii2――使用数据库操作汇总(增删查改、事务)
2016/12/19 PHP
PHP实现更改hosts文件的方法示例
2017/08/08 PHP
PhpStorm 如何优雅的调试Hyperf的方法步骤
2019/11/24 PHP
Javascript+XMLHttpRequest+asp.net无刷新读取数据库数据
2009/08/09 Javascript
JavaScript生成SQL查询表单的方法
2015/08/13 Javascript
jQuery mobile 移动web(6)
2015/12/20 Javascript
vue2.0父子组件及非父子组件之间的通信方法
2017/01/21 Javascript
javascript 中设置window.location.href跳转无效问题解决办法
2017/02/09 Javascript
原生js实现日期计算器功能
2017/02/17 Javascript
Bootstrap缩略图的创建方法
2017/03/22 Javascript
JS实现前端页面的搜索功能
2018/06/12 Javascript
vue-cli2.x项目优化之引入本地静态库文件的方法
2018/06/19 Javascript
Vue监听事件实现计数点击依次增加的方法
2018/09/26 Javascript
js canvas实现写字动画效果
2018/11/30 Javascript
实例详解vue中的$root和$parent
2019/04/29 Javascript
layui表单验证select下拉框实现验证的方法
2019/09/05 Javascript
vue 实现单选框设置默认选中值
2019/11/07 Javascript
Javascript地址引用代码实例解析
2020/02/25 Javascript
解决vue侦听器watch,调用this时出现undefined的问题
2020/10/30 Javascript
[01:34]2014DOTA2 TI预选赛预选赛 选手比赛房大揭秘!
2014/05/20 DOTA
[01:45]2014DOTA2 TI预选赛预选赛 大神专访第二弹!
2014/05/20 DOTA
Python3写入文件常用方法实例分析
2015/05/22 Python
python 使用xlsxwriter循环向excel中插入数据和图片的操作
2021/01/01 Python
HTML5 Canvas概述
2009/08/26 HTML / CSS
html5基础标签(html5视频标签 html5新标签用法)
2013/12/30 HTML / CSS
阿联酋航空官方网站:Emirates
2017/10/17 全球购物
Derek Rose官网:英国高档睡衣、家居服和内衣品牌
2020/01/18 全球购物
新加坡最早生产电动滑板车的制造商之一:FunsToTheFore
2020/09/08 全球购物
本科生职业生涯规划书范文
2014/01/21 职场文书
经典婚礼主持开场白
2014/03/13 职场文书
六年级学生评语
2014/04/22 职场文书
高中生国庆节演讲稿范文2014
2014/09/21 职场文书
2014年环境卫生工作总结
2014/11/24 职场文书
幼儿园小班教师随笔
2015/08/14 职场文书