专栏首页游戏杂谈JavaScript立即调用的函数表达式

JavaScript立即调用的函数表达式

主要参考知乎上这个问题:javascript 匿名函数有哪几种执行方式 长天之云的回答。

~(function() {

    //todo

})();



!(function() {

    //todo

})();

对于不太熟悉JavaScript的同学来讲,可能会有两个疑问:

1、!(function() {})();前面为什么要加~、!这些符号?

后面的()是执行一个函数,而(function() {})是一个执行表达式,返回一个匿名函数的引用。

而如果在(function() {})();之前包含“未结束”的语句。是的,语句…

一条语句由一个或多个表达式、关键字或者运算符(符号)组成,典型地,一条语句写一行,尽管一条语句可以超过两行或者更多行,两条或更多条语句可以写在同一行上,语句之间用分号“;”分开。

<script type="text/javascript">
    
function f() {
    alert(1);
}

f

();

</script>

f 与函数调用符()中间隔一行或者多行,都可以执行。就像定义函数的参数可以换行一样。

而下面的代码:

<script type="text/javascript">
(1+1)    

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

</script>

就会提示缺少函数,因为(1+1)这里的()是执行一个表达式,而(function f() {})这里的()却是一个函数调用符。所以就报错了…

所以一般会在代码前面加一个一元运算符(当然也可以使用;)进行分隔,而使用什么样的运算符,与习惯有关。

也有文章指出,使用什么符号与运算符的效率有关,详见:function与感叹号>>

2、既然前面的一元运算符或者;不能被省略,那么(function() {})这个()能不能省呢?

如果是;function() {}()就不行了,会报语法错误,其它一元运算符可以,但是仍然建议加上()。

立即调用函数表达式,有很多种方式,例如:

( function() {}() );
( function() {} )();
[ function() {}() ];

~ function() {}();
! function() {}();
+ function() {}();
- function() {}();

delete function() {}();
typeof function() {}();
void function() {}();
new function() {}();
new function() {};

var f = function() {}();

1, function() {}();
1 ^ function() {}();
1 > function() {}();
// ...

参考:

Immediately-Invoked Function Expression (IIFE)

function与感叹号

ECMA-262-3 in detail. Chapter 5. Functions. - Dmitry A. Soshnikov Functions and function scope - Mozilla Developer Network Named function expressions - Juriy “kangax” Zaytsev JavaScript Module Pattern: In-Depth - Ben Cherry Closures explained with JavaScript - Nick Morgan

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 命名函数表达式

    好文章,可惜中文译文已经无法访问了。不过在cssrain上找到一篇:www.cssrain.cn/demo/named%20function%20express...

    meteoric
  • 函数声明与函数表达式

    函数声明:直接声明一个函数 function fnName() {};function声明必须有方法名,而出现在表达式里的方法名都会被忽略。

    meteoric
  • 关于seajs

    虽然已经有很长时间没写JavaScript,但很多时候看到一些应用还是会带着好奇心去研究一下。之前是看腾讯的朋友网,它的webchat做的很不错(虽然ff下有b...

    meteoric
  • phpcms v9 常用函数

    常用函数 , 打开include/global.func.php,下面存放一些公共函数 view plaincopy to clipboardprint? fu...

    joshua317
  • lodash源码解读之模块化的基础——IIFE

    IIFE包含两部分。 第一部分是一个匿名函数,它包裹在分组操作符()中,拥有独立的词法作用域。 第二部分是再一次使用分组操作符(),创建一个立即执行函数表达式。...

    我是leon
  • js中(function(){})()的写法用处

    后来查了下资料,js中(function(){…})()立即执行函数写法理解,终于了解了。

    帅的一麻皮
  • 使用 JavaScript 自动化你的 Mac

    系统自带的编写自动化脚本的工具是ScriptEditor。打开编辑器,把语言从 AppleScript切换到JavaScritp。接下来我们就来实战一下,写一个...

    IMWeb前端团队
  • 使用 JavaScript 自动化你的 Mac

    在Apple发布的Yosemite系统(OSX10.10+)中有一个被大家忽略的特性:使用 JavaScript编写自动化脚本。在这之前只能通过AppleSc...

    IMWeb前端团队
  • JQuery事件处理

    Jquery事件 1、  绑定事件示例代码: <a href=”#”>绑定事件</a> <div style=”display:none;”> 什么是绑定事件?...

    苦咖啡
  • es6之深入理解promise对象

    连小壮

扫码关注云+社区

领取腾讯云代金券