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 相关文章推荐
jquery、js调用iframe父窗口与子窗口元素的方法整理
Jul 31 Javascript
深入理解JavaScript系列(35):设计模式之迭代器模式详解
Mar 03 Javascript
js实现prototype扩展的方法(字符串,日期,数组扩展)
Jan 14 Javascript
jQuery插件ImageDrawer.js实现动态绘制图片动画(附源码下载)
Feb 25 Javascript
第一章之初识Bootstrap
Apr 25 Javascript
AngularJS下对数组的对比分析
Aug 24 Javascript
js 获取今天以及过去日期
Apr 11 Javascript
vue的基本用法与常见指令
Aug 15 Javascript
详解PHP后期静态绑定分析与应用
Mar 21 Javascript
基于Vue实现微信小程序的图文编辑器
Jul 25 Javascript
vue中的过滤器及其时间格式化问题
Apr 09 Javascript
vue webpack build资源相对路径的问题及解决方法
Jun 04 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匿名函数和闭包
2019/03/08 PHP
js event事件的传递与冒泡处理
2009/12/06 Javascript
js新闻滚动 js如何实现新闻滚动效果
2013/01/07 Javascript
jquery定时滑出可最小化的底部提示层特效代码
2013/10/02 Javascript
如何学习Javascript入门指导
2013/11/01 Javascript
jQuery中$.ajax()和$.getJson()同步处理详解
2015/08/12 Javascript
微信小程序 教程之事件
2016/10/18 Javascript
详解angularJs指令的3种绑定策略
2017/04/13 Javascript
vue动态路由实现多级嵌套面包屑的思路与方法
2017/08/16 Javascript
AngularJS实时获取并显示密码的方法
2018/02/06 Javascript
Angular项目如何升级至Angular6步骤全纪录
2018/09/03 Javascript
JavaScript中构造函数与原型链之间的关系详解
2019/02/25 Javascript
js禁止查看源文件屏蔽Ctrl+u/s、F12、右键等兼容IE火狐chrome
2020/10/01 Javascript
基于JavaScript实现简单抽奖功能代码实例
2020/10/20 Javascript
JS实现手风琴特效
2020/11/08 Javascript
JS模拟实现京东快递单号查询
2020/11/30 Javascript
浅谈Vue使用Elementui修改默认的最快方法
2020/12/05 Vue.js
[01:28:43]2014 DOTA2华西杯精英邀请赛5 24 DK VS CIS
2014/05/25 DOTA
[02:33]2014DOTA2 TI每日综述 LGD涉险晋级DK闯入胜者组
2014/07/14 DOTA
python绘图库Matplotlib的安装
2014/07/03 Python
基于Python实现的扫雷游戏实例代码
2014/08/01 Python
Python3读取UTF-8文件及统计文件行数的方法
2015/05/22 Python
Python线程详解
2015/06/24 Python
快速了解python leveldb
2018/01/18 Python
Python异常处理知识点总结
2019/02/18 Python
CSS3只让背景图片旋转180度的实现示例
2021/03/09 HTML / CSS
ASP.NET中的身份验证有那些
2012/07/13 面试题
大学生就业推荐信范文
2013/11/29 职场文书
2014年幼儿园重阳节活动方案
2014/09/16 职场文书
学年个人总结范文
2015/03/05 职场文书
银行求职信模板
2015/03/20 职场文书
大学生社会实践活动总结报告
2015/05/06 职场文书
高三数学复习备考教学反思
2016/02/18 职场文书
大学生创业,为什么都会选择快餐饮?
2019/08/08 职场文书
常用的MongoDB查询语句的示例代码
2021/07/25 MongoDB
Linux中sftp常用命令整理
2022/06/28 Servers