JavaScript IIFE中Cannot access 'Q12' before initialization错误原因咨询

错误根源 #

问题出在变量声明顺序与函数执行时机的冲突：

• 你在IIFE中先执行了return语句，提前把changeCssClassIfOldAndNewValuesAreDifferent函数暴露给外部，但此时Q12、Q23这些const变量还未完成声明和初始化。
• ES6中const声明的变量存在暂时性死区（TDZ）：在变量声明语句执行前，变量处于不可访问的状态。当外部调用formController.changeCssClassIfOldAndNewValuesAreDifferent()时，函数内部尝试访问Q12，但该变量在IIFE里是return之后才声明的，根本没完成初始化，因此触发了这个错误。

解决方案 #

调整代码顺序，将所有变量声明放到return语句之前，确保函数执行时所需变量已经完成初始化：

const formController = (function () {
    // 先声明并初始化所有依赖变量
    const formScope: any = $("form#userAnswerForm");
    const Q12: any = $('.persistable[id=Q12]', formScope);
    const Q23: any = $('.persistable[id=Q23]', formScope);
    
    function changeCssClassIfOldAndNewValuesAreDifferent() {
        $('input.persistable, select.persistable').not(Q12)
        .each(function () {
            console.log('each persistable input and select listeners (change, mouseout)');
            const thisPersistable: any = $(this);
            const Q12_or_Q23_is_not_empty: boolean = !commonUtility.isEmpty(Q12) && 
            !commonUtility.isEmpty(Q23);
            ...
            ...
        });
    }

    // 最后返回需要暴露的方法
    return {
      'changeCssClassIfOldAndNewValuesAreDifferent': changeCssClassIfOldAndNewValuesAreDifferent
    };
})();

$(function(){
    formController.changeCssClassIfOldAndNewValuesAreDifferent();
});

补充说明 #

• 函数声明会被提升，所以changeCssClassIfOldAndNewValuesAreDifferent函数在return时可以被正常引用，但函数内部依赖的const变量不会被提升，必须保证在函数执行前完成声明初始化。
• 不建议改用var来规避错误，var的变量提升特性会带来其他潜在问题，调整声明顺序是更规范的解决方式。

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