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获得地址栏参数的两种方法
Nov 08 Javascript
为javascript添加String.Format方法
Aug 11 Javascript
JQuyer $.post 与 $.ajax 访问WCF ajax service 时的问题需要注意的地方
Sep 20 Javascript
javascript获得网页窗口实际大小的示例代码
Sep 21 Javascript
使用javascript插入样式
Mar 14 Javascript
Js获取当前日期时间及格式化代码
Sep 17 Javascript
老生常谈angularjs中的$state.go
Apr 24 Javascript
简单实现js进度条加载效果
Mar 25 Javascript
vuex state及mapState的基础用法详解
Apr 19 Javascript
jQuery实现每隔一段时间自动更换样式的方法分析
May 03 jQuery
vue-router判断页面未登录自动跳转到登录页的方法示例
Nov 04 Javascript
layui点击弹框页面 表单请求的方法
Sep 21 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 Undefined index报错的修复方法
2011/07/17 PHP
php断点续传之如何分割合并文件
2014/03/22 PHP
php面向对象的用户登录身份验证
2017/06/08 PHP
Laravel 连接(Join)示例
2019/10/16 PHP
laravel框架中表单请求类型和CSRF防护实例分析
2019/11/23 PHP
js的闭包的一个示例说明
2008/11/18 Javascript
JavaScript中的16进制字符(改进)
2011/11/21 Javascript
Jquery中&quot;$(document).ready(function(){ })&quot;函数的使用详解
2013/12/30 Javascript
jQuery通过Ajax返回JSON数据
2015/04/28 Javascript
Linux下为Node.js程序配置MySQL或Oracle数据库的方法
2016/03/19 Javascript
浅谈JavaScript函数的四种存在形态
2016/06/08 Javascript
解决bootstrap导航栏navbar在IE8上存在缺陷的方法
2016/07/01 Javascript
JavaScript常用代码书写规范的超全面总结
2016/09/11 Javascript
Angular-Touch库用法示例
2016/12/22 Javascript
网页中右键功能的实现方法之contextMenu的使用
2017/02/20 Javascript
纯js实现图片匀速淡入淡出效果
2017/08/22 Javascript
Vue列表渲染的示例代码
2018/11/01 Javascript
微信小程序下拉加载和上拉刷新两种实现方法详解
2019/09/05 Javascript
[02:53]DOTA2英雄昆卡基础教程
2013/11/25 DOTA
[02:33]2014DOTA2 TI每日综述 LGD涉险晋级DK闯入胜者组
2014/07/14 DOTA
Python创建系统目录的方法
2015/03/11 Python
python通过get,post方式发送http请求和接收http响应的方法
2015/05/26 Python
解决python中无法自动补全代码的问题
2018/12/04 Python
python 搭建简单的http server,可直接post文件的实例
2019/01/03 Python
Python模块的加载讲解
2019/01/15 Python
Python with标签使用方法解析
2020/01/17 Python
Python基于smtplib协议实现发送邮件
2020/06/03 Python
美国职棒大联盟官方网上商店:MLBShop.com
2017/11/12 全球购物
世界上最大的罕见唱片、CD和音乐纪念品网上商店:991.com
2018/05/03 全球购物
C++如何引用一个已经定义过的全局变量
2014/08/25 面试题
单位领导证婚词
2014/01/14 职场文书
中班上学期个人总结
2015/02/12 职场文书
就业意向书范本
2015/05/11 职场文书
Golang 链表的学习和使用
2022/04/19 Golang
MySQL 逻辑备份 into outfile
2022/05/15 MySQL
Vue3实现简易音乐播放器组件
2022/08/14 Vue.js