JavaScript の「bind()」メソッドは「this」キーワードをどのように制御しますか?

JavaScript の binding() メソッドについて理解する

JavaScript の binding() メソッドを使用すると、関数内で this キーワードの値を明示的に設定することで新しい関数を作成できます。その仕組みは次のとおりです。

bind() の目的

bind() は、最初の引数として指定された特定のオブジェクトに this キーワードをバインドする新しい関数を返します。これにより、バインドされた関数が呼び出されるときに、呼び出し方法に関係なく、 this キーワードが常に指定されたオブジェクトを参照するようになります。

使用例

次のコードを考えてみましょう:

var myButton = {
  content: 'OK',
  click() {
    console.log(this.content + ' clicked');
  }
};

myButton.click();
var looseClick = myButton.click;
looseClick(); // not bound, 'this' is not myButton - it is the globalThis
var boundClick = myButton.click.bind(myButton);
boundClick(); // bound, 'this' is myButton

この例では、myButton オブジェクト内に click() メソッドが定義されています。 click() がオブジェクトに対して直接呼び出されると、これは myButton オブジェクトを参照しているため、「OK がクリックされました」と正しく出力されます。ただし、本質的に自由な関数であるlooseClick変数にclick()を割り当てると、thisキーワードはmyButtonを参照せず、デフォルトでグローバルコンテキストに設定されます。

thisキーワードがバインドされたままであることを保証するには、 myButton では、bind() を使用します。 boundClick 変数は、bind(myButton) を使用して myButton オブジェクトを click() メソッドにバインドすることによって作成されます。 boundClick() が呼び出されると、this キーワードは myButton に正しくバインドされ、目的の動作が保証されます。

追加引数のバインド

this オブジェクトの後に追加の引数を binding() に渡すこともできます。 。これらの引数は新しい関数に事前にバインドされているため、部分的に適用された関数を簡単に作成できます。例:

var sum = function(a, b) {
  return a + b;
};

var add5 = sum.bind(null, 5);
console.log(add5(10)); // prints 15

この例では、sum() 関数を null (初期値がないことを意味します) にバインドし、最初の引数として 5 を渡します。結果として得られる add5() 関数は、(通常の 2 つの引数ではなく) 1 つの引数を指定して呼び出すことができ、常にその引数に 5 を加算します。

結論

bind() メソッドは、this キーワードを明示的に制御するための JavaScript の強力なツールです。これにより、独立して呼び出されたときに正しいコンテキストを維持するバインドされた関数を簡単に作成できます。アロー関数の出現により、bind() はそれほど一般的には使用されなくなったかもしれませんが、this キーワードの制御が重要な特定のシナリオでは依然として貴重なツールです。

以上がJavaScript の「bind()」メソッドは「this」キーワードをどのように制御しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。