通过IIFE实现单例对象时两种括号调用写法的差异是什么

核心结论 #

两种写法没有任何功能差异，执行逻辑、返回结果完全一致，仅为代码风格偏好的区别。

原理说明 #

• IIFE（立即调用函数表达式）的核心前提是让JS引擎将代码中的function结构解析为函数表达式，而非函数声明——函数声明不支持直接加()调用，只有表达式类型的函数可以被立即执行。
• 外层包裹的圆括号()的作用就是强制JS引擎将括号内的内容作为表达式求值：
  • 第一种写法(function(){})()：先通过外层括号拿到内部的函数表达式，再在外层括号外添加调用括号执行函数
  • 第二种写法(function(){}())：将函数调用的逻辑整体放在外层括号内求值，最终拿到的执行结果和第一种完全相同

代码运行验证 #

你给出的测试代码运行后输出结果如下：

var counter = (function sequenceIIFE() {
    
    var current = 0;
    return {
        getCurrentValue: function() {
            return current;
        },
        
        getNextValue: function() {
            current = current + 1;
            return current;
        }
    };
    
})();

var counter2 = (function sequenceIIFE() {
    
    var current = 0;
    return {
        getCurrentValue: function() {
            return current;
        },
        
        getNextValue: function() {
            current = current + 1;
            return current;
        }
    };
    
}());

console.log(counter.getNextValue()); // 输出1
console.log(counter.getNextValue()); // 输出2

console.log(counter2.getNextValue()); // 输出1
console.log(counter2.getNextValue()); // 输出2

counter和counter2各自维护独立的闭包变量current，符合单例模式的预期，两种括号写法没有对功能产生任何影响。

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