为什么在此示例中出现“无法读取未定义的属性'文本'”？

Question

I'm in the progress of making a game, which you can by clicking here . My first question is why I'm getting

Cannot read property 'text' of undefined

when the snake (green blocks) hits the food (red circle).

The line that is invoking the error is the this.scoreElem.text(newScore); from

function StatHandler ( totalScoreSelector, fruitEatenSelector )
{
    this.scoreElem = $(totalScoreSelector);
    this.fruitEeatenElem = $(fruitEatenSelector);

    this.incrementScore = function ( incAmount )
    {
        $.ajax({
            type: "POST",
            url: "Play/IncrementScore?amount=" + incAmount,
            success: function (newScore)
            {
                this.scoreElem.text(newScore);
            },
            error: function ( ) 
            {
                alert("error occured!");
            }
        });
    }
}

The instance of a StatHandler object is created by

var H = new StatHandler("#total-score", "#fruit-eaten"); 

inside a $(document).ready , where I've verified that #total-score and #fruit-eaten are valid selectors since they are id s of elements I've verified to be in the DOM.

Full code can be seen here .

Also, as you may have noticed, I'm trying to update the score on the server side and send the updated score back to the client. But, this doesn't prevent the client from cheating by running

SG.stats.incrementScore(1000000000);

in the JS console. How do I prevent cheating?

Answer 1

At this moment your this keyword isn't referring to the object you want it to. It's bound to the scope of the success function. So this.scoreElem is undefined. Calling text on undefined will raise an error.

function StatHandler ( totalScoreSelector, fruitEatenSelector )
{
    this.scoreElem = $(totalScoreSelector);
    this.fruitEeatenElem = $(fruitEatenSelector);

    this.incrementScore = function ( incAmount )
    {
        var self = this;
        $.ajax({
            type: "POST",
            url: "Play/IncrementScore?amount=" + incAmount,
            success: function (newScore)
            {
                self.scoreElem.text(newScore);
            },
            error: function ( ) 
            {
                alert("error occured!");
            }
        });
    }
}   

Referring this via self will get it to work. Since JavaScript uses lexical scoping, the variable self will be available when the ajax success function is parsed.

Answer 2

You can use context property of $.ajax options to set what this is within the callbacks if you don't want it to be the settings object.

this.incrementScore = function ( incAmount )
    {

        $.ajax({
            type: "POST",
            context: this, // set callback context
            url: "Play/IncrementScore?amount=" + incAmount,
            success: function (newScore)
            {
                this.scoreElem.text(newScore);
            },
            error: function ( ) 
            {
                alert("error occured!");
            }
        });
    }