JavaScript中initBtn调用populateVars提示未定义，求正确调用方法

问题原因 #

在$(document).on('shown.bs.modal', '#xyzModal', function (event) {...})的事件回调中，this的指向是触发事件的DOM元素（即#xyzModal），而非ABCD对象。直接用this.populateVars会找不到该方法，因此抛出「函数未定义」的错误。

两种修正方案 #

方案1：提前保存ABCD对象的引用 #

在initBtn函数内部，先将this（即ABCD对象）保存到变量中，再在事件回调里通过该变量调用populateVars：

initBtn: function(modal) {
    var btnHtml = `
        <style>
            .myBtn {display: inline-block;}
        </style>
        <a data-toggle="modal" data-target="#xyzModal" href="#" class="myBtn"></a>
    `;

    $(".xyzBtnHolder").css({'maxWidth' : '260px'});
    document.querySelector('.xyzBtnHolder').insertAdjacentHTML('beforeend', btnHtml);

    // 保存ABCD对象的引用
    const self = this;

    $(document).on('shown.bs.modal', '#xyzModal', function (event) {
        var triggerElement = $(event.relatedTarget);
        $(".modal-backdrop.in").css({opacity: 0.75});
        if ($("#xyzFrameHolder").is(':empty')) {
            // 通过保存的引用调用方法
            let vars = self.populateVars(triggerElement);
            window.MYWidget({
                origin: window.location.origin,
                vehicle: vars.vehicle,
                vehicleType: vars.vehicleType,
                onClose: function(el) {
                    $(el).modal('hide');
                    $("#xyzFrameHolder").empty();
                },
                onSubmit: function() {
                    $('#xyz-overlay').show();
                    $("#xyz-spinner").show();
                }
            }).render(('#xyzFrameHolder'));
        }
    });

    modal.on('hidden.bs.modal',function() {
        $(".modal-backdrop.in").css({opacity: 1});
    });
},

方案2：使用箭头函数绑定this #

箭头函数会继承外层作用域的this指向，不会被事件回调改变，因此可以直接用this.populateVars：

initBtn: function(modal) {
    var btnHtml = `
        <style>
            .myBtn {display: inline-block;}
        </style>
        <a data-toggle="modal" data-target="#xyzModal" href="#" class="myBtn"></a>
    `;

    $(".xyzBtnHolder").css({'maxWidth' : '260px'});
    document.querySelector('.xyzBtnHolder').insertAdjacentHTML('beforeend', btnHtml);

    // 用箭头函数作为回调，this仍指向ABCD对象
    $(document).on('shown.bs.modal', '#xyzModal', (event) => {
        var triggerElement = $(event.relatedTarget);
        $(".modal-backdrop.in").css({opacity: 0.75});
        if ($("#xyzFrameHolder").is(':empty')) {
            let vars = this.populateVars(triggerElement);
            window.MYWidget({
                origin: window.location.origin,
                vehicle: vars.vehicle,
                vehicleType: vars.vehicleType,
                onClose: function(el) {
                    $(el).modal('hide');
                    $("#xyzFrameHolder").empty();
                },
                onSubmit: function() {
                    $('#xyz-overlay').show();
                    $("#xyz-spinner").show();
                }
            }).render(('#xyzFrameHolder'));
        }
    });

    modal.on('hidden.bs.modal',function() {
        $(".modal-backdrop.in").css({opacity: 1});
    });
},

额外修复提示 #

populateVars函数的else分支中，vehicle和vehicleType是未定义变量，会引发新错误，需补充定义或设置默认值，示例：

populateVars: function(element) {
    const srpVehicles = document.querySelectorAll('.srpVehicle');
    if (srpVehicles.length > 0) {
        const srpVehicle = element.parents('.srpVehicle').first();
        return {
            vehicle: srpVehicle.data('name'),
            vehicleType: srpVehicle.data('vehicletype')
        }
    } else {
        // 设置默认值或从全局变量获取
        return {
            vehicle: window.vehicle || '',
            vehicleType: window.vehicleType || ''
        }
    }
}

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