js 在定义的时候立即执行的函数表达式(function)写法


Posted in Javascript onJanuary 16, 2013

1.前言
函数需要先定义,后使用。 这基本上所有编程语言的一条铁的定律。
一般状况下, 我们需要调用一个JavaScript 函数, 基本的状况都是先定义, 然后再调用。 看一个例子

<!--by oscar999 2013-1-16--> 
<!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多物体 任意值 链式 缓冲运动
Aug 10 Javascript
juery框架写的弹窗效果适合新手
Nov 27 Javascript
使用JS或jQuery模拟鼠标点击a标签事件代码
Mar 10 Javascript
Javascript中Array用法实例分析
Jun 13 Javascript
bootstrap中使用google prettify让代码高亮的方法
Oct 21 Javascript
Vue获取DOM元素样式和样式更改示例
Mar 07 Javascript
详解layui弹窗父子窗口之间传参数的方法
Jan 16 Javascript
Vue封装Swiper实现图片轮播效果
Feb 06 Javascript
p5.js入门教程之小球动画示例代码
Mar 15 Javascript
el-form 多层级表单的实现示例
Sep 10 Javascript
Vue-Element-Admin集成自己的接口实现登录跳转
Jun 23 Vue.js
Js类的构建与继承案例详解
Sep 15 Javascript
JQuery验证工具类搜集整理
Jan 16 #Javascript
js 实现在离开页面时提醒未保存的信息(减少用户重复操作)
Jan 16 #Javascript
js拦截alert对话框另类应用
Jan 16 #Javascript
javascript图像处理—仿射变换深度理解
Jan 16 #Javascript
用js获取电脑信息(是使用与IE浏览器)
Jan 15 #Javascript
使用jQuery fancybox插件打造一个实用的数据传输模态弹出窗体
Jan 15 #Javascript
尝试在让script的type属性等于text/html
Jan 15 #Javascript
You might like
php生成随机颜色的方法
2014/11/13 PHP
ThinkPHP里用U方法调用js文件实例
2015/06/18 PHP
学习php设计模式 php实现备忘录模式(Memento)
2015/12/09 PHP
FF(火狐)浏览器无法执行window.close()解决方案
2014/11/13 Javascript
jQuery中remove()方法用法实例
2014/12/25 Javascript
JavaScript实现的一个倒计时的类
2015/03/12 Javascript
jquery使用经验小结
2015/05/20 Javascript
JavaScript的String字符串对象常用操作总结
2016/05/26 Javascript
AngularJS下对数组的对比分析
2016/08/24 Javascript
Bootstrap菜单按钮及导航实例解析
2016/09/09 Javascript
js判断请求的url是否可访问,支持跨域判断的实现方法
2016/09/17 Javascript
js获取元素的标签名实现方法
2016/10/08 Javascript
vue中echarts3.0自适应的方法
2018/02/26 Javascript
Rollup处理并打包JS文件项目实例代码
2018/05/31 Javascript
jQuery中实现text()的方法
2019/04/04 jQuery
前端路由&amp;webpack基础配置详解
2019/06/10 Javascript
Nuxt使用Vuex的方法示例
2019/09/06 Javascript
layui layer select 选择被遮挡的解决方法
2019/09/21 Javascript
Java Varargs 可变参数用法详解
2020/01/28 Javascript
[01:06:43]完美世界DOTA2联赛PWL S3 PXG vs GXR 第二场 12.19
2020/12/24 DOTA
python使用7z解压apk包的方法
2015/04/18 Python
Python的Django应用程序解决AJAX跨域访问问题的方法
2016/05/31 Python
Python cookbook(数据结构与算法)实现优先级队列的方法示例
2018/02/18 Python
python实现给微信指定好友定时发送消息
2019/04/29 Python
python操作日志的封装方法(两种方法)
2019/05/23 Python
用Python写一个自动木马程序
2019/09/17 Python
解决Python paramiko 模块远程执行ssh 命令 nohup 不生效的问题
2020/07/14 Python
Django启动时找不到mysqlclient问题解决方案
2020/11/11 Python
Smallable意大利家庭概念店:设计师童装及家居装饰
2018/01/08 全球购物
应届生船舶驾驶求职信
2013/10/19 职场文书
采购部岗位职责
2013/11/24 职场文书
旅游业大学生创业计划书
2014/01/31 职场文书
双方协议书
2014/04/22 职场文书
校园新闻广播稿5篇
2014/10/10 职场文书
建议书范文
2015/02/05 职场文书
深入理解 Golang 的字符串
2022/05/04 Golang