JavaScript立即调用的函数表达式

简介: 主要参考知乎上这个问题:javascript 匿名函数有哪几种执行方式  长天之云的回答。 ~(function() {//todo})();!(function() {//todo})(); 对于不太熟悉JavaScript的同学来讲,可能会有两个疑问: 1、!(function() {})();前面为什么要加~、!这些符号? 后面的()是执行一个函数,而(function() {})是一个执行表达式,返回一个匿名函数的引用。

主要参考知乎上这个问题: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

目录
相关文章
|
2天前
|
JavaScript 前端开发
在JavaScript中,函数原型(Function Prototype)是一个特殊的对象
JavaScript中的函数原型是一个特殊对象,它为所有函数实例提供共享的方法和属性。每个函数在创建时都有一个`prototype`属性,指向原型对象。利用原型,我们可以向所有实例添加方法和属性,实现继承。例如,我们定义一个`Person`函数,向其原型添加`greet`方法,然后创建实例`john`和`jane`,它们都能调用这个方法。尽管可以直接在原型上添加方法,但推荐在构造函数内部定义以封装数据和逻辑。
8 2
|
5天前
|
前端开发 JavaScript 数据处理
在JavaScript中,异步函数是指什么
【5月更文挑战第9天】JavaScript中的异步函数用于处理非立即完成的操作,如定时器、网络请求等。它们可通过回调函数、Promise或async/await来实现。示例展示了如何使用async/await模拟网络请求:定义异步函数fetchData返回Promise,在另一异步函数processData中使用await等待结果并处理。当fetchData的Promise解析时,data变量接收结果并继续执行后续代码。注意,调用异步函数不会阻塞执行,而是会在适当时间点继续。
10 0
|
5天前
|
自然语言处理 JavaScript 前端开发
在JavaScript中,this关键字的行为可能会因函数的调用方式而异
【5月更文挑战第9天】JavaScript中的`this`关键字行为取决于函数调用方式。在非严格模式下,直接调用函数时`this`指全局对象,严格模式下为`undefined`。作为对象方法调用时,`this`指向该对象。用`new`调用构造函数时,`this`指向新实例。通过`call`、`apply`、`bind`可手动设置`this`值。在回调和事件处理中,`this`可能不直观,箭头函数和绑定方法可帮助管理`this`的行为。
10 1
|
5天前
|
JavaScript 前端开发 网络架构
JavaScript中的箭头函数是一种新的函数表达形式
【5月更文挑战第9天】JavaScript的箭头函数以简洁语法简化函数定义,其特性包括:1) 不绑定自身this,继承上下文的this,适合回调和事件处理;2) 没有arguments对象,需用剩余参数语法访问参数;3) 不能用作构造函数,无new调用;4) 没有prototype属性,不支持基于原型的继承。箭头函数在特定场景下优化了this处理,但使用时要注意与普通函数的差异。
8 2
|
7天前
|
JavaScript 前端开发
js的一些内置函数
js的一些内置函数
7 1
|
7天前
|
JavaScript 前端开发 索引
js的includes函数
js的includes函数
12 1
|
7天前
|
JavaScript 安全 前端开发
js的map函数
js的map函数
7 0
|
7天前
|
JavaScript 前端开发
js的filter函数
js的filter函数
9 1
|
7天前
|
JavaScript 前端开发
js的函数
js的函数
7 0
|
7天前
|
JavaScript 前端开发
js的join函数
js的join函数
8 1