不明白為什么可以以一種方式調用此JavaScript函數，而不能以另一種方式調用

Question

我最近開始學習JavaScript以創建HTML5游戲，並且遇到了我很難理解的行為。

舉例來說，我有一個構造函數，它使用每次游戲更新（例如動畫，移動等）時應執行的一系列動作來初始化新的精靈。 該JSFiddle演示了一個基本實現。

本質上，我對為什么這不起作用感到困惑...

Sprite = function () {

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

Sprite.prototype = {

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

    update: function () {

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

...但是

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
    }
};

在我的經驗不足的人看來，兩個示例似乎都應該做完全相同的事情。 那么，為什么沒有發生，如果我叫this.actions[0]()直接，但如果我給你this.actions[0]到this.holder ，然后調用this.holder()它工作得很好？

Answer 1

當一個函數被調用時，值將被分配到所謂的局部變量this函數內部。

除非您做了一些更改（例如new ， bind() ， call() ， apply() ），否則該值將是調用它的對象。 使用foo.bar() this === foo bar函數中的this === foo 。

this.actions[0]()使得this等於的值actions屬性

this.holder()使得this等於任何的值this是在呼叫功能。

您的功能必須依賴this的值才能執行任何操作。

Answer 2

解決此問題的兩種方法：

Sprite = function () {
    this.actions = [this.animate.bind(this)];
};

要么：

update: function () {
    this.actions[0].call(this);
}