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

JavaScript プロトタイプ関数で 'this' 参照を保持する方法

JavaScript では、プロトタイプ関数で 'this' への参照を保持することができます。範囲が変わると挑戦的になります。この問題に対処するには、次の解決策を検討してください。

バインド メソッドの使用

バインド メソッドを使用すると、「this」参照を保持する新しい関数を作成できます。元のオブジェクト。使用法:

function.bind(object, argument1, argument2, ...);

例:

MyClass.prototype.myfunc = function() {
  this.element.click(this.myfunc.bind(this));
};

これにより、クリック イベントがトリガーされたときに 'this' が MyClass インスタンスを参照することが保証されます。

「this」への参照の作成

プロトタイプ関数内で「this」への参照を作成することもできます。

MyClass.prototype.myfunc = function() {
  var myThis = this;
  ...
};

これにより、「this.myValue」にアクセスできるようになります。ネストされた関数内。ただし、プロトタイプ関数ごとにこれらの参照を作成する必要があり、面倒な場合があります。

アロー関数の使用

アロー関数は、コードを簡素化できる周囲のコンテキスト:

MyClass.prototype.doSomething = () => {
  // operate on the element
};

グローバル変数の回避

グローバル名前空間を汚染するため、「this」参照を保持するためにグローバル変数を使用しないでください。複数の MyClass オブジェクトが存在する場合、競合が発生する可能性があります。

jQuery Each の例

jQuery の each メソッドを使用するには、bind メソッドを使用して ' this' 参照:

MyClass.prototype.doSomething = function() {
  this.elements.each(this.doSomething.bind(this));
};

結論

プロトタイプ パターンを使用することは一般に良い習慣と考えられていますが、正しい 'this' 参照を維持する方法を理解することは、保存するために不可欠です。オブジェクトの状態と動作。バインド メソッドやその他のテクニックは、この課題に対する効果的な解決策を提供します。

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