$ .post的回调无法访问此内容

Question

我是JavaScript/jQuery等的初学者,我面临一个小问题,也许你可以帮我解决.我有一个对象原型名称Page,其中有一个数组和一个执行AJAX POST并处理答案的函数.代码如下所示:

function Page( url ){
    this.url = url;
    this.elarr = [];

    this.addElem = function( elem ){
        this.elarr.push( elem );
    }

    this.job = function(){
        $.post( this.url,
            {
                // some data here...
            },
            function( data, status ){
                var decodedData = JSON.parse( data );
                this.elarr[0].value = decodedData.value; // Error: elarr is not defined
            });
    }
};

我做了类似的事情:var page = new Page( 'page.php' ); page.addElem( new Elem );哪里Elem是原型.value.

服务器端的php代码正确回答了POST请求.通过使用Chrome开发工具,我可以执行JavaScript代码并解码的Json答案是正确的.当它试图访问时出现问题this.elarr[0](是的,在第1页,elarr [0]存在!)例如,如果我用硬编码替换伪造的线,page1.elarr[0].value = decodedData.value;它就能很好地工作.

我知道回调函数是异步的,也许这在它里面没有意义(似乎是!)我也读到了"闭包"但我不确定它是否是我问题的解决方案.我很确定它很简单,但我无法用我有限的知识来解决这个问题.有人能帮我吗？

Answer 1

在ajax中,回调方法this引用了jqXHR设置对象,在这种情况下,您可以使用.bind()或$ .proxy()来使用自定义上下文

function Page(url) {
    this.url = url;
    this.elarr = [];

    this.addElem = function (elem) {
        this.elarr.push(elem);
    }

    this.job = function () {
        $.post(this.url, {
            // some data here...
        }, (function (data, status) {
            var decodedData = JSON.parse(data);
            this.elarr[0].value = decodedData.value; // Error: elarr is not defined
        }).bind(this));
    }
};

另一种选择是使用闭包变量

function Page(url) {
    this.url = url;
    this.elarr = [];

    this.addElem = function (elem) {
        this.elarr.push(elem);
    }

    var self = this; //closure variable
    this.job = function () {
        $.post(this.url, {
            // some data here...
        }, function (data, status) {
            var decodedData = JSON.parse(data);
            self.elarr[0].value = decodedData.value; // Error: elarr is not defined
        });
    }
};