Ajax成功函数中调用外部定义函数时出现未定义错误求助

你的代码存在两个核心问题：

• 对象定义语法错误：var ContainingObject { 漏写了赋值符号=，正确写法是var ContainingObject = {
• Ajax回调里的this指向异常：success回调函数默认的this指向window，而非ContainingObject实例，所以直接用this.FunctionForAfterwards找不到目标方法

下面是几种可行的修复方案：

方案1：提前保存实例的this引用 #

在FunctionWithAjaxCall内部把当前对象实例的this存到变量中，回调函数里通过这个变量调用方法：

var ContainingObject = {
    FunctionForAfterwards: function (responseObject, externalData) {
        /* 这里编写你的业务逻辑 */
        console.log(responseObject, externalData);
    },
    
    FunctionWithAjaxCall: function () {
        var self = this; // 保存当前对象实例的引用
        var externalData = "stuff and things";
        $.ajax({
            url: '/My/Url/',
            data: JSON.stringify(RequestData),
            type: 'POST',
            contentType: 'application/json; charset=utf-8',
            success: function (response) {
                self.FunctionForAfterwards(response, externalData);
            }
        });
    }
}

方案2：使用ES6箭头函数 #

箭头函数不会绑定独立的this，会继承外层作用域的this指向，写法更简洁：

var ContainingObject = {
    FunctionForAfterwards: function (responseObject, externalData) {
        /* 这里编写你的业务逻辑 */
        console.log(responseObject, externalData);
    },
    
    FunctionWithAjaxCall: function () {
        var externalData = "stuff and things";
        $.ajax({
            url: '/My/Url/',
            data: JSON.stringify(RequestData),
            type: 'POST',
            contentType: 'application/json; charset=utf-8',
            success: (response) => {
                this.FunctionForAfterwards(response, externalData);
            }
        });
    }
}

方案3：设置Ajax的context参数 #

jQuery的$.ajax支持通过context参数指定回调函数内的this指向：

var ContainingObject = {
    FunctionForAfterwards: function (responseObject, externalData) {
        /* 这里编写你的业务逻辑 */
        console.log(responseObject, externalData);
    },
    
    FunctionWithAjaxCall: function () {
        var externalData = "stuff and things";
        $.ajax({
            url: '/My/Url/',
            data: JSON.stringify(RequestData),
            type: 'POST',
            contentType: 'application/json; charset=utf-8',
            context: this, // 指定回调内的this为当前对象实例
            success: function (response) {
                this.FunctionForAfterwards(response, externalData);
            }
        });
    }
}

方案4：用bind绑定this指向 #

给success回调函数绑定this为当前对象实例：

var ContainingObject = {
    FunctionForAfterwards: function (responseObject, externalData) {
        /* 这里编写你的业务逻辑 */
        console.log(responseObject, externalData);
    },
    
    FunctionWithAjaxCall: function () {
        var externalData = "stuff and things";
        $.ajax({
            url: '/My/Url/',
            data: JSON.stringify(RequestData),
            type: 'POST',
            contentType: 'application/json; charset=utf-8',
            success: function (response) {
                this.FunctionForAfterwards(response, externalData);
            }.bind(this) // 绑定this为当前对象实例
        });
    }
}

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