javascript - 不明白为什么这个 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.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);
}