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 相关文章推荐
JavaScript闭包 懂不懂由你反正我是懂了
Oct 21 Javascript
js模拟C#中List的简单实例
Mar 06 Javascript
JavaScript中实现sprintf、printf函数
Jan 27 Javascript
在HTML中插入JavaScript代码的示例
Jun 03 Javascript
使用基于Node.js的构建工具Grunt来发布ASP.NET MVC项目
Feb 15 Javascript
JS仿京东移动端手指拨动切换轮播图效果
Apr 10 Javascript
详解Angular的数据显示优化处理
Dec 26 Javascript
基于jQuery实现定位导航位置效果
Nov 15 jQuery
JavaScript对象拷贝与Object.assign用法实例分析
Jun 20 Javascript
vue中子组件传递数据给父组件的讲解
Jan 27 Javascript
微信小程序官方动态自定义底部tabBar的例子
Sep 04 Javascript
layui table去掉右侧滑动条的实现方法
Sep 05 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
全国FM电台频率大全 - 7 吉林省
2020/03/11 无线电
神族 Protoss 剧情介绍
2020/03/14 星际争霸
php中数字0和空值的区别分析
2014/06/05 PHP
Yii2.0中的COOKIE和SESSION用法
2016/08/12 PHP
关于 Laravel Redis 多个进程同时取队列问题详解
2017/12/25 PHP
php实现映射操作实例详解
2019/10/02 PHP
经典的解除许多网站无法复制文字的绝招
2006/12/31 Javascript
js tab 选项卡
2009/04/26 Javascript
node.js中的fs.mkdirSync方法使用说明
2014/12/17 Javascript
jquery中cookie用法实例详解(获取,存储,删除等)
2016/01/04 Javascript
基于jQuery实现Tabs选项卡自定义插件
2016/11/21 Javascript
基于jQuery实现表格的排序
2016/12/02 Javascript
清除浏览器缓存的几种方法总结(必看)
2016/12/09 Javascript
js获取元素的偏移量offset简单方法(必看)
2017/07/05 Javascript
react.js组件实现拖拽复制和可排序的示例代码
2018/08/20 Javascript
ES6知识点整理之数组解构和字符串解构的应用示例
2019/04/17 Javascript
vuex存取值和映射函数使用说明
2020/07/24 Javascript
vue router返回到指定的路由的场景分析
2020/11/10 Javascript
[06:44]2018DOTA2亚洲邀请赛4.5 SOLO赛 MidOne vs Sumail
2018/04/06 DOTA
python条件和循环的使用方法
2013/11/01 Python
使用C#配合ArcGIS Engine进行地理信息系统开发
2016/02/19 Python
Python中enumerate函数代码解析
2017/10/31 Python
理解python中生成器用法
2017/12/20 Python
python 爬虫一键爬取 淘宝天猫宝贝页面主图颜色图和详情图的教程
2018/05/22 Python
Python  Django 母版和继承解析
2019/08/09 Python
python word转pdf代码实例
2019/08/16 Python
基于python2.7实现图形密码生成器的实例代码
2019/11/05 Python
python -v 报错问题的解决方法
2020/09/15 Python
django跳转页面传参的实现
2020/09/17 Python
python+selenium实现12306模拟登录的步骤
2021/01/21 Python
Html5 new XMLHttpRequest()监听附件上传进度
2021/01/14 HTML / CSS
新学期决心书
2014/03/11 职场文书
个人求职自荐信范文
2014/06/20 职场文书
2014年精神文明工作总结
2014/12/23 职场文书
优秀教师个人总结
2015/02/11 职场文书
尼克胡哲观后感
2015/06/08 职场文书