在JavaScript中調用嵌套函數-在jQuery.ajax.success中調用時未定義錯誤

Question

我正在對象內部進行Ajax表單提交。

當我嘗試在jQuery.ajax.success回調中調用其他對象方法時，此行將引發錯誤...

這是范圍問題嗎？

this.DisplayError(data.error);

this.DisplayError不是函數

碼：

    var toolsform = new function() {

        this.sumbitUrl = 'submit.php';


        this.DisplayError = function(errorMsg) {
            jQuery('#trialFormError').html('<strong>Error: </strong>' + errorMsg);  
        }

        this.AjaxSumbit = function() {

            let formData = jQuery("#trialsToolsRegisterForm").serialize();
            formData += '&toolsFormSumbit=1';

            jQuery.ajax({
                type: "POST",
                url: this.sumbitUrl,
                dataType: 'json',
                data: formData,
                success: function(data) {

                    if(data.success === false) { 
                        this.DisplayError(data.error);
                    }

                    console.log(data); // show response from the php script.
                }
            }); 
        }   
    }

Answer 1

使用箭頭功能：

success: () => {

}

發生這種情況是因為您失去了上下文，調用成功函數時Ajax分配了不同的上下文。 您還可以將上下文保存在New變量中：

var self = this;

並在成功函數內使用它來代替它。 或者，您可以定義函數上下文：

success: (function() {

}).bind(this)

Answer 2

this成功函數內部不等於this之外。 解決此問題的最簡單方法是使用箭頭功能。

var toolsform = new function() {

    this.sumbitUrl = 'submit.php';


    this.DisplayError = function(errorMsg) {
        jQuery('#trialFormError').html('<strong>Error: </strong>' + errorMsg);  
    }

    this.AjaxSumbit = function() {

        let formData = jQuery("#trialsToolsRegisterForm").serialize();
        formData += '&toolsFormSumbit=1';

        jQuery.ajax({
            type: "POST",
            url: this.sumbitUrl,
            dataType: 'json',
            data: formData,
            success: data => {

                if(data.success === false) { 
                    this.DisplayError(data.error); // now `this` should be equal to the one outside
                }

                console.log(data); // show response from the php script.
            }
        }); 
    }   
}

魔術是，箭頭功能沒有它自己的this 。 當你調用this ，它會參考一個以外。 但是普通函數有它自己的this ，因此，當您調用this ，它將引用自己的this而不是外部的this 。

有關詳細信息，您可以查看MDN網絡文檔