在一个脚本中有多个自调用函数时出错:分号的情况

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更改为this,一切正常:

(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 将尝试填写您"忘记" 的分号,但这些表达式不明确,因此您需要添加它.