为什么JavaScript函数定义后直接调用会返回传入的最后一个参数？

核心原因 #

该现象由JavaScript的自动分号插入(ASI)规则和「函数声明与函数表达式的语法差异」共同导致。
你写下的bar相关代码：

function bar(x) {
  return x;
}(1,2,3); // returns 3

你预期的执行逻辑是「定义bar函数后立即传入1、2、3三个参数调用」，但JavaScript引擎实际会将这段代码拆分为两个完全独立的部分执行：

1. 标准函数声明语句，正常在当前作用域声明bar函数：

function bar(x) {
  return x;
}

2. 独立的括号表达式，和上面的bar函数完全无关：

(1,2,3);

根据JavaScript逗号运算符的规则，逗号分隔的多个表达式会按顺序执行，最终返回最后一个表达式的结果，因此(1,2,3)的返回值就是3，这就是你看到返回3的原因。

和foo调用的区别 #

foo的写法是先完成函数声明，再单独写foo(1)调用，完全符合函数调用的语法规则，因此会按照预期执行，传入1作为参数返回1。

正确的立即调用写法 #

如果要实现「定义函数后立即调用」的效果，需要让引擎把函数部分识别为函数表达式而非函数声明，常见的正确写法如下：

// 写法1：用括号包裹函数部分，强制识别为表达式
(function bar(x) {
  return x;
})(1,2,3); // 返回1
// 写法2：函数前加一元运算符，强制识别为表达式
!function bar(x) {
  return x;
}(1,2,3); // 返回1
// 写法3：作为赋值语句的右值，默认识别为表达式
const bar = function(x) {
  return x;
}(1,2,3); // bar被赋值为1

以上写法都会正常将括号内的内容识别为函数调用参数，按预期取第一个参数1作为x的值返回。 #

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