JavaScript プロトタイプ関数で「この」参照を保存するにはどうすればよいですか?

JavaScript プロトタイプ関数での「this」参照の保持

JavaScript プロトタイプを使用する場合の一般的な課題の 1 つは、ネストされた関数内で「this」参照を保持することです。機能。これは、イベントやコールバックを処理する場合に特に重要になります。

「bind()」で「this」を保持する:

JavaScript の binding() メソッドを使用すると、元の関数の「this」参照を保持する新しい関数。これを使用すると、ネストされた関数内の "this" キーワードが常に目的のオブジェクトを参照するようにすることができます。

提供された例では:

MyClass.prototype.myfunc = function() {
  this.element.click(function() {
    // Use bind() to preserve "this"
    // ...
  }.bind(this));
};

ここでは、bind() を使用して次のことを行います。 MyClass オブジェクトの「this」参照を維持する新しいクリック イベント ハンドラーを作成します。これにより、イベント ハンドラー内で "this.myValue" などの MyClass プロパティにアクセスできるようになります。

クロージャによる "this" の保持:

別のアプローチ「this」を保持するにはクロージャを使用します。クロージャは、親スコープの実行が終了した後でも、親スコープの変数へのアクセスを保持する関数です。

提供された例では、クロージャを使用して「this」を保持できます:

MyClass.prototype.doSomething = function() {
  var that = this; // Capture "this" in a closure

  this.elements.each(function() {
    // Use "that" to access the MyClass properties
    // ...
  });
};

内部関数内では、「that」を参照することで MyClass プロパティにアクセスできます。

グローバル変数の使用を避ける:

一般的には使用を避けることをお勧めします。競合やグローバル名前空間の汚染につながる可能性があるため、グローバル変数を使用して「this」を保持します。

クリーンで効率的な解決策:

bind() またはクロージャーを使用すると、次のことが可能になります。設計原則に違反したり、不必要な複雑さを導入したりすることなく、JavaScript プロトタイプ関数の「this」を保持するクリーンで効率的な方法。

以上がJavaScript プロトタイプ関数で「この」参照を保存するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。