没想到的 IIFE
有时候我们想要立即执行一下所定义的函数,可以怎么做呢?
function foo(num) {return num ?? 1;
}foo();
写完然后调用对吧,这是可以的,但你有没有觉得这其实有点脱裤子放屁了,完全可以直接调用就是了对吧,也就是 IIFE(Immediately-Invoked Function Expression),立即执行的函数表达式。
(function foo() {return num ?? 1;
})()
有人说, IIFE 很简单呀,还需要你写文章吗?如果我是要写怎么使用 IIFE,当然没必要,我写这个,是因为我发现了一点有趣的东西。
什么呢?我们先来看三段语句:
function foo() {return num ?? 1;
}()
function foo(num) {return num ?? 1;
}(2)
(function foo(num) {return num ?? 1;
}());
你觉得上面这些能执行成功吗?
不是想考哈,考这个太没意思了,主要就是探究一下
是不是不知道了哇,先不要慌,我们从头看:
function foo(num) {return num ?? 1;
}foo();
从这里是不是可以看出,只要在函数名后面加上圆括号,就能调用(执行)函数了。那么我们可以大胆的猜测,直接在函数后面添加括号是不是也可以执行呢?
我们来看看呢?
function foo(num) {return num ?? 1;
}();
// SyntaxError: Unexpected token ')'
执行直接会报语法错误,为什么呢?因为:
function foo(num) {...}
是一段语句(函数声明语句)- 放在语句后的括号与前面的语句完全分开,只是一个分组运算符(用作控制计算优先级的手段),此时的括号里面需要包含一个表达式。
那么,下面这段代码的结果就不言而喻了
function foo(num) {return num ?? 1;
}(2)
既不会报错,也不会执行 foo
,因为 (2)
和前面的语句是完全分开的。
那再来看第三段:
(function foo(num) {return num ?? 1;
}());
这就能正常执行了,为什么呢?
因为:
- 括号里面的内容都会识别为表达式
- 放在表达式后的括号表明该表达式是要调用的函数
当然,下面这种也是能正常工作的,左侧括号使一个表达式。
(function foo(num) {return num ?? 1;
})();
我想,看到这里,你应该知道为啥在文章开头我要将 “立即执行的函数表达式” 中的函数表达式标红了吧,这里也纠正一个常犯的错误:IIFE 可不是一个函数,而是一个表达式哟!