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 相关文章推荐
$(&quot;&quot;).click与onclick的区别示例介绍
Sep 25 Javascript
jQuery实现dialog设置focus焦点的方法
Jun 10 Javascript
jQuery编程中的一些核心方法简介
Aug 14 Javascript
Vue.js基础知识汇总
Apr 27 Javascript
基于jQuery插件实现点击小图显示大图效果
May 11 Javascript
jQuery+CSS实现简单切换菜单示例
Jul 27 Javascript
jQuery属性选择器用法示例
Sep 09 Javascript
再谈javascript注入 黑客必备!
Sep 14 Javascript
基于JavaScript实现自动更新倒计时效果
Dec 19 Javascript
通过jquery获取上传文件名称、类型和大小的实现代码
Apr 19 jQuery
小程序实现单选多选功能
Nov 04 Javascript
详解实现一个通用的“划词高亮”在线笔记功能
Apr 23 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 sprintf()函数让你的sql操作更安全
2008/07/23 PHP
php实现文件下载功能的几个代码分享
2014/05/10 PHP
phpstorm配置Xdebug进行调试PHP教程
2014/12/01 PHP
Laravel 5框架学习之表单
2015/04/08 PHP
js parseInt(&quot;08&quot;)未指定进位制问题
2010/06/19 Javascript
基于json的jquery地区联动效果代码
2011/07/06 Javascript
通过JS来动态的修改url,实现对url的增删查改
2014/09/01 Javascript
js监听鼠标点击和键盘点击事件并自动跳转页面
2014/09/24 Javascript
Javascript解析URL方法详解
2014/12/05 Javascript
ECMAScript6新增值比较函数Object.is
2015/06/12 Javascript
JavaScript中innerHTML,innerText,outerHTML的用法及区别
2015/09/01 Javascript
ES6中非常实用的新特性介绍
2016/03/10 Javascript
JavaScript预解析及相关技巧分析
2016/04/21 Javascript
Google Maps基础及实例解析
2016/08/06 Javascript
vue.js层叠轮播效果的实例代码
2018/11/08 Javascript
Vue自定义render统一项目组弹框功能
2020/06/07 Javascript
python使用PythonMagick将jpg图片转换成ico图片的方法
2015/03/26 Python
Python IDLE入门简介
2017/12/08 Python
解决Python print输出不换行没空格的问题
2018/11/14 Python
Linux上使用Python统计每天的键盘输入次数
2019/04/17 Python
pandas 层次化索引的实现方法
2019/07/06 Python
Python用input输入列表的实例代码
2020/02/07 Python
详解Python3中的 input() 函数
2020/03/18 Python
解决matplotlib.pyplot在Jupyter notebook中不显示图像问题
2020/04/22 Python
Python实现定时监测网站运行状态的示例代码
2020/09/30 Python
英国顶尖手表珠宝品牌独家授权经销商:HS Johnson
2020/10/28 全球购物
班组长的岗位职责
2013/12/09 职场文书
建筑专业自荐信范文
2014/01/05 职场文书
微博营销计划书
2014/01/10 职场文书
货物运输服务质量承诺书
2014/05/29 职场文书
售后服务承诺函格式
2015/01/21 职场文书
2015年毕业生自荐信范文
2015/03/24 职场文书
二十年同学聚会感言
2015/07/30 职场文书
中学音乐课教学反思
2016/02/18 职场文书
用golang如何替换某个文件中的字符串
2021/04/25 Golang
Github 使用python对copilot做些简单使用测试
2022/04/14 Python