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 相关文章推荐
IE与Firefox在JavaScript上的7个不同写法小结
Sep 14 Javascript
JS拖拽插件实现步骤
Aug 03 Javascript
JS文字球状放大效果代码分享
Aug 19 Javascript
jQuery实现可以控制图片旋转角度效果(附demo源码下载)
Jan 27 Javascript
JavaScript编写检测用户所使用的浏览器的代码示例
May 05 Javascript
jQuery页面元素动态添加后绑定事件丢失方法,非 live
Jun 16 Javascript
用jquery的attr方法实现图片切换效果
Feb 05 Javascript
vue组件实现文字居中对齐的方法
Aug 23 Javascript
JS鼠标3次点击事件实现代码及扩展思路
Sep 12 Javascript
浅谈Vue.nextTick 的实现方法
Oct 25 Javascript
详解Vue.js在页面加载时执行某个方法
Nov 20 Javascript
React中使用外部样式的3种方式(小结)
May 28 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中过滤非法字符的具体实现
2013/10/29 PHP
PHP正则表达式匹配替换与分割功能实例浅析
2017/02/04 PHP
基于swoole实现多人聊天室
2018/06/14 PHP
浅谈PHP中的Trait使用方法
2019/03/22 PHP
javascript学习笔记(六) Date 日期类型
2012/06/19 Javascript
jQuery学习笔记 操作jQuery对象 CSS处理
2012/09/19 Javascript
12行javascript代码绘制一个八卦图
2015/04/02 Javascript
JavaScript中的Number数字类型学习笔记
2016/05/26 Javascript
javascript基础知识
2016/06/07 Javascript
bootstrap日历插件datetimepicker使用方法
2016/12/14 Javascript
详解Node全局变量global模块
2017/09/28 Javascript
JS正则表达式常见用法实例详解
2018/06/19 Javascript
Nodejs中怎么实现函数的串行执行
2019/03/02 NodeJs
详解JavaScript栈内存与堆内存
2019/04/04 Javascript
微信自定义分享链接信息(标题,图片和内容)实现过程详解
2019/09/04 Javascript
Vue切换div显示隐藏,多选,单选代码解析
2020/07/14 Javascript
[05:31]DOTA2英雄梦之声_第08期_莉娜
2014/06/23 DOTA
[02:59]DOTA2完美大师赛主赛事第三日精彩集锦
2017/11/25 DOTA
[49:31]TFT vs Mski Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
400多行Python代码实现了一个FTP服务器
2012/05/10 Python
Python的ORM框架SQLAlchemy入门教程
2014/04/28 Python
Python实现线程状态监测简单示例
2018/03/28 Python
Python2和3字符编码的区别知识点整理
2019/08/08 Python
python正则爬取某段子网站前20页段子(request库)过程解析
2019/08/10 Python
浅析pandas随机排列与随机抽样
2021/01/22 Python
python压包的概念及实例详解
2021/02/17 Python
美国折扣宠物药房:Total Pet Supply
2018/05/27 全球购物
在印度上传处方,在线订购药品:Medlife
2019/03/28 全球购物
工商管理本科毕业生求职信范文
2013/10/05 职场文书
会议邀请函范文
2014/01/09 职场文书
《桥》教学反思
2014/04/09 职场文书
通信工程求职信
2014/07/16 职场文书
廉洁自律承诺书2015
2015/01/22 职场文书
2015年十一国庆节演讲稿
2015/03/20 职场文书
幼儿园教师师德师风承诺书
2015/04/28 职场文书
一文搞懂python异常处理、模块与包
2021/06/26 Python