コンストラクタ関数。グローバル変数への参照を上書きすることはできません

Question

私はこのコンストラクタを使ってゲームのオブジェクトを作成します。 今、一連の画像が毎回上書きされ、すべてのオブジェクトが画面上で同じように見えるようになります。

は、ここで問題となっているオブジェクトです：

this.pics = foo; 

は全く何もしないように思わ

function Box() { 
    this.ready = false; 
    this.pics = pictures;//[]; 
    this.state = 0; 
    this.x = 0; 
    this.y = 0; 
    this.w = 1; 
    this.h = 1; 
    this.fill = "#444"; 
    this.load = function(array){ 
     var foo = []; 
     pictures = []; 
     for(var i = 0; i < array.length; i++){ 
      pictures.push(loadPic(array[i])); 
      foo.push(loadPic(array[i])); 
     } 
     //this.pics = pictures; 
     this.pics = foo; 
    } 
} 

ライン。

また、写真の初期値を "画像"（グローバル変数）以外に変更すると、ゲームが開始しません。

コンテックス：https://github.com/kaninepete/Javascript-Games/blob/images/MVP.js

Answer 1

最初にplayerとtargetオブジェクトを作成し、loadを呼び出して画像を読み込みます。関数を呼び出すには、オブジェクトドット法の構文を使用しているため、たとえばへのすべての参照は、必要な/期待どおりに設定する必要があります。

ただし、ゲームを開始するには、reset（例：myDown）を呼び出してください。 resetの中では、playerとtargetのオブジェクトは新しいインスタンスに置き換えられます（addRectの呼び出しに気付きます）。メソッドloadは、新しいインスタンスに対して決して呼び出されないため、両方とも同じ画像（Boxに初期設定されたグローバルpictures）が残されます。両方とも同じ配列picturesを共有しているため、同じ結果が表示されます。

一般的なアドバイス：お互いの依存関係が明白でないため、グローバル変数を削除することをお勧めします。次に、グローバルレベルで実装を倍増させる代わりに、reset関数を呼び出して初期化する必要があります。イベントハンドラを導入する前に静的な画像をペイントしてみてください。

Answer 2

はこれを試してみてください：

var $this = this; 
this.load = function(array){ 
    //... 
    $this.pics = foo; 
} 

あなたは関数内thisは、コンストラクタのようにthis同じではないことを認識する必要があります。実際にはload()にあるものは、ブラウザに機能点を指していますwindowオブジェクトです。

代わりに$thisという名前の変数を定義します（ほとんどの人はパターンでthatを好む）、関数内から参照してクロージャにします。

Answer 3

別個の機能内でthisを使用しても、変数が属するオブジェクトを指していません。