Question

我是JavaScript / jQuery等的初学者，我面临一个小问题，也许你可以帮我解决。我有一个对象原型名称页面，其中有一个数组和一个执行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
        });
    }
};

Answer 2

我喜欢使用that来处理不同的this闭包，例如：

function Page( url ){

    var that = this;
    that.url = url;
    that.elarr = [];

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

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

Answer 3

尝试使用context对象

的$.ajaxSettings选项

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

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

        this.job = function(){
            $.ajax( {
                url:this.url,
                // some data here...
                data:{},
                // set `context`
                context:this,
                type:"POST"
                })
                .then(function( data, status ){
                    var decodedData = JSON.parse(data);
                    this.elarr[0].value = decodedData.value; // Error: elarr is not defined
                });
        }
    };

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

3 个答案: