このJavaScript関数を一方向に呼び出すことはできますが、もう一方向に呼び出すことはできません。

Question

最近、HTML5ゲームを作成する目的でJavaScriptを学習し始めました。 。

例として、新しいスプライトをゲームの更新（アニメーション、移動など）が行われるたびに実行する必要があるアクションの配列で初期化するコンストラクタがあります。 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]()はactionsプロパティ

this.holder()の値に等しいthisがthisの値は、呼び出し元の関数にあるものと同じthisになります。

あなたの機能は、それが何をするにしてもthisという値に依存している必要があります。この問題を解決するために

Answer 2

二つの方法：

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

または：this.actionsへ

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