javascript - !function(){}() 究竟是如何工作的？

Question

<分区>

Answer 1

什么!确实

当您使用 ! 时，该函数成为一元(逻辑)NOT 运算符的单个操作数。

这会强制将函数作为表达式求值，从而允许立即内联调用它。

---

其他选择

您几乎可以使用任何运算符来执行此操作。这里有一些例子......

'invoke',function(){ /*code*/ }();
1+function(){ /*code*/ }();
void function(){ /*code*/ }();
~function(){ /*code*/ }();
+function(){ /*code*/ }();

其中一些的好处是运算符的含义没有重载。

---

()的问题

当您在函数周围使用 () 时，您可能会遇到一些错误，如果连续多个错误且没有用分号分隔它们，这些错误就会突然出现。

(function() {
    alert('first');
}())


(function() {
    alert('second');
}())

// TypeError: undefined is not a function

这将导致 TypeError，因为第二个函数周围的一对外部 () 将被解释为打算调用功能。第一个当然不会返回函数，因此您正在尝试调用 undefined。

---

如何使用不同的运算符来解决(或避免)问题

即使像 + 这样的运算符在某种程度上重载也不会导致错误。

如果你这样做...

+function() {
    alert('first');
}()

+function() {
    alert('second');
}()

第一个 + 被解释为 unary + operator，它转换从第一个函数返回的结果，在本例中是 undefined 所以它被转换为 NaN。

第二个 + 将被解释为加法运算符，因此将尝试将 NaN 添加到第二个函数的返回结果中，这里又是 undefined。

结果当然是NaN，但这是无害的。没有非法代码会引发错误。

---

运算符如何与函数交互的演示

为了证明这一点，只需给每个函数一个返回值，然后将其粘贴到控制台...

+function() {
    alert('first');
    return "10";
}()

+function() {
    alert('second');
    return 20;
}()

// 30

您将获得两个 alert，然后控制台将显示 30，因为第一个 + 运算符将字符串 >“10” 到数字 10，第二个 + 将两个结果加在一起。