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过滤数组重复元素的方法
Sep 05 Javascript
JS动态调用方法名示例介绍
Dec 18 Javascript
用js将内容复制到剪贴板兼容浏览器
Mar 18 Javascript
jQuery ztree实现动态树形多选菜单
Aug 12 Javascript
jQuery 获取遍历获取table中每一个tr中的第一个td的方法
Oct 05 Javascript
简单谈谈JS中的正则表达式
Sep 11 Javascript
jQuery EasyUI 折叠面板accordion的使用实例(分享)
Dec 25 jQuery
使用Angular-CLI构建NPM包的方法
Sep 07 Javascript
JS实现根据数组对象的某一属性排序操作示例
Jan 14 Javascript
使用Node.js实现一个多人游戏服务器引擎
Mar 13 Javascript
浅谈react-router@4.0 使用方法和源码分析
Jun 04 Javascript
Javascript Symbol原理及使用方法解析
Oct 22 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
ThinkPHP分页类使用详解
2014/03/05 PHP
PHP的变量类型和作用域详解
2014/03/12 PHP
完美解决在ThinkPHP控制器中命名空间的问题
2017/05/05 PHP
PHP实现的超长文本分页显示功能示例
2018/06/04 PHP
JavaScript中的事件处理
2008/01/16 Javascript
JavaScript 原型继承
2011/12/26 Javascript
javascript正则表达式中的replace方法详解
2015/04/20 Javascript
jquery实现带缩略图的全屏图片画廊效果实例
2015/06/25 Javascript
js淡入淡出焦点图幻灯片效果代码分享
2015/09/08 Javascript
轻松实现javascript数据双向绑定
2015/11/11 Javascript
Vue.js每天必学之过滤器与自定义过滤器
2016/09/07 Javascript
详解Angularjs 如何自定义Img的ng-load 事件
2017/02/15 Javascript
Mac 安装 nodejs方法(图文详细步骤)
2017/10/30 NodeJs
Vue.js的动态组件模板的实现
2018/11/26 Javascript
使用form-create动态生成vue自定义组件和嵌套表单组件
2019/01/18 Javascript
vue2.0自定义指令示例代码详解
2019/04/25 Javascript
vue-test-utils初使用详解
2019/05/23 Javascript
Pycharm编辑器技巧之自动导入模块详解
2017/07/18 Python
Python数据可视化正态分布简单分析及实现代码
2017/12/04 Python
对Tensorflow中权值和feature map的可视化详解
2018/06/14 Python
python实现人民币大写转换
2018/06/20 Python
Python函数的参数常见分类与用法实例详解
2019/03/30 Python
通过PHP与Python代码对比的语法差异详解
2019/07/10 Python
scrapy利用selenium爬取豆瓣阅读的全步骤
2020/09/20 Python
利用python+ffmpeg合并B站视频及格式转换的实例代码
2020/11/24 Python
python通用数据库操作工具 pydbclib的使用简介
2020/12/21 Python
科尔士百货公司官网:Kohl’s
2016/07/11 全球购物
中国领先的专业家电网购平台:国美在线
2016/12/25 全球购物
波兰在线运动商店:YesSport
2020/07/23 全球购物
高中毕业自我鉴定
2013/12/22 职场文书
党的群众路线教育实践活动批评与自我批评
2014/02/16 职场文书
参观接待方案
2014/03/17 职场文书
党组织领导班子整改方案
2014/10/25 职场文书
教代会开幕词
2015/01/28 职场文书
Python爬虫实战之爬取携程评论
2021/06/02 Python
JavaScript异步操作中串行和并行
2021/11/20 Javascript