在jQuery.ajax.success中调用JS嵌套函数时出现未定义错误

没错，这绝对是作用域绑定导致的问题！

当你在jQuery.ajax的success回调函数里使用this时，它的指向已经不再是你的toolsform对象了——在传统的函数回调中，this的绑定是由函数的调用方式决定的，这里jQuery会把回调里的this指向Ajax请求的配置对象（或者全局window对象，取决于你用的jQuery版本），所以自然找不到DisplayError这个属于toolsform的方法。

下面给你三种常用的解决办法，任选其一都能搞定：

方法1：提前保存当前对象的引用 #

在Ajax请求之前，把this（也就是toolsform对象）保存到一个变量里，比如self或者that，然后在回调里用这个变量来调用方法：

this.AjaxSumbit = function() {
    let formData = jQuery("#trialsToolsRegisterForm").serialize();
    formData += '&toolsFormSumbit=1';
    // 保存当前对象的引用到self变量
    const self = this;
    jQuery.ajax({
        type: "POST",
        url: this.sumbitUrl,
        dataType: 'json',
        data: formData,
        success: function(data) {
            if(data.success === false) {
                // 用self代替this调用DisplayError
                self.DisplayError(data.error);
            }
            console.log(data); // show response from the php script.
        }
    });
}

方法2：使用箭头函数 #

箭头函数不会创建自己的this上下文，它会继承外层作用域的this，也就是toolsform对象，这样直接在回调里用this就能访问到对象的方法：

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);
            }
            console.log(data); // show response from the php script.
        }
    });
}

方法3：利用jQuery的context配置项 #

jQuery的ajax方法提供了context参数，你可以把它设置为this，这样回调函数里的this就会指向你指定的toolsform对象：

this.AjaxSumbit = function() {
    let formData = jQuery("#trialsToolsRegisterForm").serialize();
    formData += '&toolsFormSumbit=1';
    jQuery.ajax({
        type: "POST",
        url: this.sumbitUrl,
        dataType: 'json',
        data: formData,
        // 指定回调里的this指向当前对象
        context: this,
        success: function(data) {
            if(data.success === false) {
                this.DisplayError(data.error);
            }
            console.log(data); // show response from the php script.
        }
    });
}

这三种方法都能完美解决你的问题，选哪种取决于你的代码风格和浏览器兼容性需求——箭头函数比较简洁优雅，但需要环境支持ES6；保存self的方法兼容性最好，老浏览器也能跑；context则是jQuery专门为这类场景提供的解决方案，语义更清晰。

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