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 继承实例分析
Nov 04 Javascript
jQuery 使用手册(六)
Sep 23 Javascript
url地址自动加#号问题说明
Aug 21 Javascript
js对数字的格式化使用说明
Jan 12 Javascript
jquery动画2.元素坐标动画效果(创建一个图片走廊)
Aug 24 Javascript
简单方法判断JavaScript对象为null或者属性为空
Sep 26 Javascript
js阻止事件追加的具体实现
Oct 15 Javascript
jQuery实现DIV层淡入淡出拖动特效的方法
Feb 13 Javascript
全面解析Bootstrap表单使用方法(表单样式)
Nov 24 Javascript
基于Proxy的小程序状态管理实现
Jun 14 Javascript
浅谈vue 多个变量同时赋相同值互相影响
Aug 05 Javascript
Vue实现小购物车功能
Dec 21 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获取音频文件的相关信息
2015/06/22 PHP
PHP数组相加操作及与array_merge的区别浅析
2016/11/26 PHP
利用PHP获取汉字首字母并且分组排序详解
2017/10/22 PHP
javascript之可拖动的iframe效果代码
2008/08/01 Javascript
刷新页面实现方式总结(HTML,ASP,JS)
2008/11/13 Javascript
Javascript 类与静态类的实现
2010/04/01 Javascript
jQuery-serialize()输出序列化form表单值的方法
2012/12/26 Javascript
js判断客户端是iOS还是Android等移动终端的方法
2013/12/11 Javascript
location.href用法总结(最主要的)
2013/12/27 Javascript
jquery实现textarea 高度自适应
2015/03/11 Javascript
jQuery Easyui 验证两次密码输入是否相等
2016/05/13 Javascript
JS常用加密编码与算法实例总结
2016/12/22 Javascript
jQuery实现jQuery-form.js实现异步上传文件
2017/04/28 jQuery
原生js实现密码输入框值的显示隐藏
2017/07/17 Javascript
vue按需引入element Transfer 穿梭框
2017/09/30 Javascript
实现div内部滚动条滚动到底部和顶部的代码
2017/11/15 Javascript
mpvue跳转页面及注意事项
2018/08/03 Javascript
微信小程序发送短信验证码完整实例
2019/01/07 Javascript
如何在 ant 的table中实现图片的渲染操作
2020/10/28 Javascript
Python查询Mysql时返回字典结构的代码
2012/06/18 Python
Python竟能画这么漂亮的花,帅呆了(代码分享)
2017/11/15 Python
Python实现查找二叉搜索树第k大的节点功能示例
2019/01/24 Python
对Python3 pyc 文件的使用详解
2019/02/16 Python
荷兰之家英文站:Holland at Home
2016/10/26 全球购物
SmartBuyGlasses台湾:名牌眼镜,名牌太阳眼镜及隐形眼镜
2017/01/04 全球购物
Charlotte Tilbury美国官网:英国美妆品牌
2017/10/13 全球购物
什么是GWT的Module
2013/01/20 面试题
先进事迹报告会主持词
2014/04/02 职场文书
《沉香救母》教学反思
2014/04/19 职场文书
2014向国旗敬礼网上签名活动总结
2014/09/27 职场文书
三人合伙协议书范本
2014/10/29 职场文书
庆祝教师节主题班会
2015/08/17 职场文书
基于Python实现的购物商城管理系统
2021/04/27 Python
Python中threading库实现线程锁与释放锁
2021/05/17 Python
Linux、ubuntu系统下查看显卡型号、显卡信息详解
2022/04/07 Servers
JavaScript实现音乐播放器
2022/08/14 Javascript