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 相关文章推荐
地震发生中逃生十大法则
May 12 Javascript
jQuery获取地址栏参数插件(模仿C#)
Oct 26 Javascript
jquery快捷动态绑定键盘事件的操作函数代码
Oct 17 Javascript
JavaScript的setAttribute兼容性问题解决方法
Nov 11 Javascript
重写document.write实现无阻塞加载js广告(补充)
Dec 12 Javascript
JS实现的表格行鼠标点击高亮效果代码
Nov 27 Javascript
Javascript基于对象三大特性(封装性、继承性、多态性)
Jan 04 Javascript
Javascript中this绑定的3种方法与比较
Oct 13 Javascript
Vue.js学习之计算属性
Jan 22 Javascript
浅谈PDF.js使用心得
Jun 07 Javascript
详解webpack编译速度提升之DllPlugin
Feb 05 Javascript
vue实现lodop打印功能的示例
Nov 11 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
自制汽车收音机天线:收听广播的技巧和方法
2021/03/02 无线电
PHP实现用户认证及管理完全源码
2007/03/11 PHP
PHP文件上传原理简单分析
2011/05/29 PHP
php下载文件的代码示例
2012/06/29 PHP
PHP远程调试之XDEBUG
2015/12/29 PHP
Yaf框架封装的MySQL数据库操作示例
2019/03/06 PHP
jquery 弹出登录窗口实现代码
2009/12/24 Javascript
javascript eval和JSON之间的联系
2009/12/31 Javascript
JavaScript异步回调的Promise模式封装实例
2014/06/07 Javascript
用Jquery.load载入页面后样式没了页面混乱的解决方法
2014/10/20 Javascript
jQuery实现的网页竖向菜单效果代码
2015/08/26 Javascript
Node.js静态文件服务器改进版
2016/01/10 Javascript
JS实现图片平面旋转的方法
2016/03/01 Javascript
浅析jquery与checkbox的checked属性的问题
2016/04/27 Javascript
javascript中JSON.parse()与eval()解析json的区别
2016/05/19 Javascript
微信小程序 form组件详解
2016/10/25 Javascript
详解Vue2+Echarts实现多种图表数据可视化Dashboard(附源码)
2017/03/21 Javascript
原生JavaScript实现精美的淘宝轮播图效果示例【附demo源码下载】
2017/05/27 Javascript
BootStrap下的弹出框加载select2框架失败的解决方法
2017/08/31 Javascript
在vue组件中使用axios的方法
2018/03/16 Javascript
vue修改Element的el-table样式的4种方法
2020/09/17 Javascript
[43:03]LGD vs Newbee 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
使用Eclipse如何开发python脚本
2018/04/11 Python
Python的argparse库使用详解
2018/10/09 Python
Django admin 实现search_fields精确查询实例
2020/03/30 Python
解决keras模型保存h5文件提示无此目录问题
2020/07/01 Python
基于html和CSS3制作酷炫的导航栏
2015/09/23 HTML / CSS
英国知名的皮手套品牌:Dents
2016/11/13 全球购物
Shopee马来西亚:随拍即卖,最佳行动电商拍卖平台
2017/06/05 全球购物
Ryderwear美国官网:澳大利亚高端健身训练装备品牌
2018/04/24 全球购物
英国在线药房和在线医生:LloydsPharmacy
2019/10/21 全球购物
《石榴》教学反思
2014/03/02 职场文书
工业设计专业自荐书
2014/06/05 职场文书
使用pytorch实现线性回归
2021/04/11 Python
分析MySQL抛出异常的几种常见解决方式
2021/05/18 MySQL
Nginx 匹配方式
2022/05/15 Servers