Webエンジニア向けプログラミング解説動画をYouTubeで配信中!
▶ チャンネル登録はこちら

【JavaScript ECMAScript】Function::Function.prototype.bindインスタンスメソッドの使い方

Function.prototype.bind()インスタンスメソッドの使い方について、初心者にもわかりやすく解説します。

作成日: 更新日:

基本的な使い方

Function.prototype.bind()メソッドは、特定の関数が呼び出される際のthisの値と、その関数に渡される引数を固定した新しい関数を生成するメソッドです。JavaScriptでは、関数がどのように呼び出されるかによって、その関数内のthisの値が動的に変化することがあります。この挙動は、特にオブジェクトのメソッドをコールバック関数として使用する場合や、イベントハンドラを設定する際などに、意図しないコンテキストで関数が実行されてしまう原因となることがあります。

bind()メソッドは、このような問題を解決するために利用されます。このメソッドは、元の関数に対して呼び出されると、最初の引数で指定された値をthisとして固定し、さらに残りの引数で指定された値を元の関数に渡される初期引数(部分適用)として設定した、全く新しい関数を生成して返します。元の関数自体は一切変更されません。

生成された新しい関数は、いつ、どこで呼び出されても、bind()が実行された時点で指定されたthisの値と初期引数を常に保持します。これにより、開発者は関数のthisのコンテキストを確実に制御し、予測可能な動作を保証することができます。システムエンジニアを目指す方にとって、JavaScriptにおける関数の動作を深く理解し、柔軟なプログラミングを実現するために不可欠な機能の一つです。

公式リファレンス: Function.prototype.bind()

構文(syntax)

1const newFunction = originalFunction.bind(thisArg[, arg1[, arg2[, ...]]]);

引数(parameters)

thisArg, ...args

  • thisArg: 新しく作成される関数から呼び出されたときに、thisとして渡される値を指定します。
  • ...args: 新しく作成される関数に、初期値として渡される引数群を指定します。

戻り値(return)

Function

新しい関数を返します。この新しい関数は、bind()メソッドに渡された第一引数をthisの値として持ち、その後に続く引数をすべて束縛した状態で呼び出されます。

関連コンテンツ