JavaScript コールバック内で「this」に正しくアクセスするにはどうすればよいですか?

JavaScript コールバックの This Affinity

JavaScript では、イベント ハンドラー コールバック内でインスタンス メソッドを利用すると、「this」のスコープが意図したものから変更される可能性があります。コールバックを呼び出したソースへのインスタンス。したがって、以下の例のようなコードがよく使用されます:

function MyObject() {
  this.doSomething = function() {
    ...
  }

  var self = this
  $('#foobar').bind('click', function(){
    self.doSomethng()
    // this.doSomething() would not work here
  })
}

このアプローチは機能しますが、奇妙に見えるかもしれません。より最適な解決策はありますか?

クロージャと「this」アフィニティについて

この問題は jQuery を超え、JavaScript による「this」とクロージャの処理に起因します。以下に示すように、クロージャを使用すると、入れ子になった関数が外側の関数で定義された変数にアクセスできます。

var abc = 1; // we want to use this variable in embedded functions

function xyz(){
  console.log(abc); // it is available here!
  function qwe(){
    console.log(abc); // it is available here too!
  }
  ...
};

"This" の動作は異なります。特定のスコープ内で一定のままである通常の変数とは異なり、「this」はスコープ間で動的に変化します。

// we want to use "this" variable in embedded functions

function xyz(){
  // "this" is different here!
  console.log(this); // not what we wanted!
  function qwe(){
    // "this" is different here too!
    console.log(this); // not what we wanted!
  }
  ...
};

解決策: "this" のエイリアス

これを回避するには問題は、JavaScript を使用すると、変数に「this」を代入し、基本的にエイリアスを作成することができます。これにより、ネストされた関数全体で目的のオブジェクトを参照できるようになります。

var abc = this; // we want to use this variable in embedded functions

function xyz(){
  // "this" is different here! --- but we don't care!
  console.log(abc); // now it is the right object!
  function qwe(){
    // "this" is different here too! --- but we don't care!
    console.log(abc); // it is the right object here too!
  }
  ...
};

これと同じ原則が、「引数」などの他の疑似変数にも当てはまります。

以上がJavaScript コールバック内で「this」に正しくアクセスするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。