一个脚本中有多个自调用函数的错误:分号的大小写

Question

在某些情况下，在单个JavaScript文件中有多个自调用函数会引起错误。让第二个函数返回值可以避免错误。

我有一个准系统HTML文件...

<script src="two.js"></script>
<script src="one.js"></script>

。使用这些脚本：

// two.js
(function () {
  console.log('1/2')
})()
(function () {
  console.log('2/2')
})()

    

// one.js
(function () {
  console.log('1/1')
})()

当我在Chrome中打开文件时，我得到以下输出：

1/2 two.js:2
Uncaught TypeError: undefined is not a function two.js:6
1/1

其他浏览器以自己的方式抱怨。换句话说，在同一脚本中具有两个自调用函数会导致问题。每个脚本有一个自调用函数可以正常工作。如果我注释掉第二个函数脚本两个.js，则没有问题。

但是，如果我让第二个函数返回一个值，那么也没有问题。如果我更改两个.js，一切正常：

(function () {
  console.log('1/2')
})()
foo = (function () {
  console.log('2/2')
  return 'bar'
})()

为什么第一个版本失败而第二个版本成功？

Answer 1

你忘了分号：

(function () {
  console.log('1/2')
})();
(function () {
  console.log('2/2')
})();

否则，前一个表达式（undefined）的返回值会尝试执行下一个表达式。显然undefined不是一个函数。

在无分号的 JavaScript 世界中，您经常会在任何原始表达式之前看到分号，例如 () ：

;(function(){}())
;['1','2','3'].map(Number)

JavaScript 会尝试填写你"忘记"的分号，但这些表达式是不明确的，所以你需要添加它。

Answer 2

函数表达式末尾缺少分号，因此前面的括号表达式被解析为对函数的调用。由于该函数不返回值（返回值隐式undefined），因此代码在功能上等同于undefined() - 因此错误。

故事的寓意 - 不要忘记你的分号！