Javascript closure：モデルへの直接アクセスと変数の使用の違い

Question

私は、このコードが期待どおりに機能しないことに気付きました。

メッセージRENDER_IMAGEはペイロード内に別のイメージで複数回ブロードキャストされますが、下のコードのself.model.get（ "image"）は常に最後のイメージを返します。どうして？

bus.subscribe("RENDER_IMAGE", (message, payload) => { 
    const self = this; 
    self.model.set(payload); 

    self.render().then(function() { 
      bus.broadcast("IMAGE_RENDER_COMPLETE", self.model.get("image")); 
     }); 
}); 

はまた、このコードは正しく動作します：

bus.subscribe("RENDER_IMAGE", (message, payload) => { 
     const self = this; 
     self.model.set(payload); 
     const image = self.model.get("image")); 

     self.render().then(function() { 
       bus.broadcast("IMAGE_RENDER_COMPLETE", image; 
      }); 
    }); 

Answer 1

を最初の例では、あなたが完了したレンダリング後にモデルからimageフィールドを取得しています。
最初のレンダリングが完了する前に、1つまたは複数のイベントが発生している可能性があります。このようなイベントが発生するたびに、imageフィールドを更新しています。

I.e.このようなものは、あなたがそれを設定した後、あなたがimage提出権を取得された第2の例では

RENDER_IMAGE triggered 
Set image field   (image = 0) 
Start render (0) 

RENDER_IMAGE triggered 
Set image field   (image = 1) 
Start render (1) 

Render finished (0) 
Get image field (1, because image = 1) 

Render finished (1) 
Get image field (1, because image = 1) 

を発生します。 JavaScriptがあるので、単一のは、const image = self.model.get("image"));が実行される前に、別のself.model.set(payload);が呼び出されたことは不可能であるスレッド：

RENDER_IMAGE triggered 
Set image field   (image = 0) 
Get image field (0, because image = 0) 
Start render (0) 

RENDER_IMAGE triggered 
Set image field   (image = 1) 
Get image field (1, because image = 1) 
Start render (1) 

Render finished (0) 

Render finished (1) 

---

あなたはまだ直接モデルにアクセスし、代わりに変数を使用しての間に差がある理由を不思議に思う場合：すべてイベントハンドラの呼び出しには自身のimageという変数がありますが、それらはすべて共有というモデルにアクセスします。

これは共有データの特性の1つで、非同期プロセスを扱う際に共有データを慎重に処理する必要がある理由です。