在javscript iife中初始化之前无法访问变量

Question

我在changeCssClassIfOldAndNewValuesAreDifferent函数中收到“未捕获的ReferenceError：在初始化之前无法访问'Q12'”。 知道为什么吗？ 谢谢。

const formController = (function () {
    return {
      'changeCssClassIfOldAndNewValuesAreDifferent': changeCssClassIfOldAndNewValuesAreDifferent
    };

    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) //<---Reference Error
        .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);
            ...
            ...
        });
    }
})();

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

Answer 1

简而言之，您只需在返回之前移动声明，因为返回时您调用尝试访问返回后声明的 Q12 的函数

const formController = (function () {
    const formScope: any = $("form#userAnswerForm");
    const Q12: any = $('.persistable[id=Q12]', formScope);
    const Q23: any = $('.persistable[id=Q23]', formScope);

    return {
      'changeCssClassIfOldAndNewValuesAreDifferent': changeCssClassIfOldAndNewValuesAreDifferent
    };
    
    function changeCssClassIfOldAndNewValuesAreDifferent() {
        $('input.persistable, select.persistable').not(Q12) //<---Reference Error
        .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);
            ...
            ...
        });
    }
})();

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