2

私は Javascript を学習する方法を見つけようとしていますが、いくつかのコードが同一であり、結果が異なるという問題に直面しています。オブジェクト (インスタンス) を定義する方法は 3 つあります。

バージョン 1:

var obj = { //create the instance
  variable: value
};
obj.fun = function() {
  obj.variable += 1;
  console.log('obj.fun is called');
};

バージョン 2:

var obj = { //create the instance
  variable: value,
  fun: function() {
    this.variable += 1;
    console.log('obj.fun is called');
  }
};

バージョン 3:

function Obj() { //create the class
  this.variable = value;
  this.fun = function() {
    this.variable += 1;
    console.log('obj.fun is called');
  }
};
obj = new Obj(); //create the instance

実際、私がやろうとしているのは、これを使用して HTML5 キャンバスにマウス イベント ハンドラーを作成することです。

canvas_id.addEventListener("mousedown", obj.fun, false);

現在、このイベント リスナーを使用して関数を呼び出そうとすると、バージョン 1 しか機能obj.funしていませんが、バージョン 2 の方がクリーンだと思うので、使用することを好みます。バージョン 2 および 3 では、呼び出し時に関数が実行されobj.fun(newvalue)ますが (コンソール メッセージが作成されます)、変数は新しい値に変更されません。obj.variable元の値を取得しようとすると、返されます。

これら 3 つのバージョンの記述の正確な違いを知りたいので、いつ何を使用すればよいかを理解できます。前もって感謝します。

4

1 に答える 1

3

obj最初のバージョンにあるのは、目的のオブジェクトを保持する名前付き変数です。他の 2 つの場合、this(呼び出しのコンテキスト) はオブジェクトではありません (イベント処理のコールバックによくある問題です)。

バインディングを次のように変更することで、これらのバージョンを引き続き使用できます。

canvas_id.addEventListener("mousedown", obj.fun.bind(obj), false);

または（IE8と互換性があるため）

canvas_id.addEventListener("mousedown", function(){ obj.fun() }, false);
于 2013-10-31T15:24:01.523 に答える