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 相关文章推荐
摘自百度的图片轮换效果代码
Nov 19 Javascript
JavaScript表达式:URL 协议介绍
Mar 10 Javascript
js如何设置在iframe框架中指定div不显示
Dec 04 Javascript
checkbox全选所涉及到的知识点介绍
Dec 31 Javascript
JavaScript SHA1加密算法实现详细代码
Oct 06 Javascript
javascript实现根据函数名称字符串动态执行函数的方法示例
Dec 28 Javascript
激动人心的 Angular HttpClient的源码解析
Jul 10 Javascript
Vuex 使用 v-model 配合 state的方法
Nov 13 Javascript
vue2 拖动排序 vuedraggable组件的实现
Aug 08 Javascript
jQuery实现判断滚动条滚动到document底部的方法分析
Aug 27 jQuery
vue项目启动出现cannot GET /服务错误的解决方法
Apr 26 Javascript
vue-cli3.x配置全局的scss的时候报错问题及解决
Apr 30 Vue.js
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文件注释标记及规范小结
2012/04/01 PHP
IIS安装Apache伪静态插件的具体操作图文
2013/07/01 PHP
ThinkPHP表单自动提交验证实例教程
2014/07/18 PHP
Yii实现复选框批量操作实例代码
2017/03/15 PHP
Lumen timezone 时区设置方法(慢了8个小时)
2018/01/20 PHP
angular.foreach 循环方法使用指南
2015/01/06 Javascript
NodeJs基本语法和类型
2015/02/13 NodeJs
JavaScript设计模式学习之“类式继承”
2015/03/12 Javascript
JavaScript实现删除,移动和复制文件的方法
2015/08/05 Javascript
JS实现的Select三级下拉菜单代码
2015/08/20 Javascript
canvas 实现中国象棋
2017/02/17 Javascript
浅谈JavaScript中的apply/call/bind和this的使用
2017/02/26 Javascript
JS实现搜索关键词的智能提示功能
2017/07/07 Javascript
浅析JavaScript中的平稳退化(graceful degradation)
2017/07/24 Javascript
Javascript实现跨域后台设置拦截的方法详解
2017/08/04 Javascript
Angular2.0/4.0 使用Echarts图表的示例代码
2017/12/07 Javascript
angular 用Observable实现异步调用的方法
2018/12/27 Javascript
JavaScript中继承原理与用法实例入门
2020/05/09 Javascript
python检测服务器是否正常
2014/02/16 Python
Python实现朴素贝叶斯的学习与分类过程解析
2019/08/24 Python
学习Django知识点分享
2019/09/11 Python
django Layui界面点击弹出对话框并请求逻辑生成分页的动态表格实例
2020/05/12 Python
keras用auc做metrics以及早停实例
2020/07/02 Python
python 获取字典特定值对应的键的实现
2020/09/29 Python
Python 2.6.6升级到Python2.7.15的详细步骤
2020/12/14 Python
为什么说Ruby是一种真正的面向对象程序设计语言
2012/10/30 面试题
音乐学院硕士生的自我评价分享
2013/11/01 职场文书
运动会稿件200字
2014/02/07 职场文书
元旦晚会主持词
2014/03/24 职场文书
机械系毕业生求职信
2014/05/28 职场文书
上课说话检讨书500字
2014/11/01 职场文书
投标单位介绍信
2015/05/05 职场文书
cf战队宣传语
2015/07/13 职场文书
分析设计模式之模板方法Java实现
2021/06/23 Java/Android
Python通过loop.run_in_executor执行同步代码 同步变为异步
2022/04/11 Python
Nginx使用ngx_http_upstream_module实现负载均衡功能示例
2022/08/05 Servers