JavaScript でインスタンス メソッドをコールバックとして使用するときに「this」スコープを保持する方法は?

this JavaScript コールバックの難題

インスタンス メソッドをイベント ハンドラーとして割り当てる場合、this のスコープは、オブジェクト インスタンスをイベント呼び出し元に渡します。これにより問題が発生する可能性があり、次のような回避策を使用する必要があります。

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

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

このアプローチは機能しますが、ぎこちないように見えるかもしれません。もっと良い方法はありますか?

クロージャを理解する

根本的な問題は jQuery を超えており、JavaScript のクロージャの動作に根ざしています。クロージャを使用すると、内部関数が外部スコープで宣言された変数にアクセスできるようになります。ただし、this はスコープを動的に変更できる特別な変数です。

this を埋め込み関数にチャネルするには、this を abc

:

var abc = this;

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!
  }
  ...
};

これにより、abc

は埋め込み関数内でも正しいオブジェクト参照を保持できます。

結論

this のエイリアスを使用すると、スコープを損なうことなくインスタンス メソッドをコールバックとして効率的に使用できるようになります。この手法は、this だけでなく、arguments

などの他の疑似変数にも適用されます。

以上がJavaScript でインスタンス メソッドをコールバックとして使用するときに「this」スコープを保持する方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。