js自执行函数的几种不同写法的比较


Posted in Javascript onAugust 16, 2012

经常需要一个函数自执行,可惜这一种写法是错的:

function(){alert(1);}();

原因是前半段“function(){alert(1);}”被当成了函数声明,而不是一个函数表达式,从而让后面的“();”变得孤立,产生语法错。

按上面的分析,这一段代码虽说没有语法错,但也是不符合我们的预期的,因为这个函数并没有自执行。

function(){alert(1);}(1);

综上,症结在于,如何明确代码描述的是一个函数表达式,而不是函数声明语句。
正确的写法多种多样,也各有利弊:

方法1:最前最后加括号

(function(){alert(1);}());

这是jslint推荐的写法,好处是,能提醒阅读代码的人,这段代码是一个整体。
例如,在有语法高亮匹配功能的编辑器里,光标在第一个左括号后时,最后一个右括号也会高亮,看代码的人一眼就可以看到这个整体。
不过,对于某些写代码不喜欢在行后加分号的同学,也会形成一些坑坑,例如以下代码会报运行错:
var a=1 
(function(){alert(1);}());

方法2:function外面加括号

(function(){alert(1);})();

这种做法比方法1少了一个代码整体性的好处。

方法3:function前面加运算符,常见的是!与void 。

!function(){alert(1);}(); 
void function(){alert(2);}();

显然,加上“!”或“+”等运算符,写起来是最简单的。
加上“void ”要敲五下键盘,但是听说有一个好处是,比加"!"少一次逻辑运算。----我只是听说,不明所以。

最后,代表我个人,强烈支持方法1,即jslint的推荐写法:

(function(){alert(1);}());
Javascript 相关文章推荐
如何简单地用YUI做JavaScript动画
Mar 10 Javascript
理解JavaScript变量作用域更轻松
Oct 25 Javascript
JS运行耗时操作的延时显示方法
Nov 19 Javascript
jquery插件制作 表单验证实现代码
Aug 17 Javascript
JS实现控制表格单元格垂直对齐的方法
Mar 30 Javascript
详解Angular2中Input和Output用法及示例
May 21 Javascript
vue Element-ui input 远程搜索与修改建议显示模版的示例代码
Oct 19 Javascript
解析Vue2 dist 目录下各个文件的区别
Nov 22 Javascript
vue-cli3+ts+webpack实现多入口多出口功能
May 30 Javascript
layui扩展上传组件模拟进度条的方法
Sep 23 Javascript
JavaScript内置对象之Array的使用小结
May 12 Javascript
axios解决高并发的方法:axios.all()与axios.spread()的操作
Nov 09 Javascript
js三种排序算法分享
Aug 16 #Javascript
jQuery点击后一组图片左右滑动的实现代码
Aug 16 #Javascript
JavaScript高级程序设计 阅读笔记(二十) js错误处理
Aug 14 #Javascript
JavaScript高级程序设计 阅读笔记(十八) js跨平台的事件
Aug 14 #Javascript
JavaScript高级程序设计 阅读笔记(十七) js事件
Aug 14 #Javascript
JavaScript高级程序设计阅读笔记(十六) javascript检测浏览器和操作系统-detect.js
Aug 14 #Javascript
JavaScript高级程序设计 阅读笔记(十四) js继承机制的实现
Aug 14 #Javascript
You might like
基于node.js的快速开发透明代理
2010/12/25 Javascript
Js判断CSS文件加载完毕的具体实现
2014/01/17 Javascript
jquery复选框多选赋值给文本框的方法
2015/01/27 Javascript
node.js require() 源码解读
2015/12/13 Javascript
JavaScript三种绑定事件方式及相互之间的区别分析
2017/01/10 Javascript
全面总结Javascript对数组对象的各种操作
2017/01/22 Javascript
JS实现加载和读取XML文件的方法详解
2017/04/24 Javascript
webpack配置文件和常用配置项介绍
2017/04/28 Javascript
Vue的自定义组件不能使用click方法的解决
2020/07/28 Javascript
分享一个简单的python读写文件脚本
2017/11/25 Python
Python使用Turtle模块绘制五星红旗代码示例
2017/12/11 Python
python中闭包Closure函数作为返回值的方法示例
2017/12/17 Python
Python使用requests提交HTTP表单的方法
2018/12/26 Python
python 函数中的内置函数及用法详解
2019/07/02 Python
Tensorflow 自定义loss的情况下初始化部分变量方式
2020/01/06 Python
python自动打开浏览器下载zip并提取内容写入excel
2021/01/04 Python
如何在vscode中安装python库的方法步骤
2021/01/06 Python
HTML5+CSS3 实现灵动的动画 TAB 切换效果(DEMO)
2017/09/15 HTML / CSS
很酷的HTML5电子书翻页动画特效
2016/02/25 HTML / CSS
canvas 实现 github404动态效果的示例代码
2017/11/15 HTML / CSS
澳大利亚领先的睡衣品牌:Peter Alexander
2016/08/16 全球购物
Algenist奥杰尼官网:微藻抗衰老护肤品牌
2017/07/15 全球购物
Bluebella美国官网:英国性感内衣品牌
2018/10/04 全球购物
德国购买门票网站:ADticket.de
2019/10/31 全球购物
建筑工程专业大学生求职信
2014/04/23 职场文书
班风口号
2014/06/18 职场文书
2014个人年度工作总结
2014/12/15 职场文书
现实表现材料范文
2014/12/23 职场文书
报名委托书
2015/01/29 职场文书
小学科学课教学反思
2016/02/23 职场文书
Python使用random模块实现掷骰子游戏的示例代码
2021/04/29 Python
Python自动化测试PO模型封装过程详解
2021/06/22 Python
Python道路车道线检测的实现
2021/06/27 Python
十大好看的穿越动漫排名:《瑞克和莫蒂》第一,国漫《有药》在榜
2022/03/18 日漫
Go web入门Go pongo2模板引擎
2022/05/20 Golang
Linux服务器离线安装 nginx的详细步骤
2022/06/16 Servers