webpack编译产物中自执行函数前的1、2是什么？为何代码合法？

你提到的代码完整内容如下：

(1,2, function(x) {
    console.log(x);
    return 4;
})(5);

语法合法性解释 #

JavaScript中的逗号运算符规则为：按从左到右的顺序依次计算每一个操作数，最终仅返回最后一个操作数的计算结果。
所以括号内的1,2, function(x){...}执行逻辑是：

• 计算字面量1，结果直接丢弃
• 计算字面量2，结果直接丢弃
• 计算函数表达式，返回这个函数本身
  最终括号整体的返回值就是这个匿名函数，后面跟(5)就是正常的函数调用，完全符合JS语法规则，执行时会输出5，最终返回4。

1、2的实际作用 #

• 纯语法层面：这两个字面量对最终执行结果没有任何影响，属于被逗号运算符丢弃的中间计算值，你把它们删掉改成(function(x){...})(5)，执行结果完全一致，你可以通过以下测试验证：

// 带冗余值的写法
console.log((1,2, function(x){return x*2})(3)) // 输出6
// 去掉冗余值的写法
console.log((function(x){return x*2})(3)) // 输出6

• Webpack打包生成的原因：这是webpack编译、配合代码压缩工具做优化时的产物，常见场景包括：
  • 压缩工具生成的无意义占位值，用于对齐编译规则
  • 类似(0, 模块导出方法)()的语法变种，用于解绑函数的this指向（避免方法内部this绑定到模块导出对象上），此处的1、2属于压缩工具随机生成的无意义字面量，和0的占位作用没有区别

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