javascript - 一个脚本中多个自调用函数出错 : a case for a semicolon

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

其他浏览器以他们自己的方式提示。换句话说，在同一个脚本中有两个自调用函数会导致问题。每个脚本有一个自调用函数效果很好。如果我把第二个函数脚本two.js注释掉就没有问题了。

但是，如果我让第二个函数返回一个值，那么也没有问题。如果我将 two.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 will attempt to fill in the semicolons你“忘记”了，但这些表达是模棱两可的，所以你需要添加它。