如何向$.ajax的success函数传递对象以更新实例成员

这是个很常见的JavaScript上下文绑定问题，我来给你几种靠谱的解决方案，都能帮你把Caller实例传递到success函数里完成成员更新：

方法1：提前保存当前实例的引用（经典兼容方案） #

在makeRequest方法里，先把当前Caller实例的this存到一个变量（比如self或that），这样在success回调里就能通过这个变量访问实例的成员了。这个方法兼容性极好，适合所有JavaScript环境：

function Caller() {
    this.data1 = 0;
    this.data2 = 1;
    this.makeRequest = function () {
        var self = this; // 保存当前Caller实例的引用
        $.ajax({
            url: "some url",
            data: somedata,
            dataType: "json",
            success: function ( data ) {
                // 用self访问Caller实例的成员
                self.data1 = data.data1;
                self.data2 = data.data2;
            }
        });
    };
}

方法2：使用jQuery ajax的context参数 #

jQuery的$.ajax提供了context选项，专门用来指定回调函数中的this指向。直接把当前Caller实例（也就是this）传给context，这样success函数里的this就会指向Caller实例：

function Caller() {
    this.data1 = 0;
    this.data2 = 1;
    this.makeRequest = function () {
        $.ajax({
            url: "some url",
            data: somedata,
            dataType: "json",
            context: this, // 指定success回调的this为当前Caller实例
            success: function ( data ) {
                // 这里的this就是Caller实例
                this.data1 = data.data1;
                this.data2 = data.data2;
            }
        });
    };
}

方法3：使用ES6箭头函数（简洁现代方案） #

如果你的项目环境支持ES6+语法，箭头函数会是最简洁的选择。箭头函数不会创建自己的this上下文，它会继承外层作用域的this，所以success里的this直接就是Caller实例：

function Caller() {
    this.data1 = 0;
    this.data2 = 1;
    this.makeRequest = function () {
        $.ajax({
            url: "some url",
            data: somedata,
            dataType: "json",
            success: ( data ) => {
                // 箭头函数继承外层的this，也就是Caller实例
                this.data1 = data.data1;
                this.data2 = data.data2;
            }
        });
    };
}

你可以根据自己项目的兼容性要求和代码风格来选择合适的方法~

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