JavaScript匿名函数的写法

2019-11-17 03:51:36

字体：大中小

来源：转载

供稿：网友

可以想像得到，有很多方法立即执行匿名函数，简单的整理就有下面三种的典型方式（还有其他方式的，欢迎告知）：

方式一
(function() {
    // …
})();

方式二
void function() {
  // …
}();

方式三
~function() {
   // …
}();

方式一和方式二大家可能都看到过，这里主要说明下方式三。在说明方式三之前，我们现回顾下运算符“~”（位取反）在 EMCAScript 中的定义（第五版的第 72 页），简单的翻译下:

按运算符结合语句
将旧值转换为 32 位整型
执行运算符后的语句
转换之行结果为 32 位整形并返回

从上面可以了解，其实位运算符都能立即返回后面表达式的值。其实其他位运算符都可以达到这样的目的，例如:
!function() {
    // …
}();

等都可以达到我们的目的。所以其实用“~”也并无其他的原因，仅仅是代码“看着好看”而已 :^)

效率
与其说三种方式执行匿名函数的效率，到不如直接分析个运算符的执行效率。那么我们对比再来看看“()”以及“void”在 EMCA 规范中的定义

组运算符（第五版 66 页）

返回表达式的执行结果
void（第五版 70 页）

按运算符结合语句
执行
返回 undefined
由于组运算符还需要执行语句并返回语句块返回的值，对比 void 会多个获取语句块的操作（虽然消耗不了多少的性能），因此在这种情况下 void 的性能要优于组运算符。

对比两者，那么方式三的性能对比很明显要低于前两者。总结起来就是光从语法的角度上分析，在上面三者匿名函数的方式中方式二优于方式一，方式三的效率最低。

总结
思考下三者之间的优异

方式一的写法很常见而且很保险，所以并不会有人因为你使用这种方式而责怪你
但使用方式一的同学，可能经常会犯忘记匹配括号的“毛病”（特别是语句块很长时，就经常搞错）
使用位运算符执行匿名函数很新潮，用来装逼酷不错
很多 IDE （如 IDEA）以及语法高亮工具不支持方式三的写法
void 效率最好，但总感觉相比其他两种实现方式非常的臃肿（仅仅多几个字符？）
那么

综合代码量以及效率等情况考虑，用方式一没错的
在需要额外节省代码的极端情况，用方式三
考虑效率优先，那么使用方式二
这里要说明下，其实三种方式效率之间的差异非常小。因此单纯拿效率来考虑采用那种方式，几乎是站不住脚的。

具体采用何种方案，需要根据实际情况来考虑。比如我自己，经常会使用方式三，是因为 1、方便（加一个字符即可） 2、在函数长的情况下匹配括号会很头晕 3、用起来很酷，但方式三会经常让看我代码的组员感到困扰。

如果在些类库等框架性质的基础代码，用方式一最保险同时大家都容易看懂，是最保险的选择。

[原文：http://www.gracecode.com/archives/3004/  非常好，大家学习一下。]

上一篇：JavaScript匿名函数的写法

下一篇：javascript设计模式之工厂模式