javascript - 不明白为什么这个 JavaScript 函数可以用一种方式调用而不能用另一种方式调用

Question

我最近开始学习 JavaScript 是为了创建 HTML5 游戏，我遇到了一种我很难理解的行为。

例如，我有一个构造函数，它使用每次游戏更新时它们应该执行的一系列操作来初始化新 Sprite (例如动画、移动等)。 This 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() )，该值将是调用它的对象。在 bar 函数中使用 foo.bar() this === foo。

this.actions[0]() 使 this 等于 actions 属性的值

this.holder() 使 this 等于调用函数中 this 的值。

您的函数必须依赖于 this 的值才能执行任何操作。