JS自执行函数（立即调用）

71 阅读 0 评论 47 点赞

我是靠谱客的博主含糊月亮，最近开发中收集的这篇文章主要介绍JS自执行函数（立即调用），觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

先说分组操作符

先了解一下分组操作符

分组操作符其实就是() ,在js中有两种用法，一个是求值，一个是调用函数

将函数放在圆括号中，会返回函数本身。如果圆括号紧跟在函数的后面，就表示调用函数。

()中不能放语句

自执行函数

想要实现创建函数的时候就直接执行函数，只需要在定义函数的后面加上一个分组操作符

//函数表达式
var fun =function() {
  console.log("33")
}()
// 33

//function声明函数
function fun () {
  console.log("33")
}()
// Unexpected token ')'

这里我们可以看到，用函数表达式声明函数，在后面加（）可以实现立即执行，但是利用function声明，就会报错

其实这里的报错和前面的函数声明没有关系，这里的报错是因为后面的分组操作符里面没有值

function fun () {
  console.log("33")
}(4)

//没有输出

在（）中加上一个表达式就没有报错了，但是函数也没有执行

JS在执行函数之前会创建一个执行上下文，建立执行上下文时，会对代码中的函数进行函数提升，这里判断是否是函数的依据就是语句是否时function开头，所以当执行以上代码时，上面的函数语句被解析成function函数声明，所以不能直接使用分组操作符执行函数。

知道原因之后就非常简单了，我们只需要在function之前加上一些符号，使得解析器不把函数当作function函数声明

(function () { /* code */ } ()); // 推荐使用这个
(function () { /* code */ })(); // 但是这个也是可以用的

var i = function () { return 10; } ();
true && function () { /* code */ } ();
0, function () { /* code */ } ();


!function () { /* code */ } ();
~function () { /* code */ } ();
-function () { /* code */ } ();
+function () { /* code */ } ();


new function () { /* code */ }
new function () { /* code */ } () // 如果需要传递参数，只需要加上括弧()

以上代码都可以实现立即执行，不过我们一般使用前两种