在JavaScript中调用嵌套函数-在jQuery.ajax.success中调用时未定义错误

Question

I am making an ajax form submission inside an object.

When I try call the other object methods within the jQuery.ajax.success callback, this line throws an error...

Is this a scoping issue?

this.DisplayError(data.error);

this.DisplayError is not a function

Code:

    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

Use arrow function:

success: () => {

}

This happens because you are loosing context, Ajax assigns different context when calling success function. You can also save context in New variable:

var self = this;

And use it inside success function instead of this. Or you can define function context:

success: (function() {

}).bind(this)

Answer 2

this inside the success function is not equal to this outside. The simplest way to handle this is using arrow function.

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.
            }
        }); 
    }   
}

The magic is, arrow function does not has its own this . When you call this , it will refer to the outside one. But normal function has its own this , therefore when you call this , it will refer to its own this instead of the outside one.

For details, you may take a look on the MDN web docs