Don't understand why this JavaScript function can be called one way but not the other

Question

I recently started learning JavaScript for the purpose of creating HTML5 games, and I've come across a behavior that I'm having a hard time understanding.

As an example, I have a constructor that initializes new sprites with an array of actions that they should carry out every time the game updates (such as animating, moving, etc.). This JSFiddle demonstrates a basic implementation.

Essentially, I'm confused as to why this doesn't work...

Sprite = function () {

    this.actions = [this.animate];
};

Sprite.prototype = {

    animate: function () { /* animate the sprite */ },

    update: function () {

        this.actions[0]();  // doesn't do anything (?)
    }
};

...but this does

Sprite = function () {

    this.actions = [this.animate];
    this.holder = 'whatever';
};

Sprite.prototype = {

    animate: function () { /* animate the sprite */ },

    update: function () {

        this.holder = this.actions[0];
        this.holder();  // executes animate function as desired
    }
};

To my inexperienced eyes, both examples seem like they should do the exact same thing. So why does nothing happen if I call this.actions[0]() directly, but if I assign this.actions[0] to this.holder and then call this.holder(), it works just fine?

Answer 1

When a function is called, a value will be assigned to a local variable called this inside the function.

Unless you have done something to change it (e.g. new, bind(), call(), apply()), the value will be the object on which it is called. With foo.bar() this === foo inside the bar function.

this.actions[0]() makes this equal to the value of the actions property

this.holder() makes this equal to whatever the value of this is in the calling function.

Your function must depend on the value of this to do whatever it does.