JavaScript中传函数调用结果作参数时先输出再报错的原因咨询

以下JavaScript代码的输出结果为：

x
x
x
x
x
1
Uncaught TypeError: func is not a function

原本判断第二次调用runTheFunctionNTimes函数报错的原因是函数签名不匹配，但疑惑为何会先输出1再抛出错误信息？按逻辑输出5个x后应该直接报错，不应有额外输出才对？

对应代码：

function runTheFunctionNTimes(func, n) {
    for (let i = 0; i < n; i++) {
    func()
  }
}

function functionWithoutParameters() {
    console.log('x')
}

function functionWithAParameter(y) {
    console.log(y)
}

runTheFunctionNTimes(functionWithoutParameters,5)
runTheFunctionNTimes(functionWithAParameter(1),5)

核心原因：你传递的不是函数，而是函数执行后的结果 #

第二次调用runTheFunctionNTimes(functionWithAParameter(1),5)时，这里的functionWithAParameter(1)不是把函数本身传进去，而是直接执行了这个函数：

• 第一步：执行functionWithAParameter(1)，内部console.log(y)输出1，这个函数没有写return语句，所以默认返回undefined。
• 第二步：此时runTheFunctionNTimes的第一个参数func接收到的是undefined，而非你预期的functionWithAParameter函数。
• 第三步：进入循环后执行func()，也就是执行undefined()，这自然会抛出TypeError: func is not a function的错误。

你之前误以为是函数签名不匹配（比如函数需要参数但没传），但实际问题出在参数传递方式上——如果想传递带参数的函数，应该用匿名函数包裹，比如：

runTheFunctionNTimes(() => functionWithAParameter(1), 5)

这样传递的是一个匿名函数，循环里执行这个匿名函数时，才会调用functionWithAParameter(1)，就能输出5个1而不报错。

内容的提问来源于stack exchange，提问作者iwsnmw