JavaScript プロトタイプ関数でコンテキストを保持するにはどうすればよいですか?

JavaScript プロトタイプ関数でのコンテキストの保持: 総合ガイド

多くの JavaScript 開発者は、コンテキスト (「this の値」) を保持しようとすると課題に遭遇します。 ") プロトタイプ関数内。このガイドは、この問題を効果的に解決する方法を包括的に理解することを目的としています。

提供された例では:

MyClass = function() {
  this.element = $('#element');
  this.myValue = 'something';

  // some more code
}

MyClass.prototype.myfunc = function() {
  // at this point, "this" refers to the instance of MyClass

  this.element.click(function() {
    // at this point, "this" refers to the DOM element
    // but what if I want to access the original "this.myValue"?
  });
}

new MyClass();

この問題は、イベント ハンドラーがプロトタイプ関数内で定義されているときに発生します。私の機能。」クリック イベント中、「this」は MyClass インスタンスを参照するのではなく、DOM 要素を参照します。

Bind によるコンテキストの保持

「bind」メソッドは、簡単な解決策。別のコンテキストで呼び出された場合でも、元の関数のコンテキスト (この値) を保持する新しい関数が作成されます。

例ではバインドを使用します。

MyClass.prototype.myfunc = function() {

  this.element.click((function() {
    // ...
  }).bind(this));
};

クリックイベント ハンドラーは MyClass インスタンス コンテキストを保持し、「this.myValue」へのアクセスを許可します。

追加のバインディングの例

var obj = {
  test: 'obj test',
  fx: function() {
    alert(this.test + '\n' + Array.prototype.slice.call(arguments).join());
  }
};

var test = "Global test";
var fx1 = obj.fx;
var fx2 = obj.fx.bind(obj, 1, 2, 3);

fx1(1,2);
fx2(4, 5);

この例では:

• fx1 が直接呼び出され、「this」のグローバル コンテキスト (「グローバル テスト」) が生成されます。
• fx2 は、obj のコンテキストを保持し、引数を正しく渡すバインド関数です。

カスタマイズに関する考慮事項

複数のプロトタイプ関数でコンテキストの保持が必要な場合は、カスタム バインド関数の作成が必要になる場合があります。 MyClass のコンテキスト認識バージョンのバインドを作成できます:

MyClass.prototype.myBind = function(func) {
  var context = this;
  return function() {
    func.apply(context, arguments);
  };
};

このカスタム バインド メソッドはプロトタイプ関数内で使用できます:

MyClass.prototype.myfunc = function() {

  this.element.click(this.myBind(function() {
    // ...
  }));
};

結論

JavaScript プロトタイプ関数でコンテキストを保持することは、適切な機能を維持し、予期しない動作を回避するために重要です。 「バインド」方法は効果的で直感的なソリューションを提供しますが、より複雑なシナリオではカスタマイズが必要になる場合があります。これらのテクニックを理解することで、コンテキストの保持を損なうことなく、自信を持ってプロトタイプ関数を使用できるようになります。

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