JavaScript のイベント ハンドラー内のインスタンス メソッドのスコープが正しいことを確認するにはどうすればよいですか?

イベント ハンドラー内のインスタンス メソッドの適切なスコープの確保: ベスト プラクティス

JavaScript 内でイベント ハンドラーのコールバックとしてインスタンス メソッドを利用すると、スコープの課題が生じます。 this 変数は、オブジェクト インスタンスの表現から、コールバックをトリガーする要素に遷移できます。これに対処するために、開発者はよく次のアプローチを採用します。

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

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

機能する一方で、可読性と効率性に関して懸念が生じる可能性があります。クロージャーの概念を利用する、より洗練されたソリューションが存在します。

クロージャーと変数の「チャネリング」

クロージャーを使用すると、埋め込み関数が親スコープで定義された変数にアクセスし、効果的に変数を「チャネリング」できるようになります。たとえば、次の例を考えてみましょう。

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 変数には無効です。

// 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 にエイリアスを割り当てる

この解決策には、これにエイリアスを割り当て、埋め込み関数内でその値を保持することが含まれます。

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 のイベント ハンドラー内のインスタンス メソッドのスコープが正しいことを確認するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。