JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptのbind()関数の使い方を徹底解説！apply()との違いとは

bind()関数とは

bind()関数は、thisの参照先を固定した新しい関数を生成するメソッドです。実行結果として値を返すapply()関数とは異なり、bind()はコードを後から実行できる関数そのものを返します。

以下のコードを見てみましょう。apply()関数は値（720）を出力するのに対し、bind()関数は関数そのものを出力していることがわかります。

サンプルコード

<html>
<body>
<script>
   var obj = {num : 10};
   var mul = function(i, j, k){
      return this.num * i*j*k;
   }
   var array = [6,3,4];
   document.write(mul.bind(obj,array));
   document.write("</br>");
   document.write(mul.apply(obj,array));
</script>
</body>
</html>

実行結果

function () { [native code] }
720

bind()で生成した関数に引数を渡して値を取得する

通常、関数に引数を渡すと値が出力されます。bind()が返すのは関数であるため、その関数に引数を渡して実行すれば、値が出力されるというわけです。

サンプルコード

以下の例では、bind()で生成した関数を「round」という変数に代入し、その変数に引数を渡すことで、関数ではなく値を出力しています。

<html>
<body>
<script>
   var obj = {num : 10};
   var mul = function(i, j, k){
      return this.num * i*j*k;
   }
   var array = [6,3,4]
   var round = mul.bind(obj);
   document.write(round(6,3,4));
   document.write("</br>");
   document.write(mul.apply(obj,array));
</script>
</body>
</html>

実行結果

720
720

bind()とapply()の違いまとめ

両者の違いを整理すると以下のようになります。

  • apply()：thisを束縛し、その場で関数を即実行して値を返す
  • bind()：thisを束縛した新しい関数を返すだけで、その場では実行しない

bind()は、イベントハンドラやコールバック関数に特定のthisを渡したい場合や、引数の一部を先に固定する「部分適用」を実現したい場合に特に役立ちます。状況に応じてapply()とbind()を使い分けることで、より柔軟で保守性の高いコードを書くことができます。

  1. JavaScriptのapply()メソッドとは？別オブジェクトで関数を再利用する方法を解説

    JavaScriptのapply()メソッドとは JavaScriptのapply()メソッドを使用すると、あるオブジェクト向けに定義したメソッドを、別のオブジェクトでもそのまま再利用できます。最大の特徴は、関数に渡す引数を配列としてまとめて指定できる点です。これにより、柔軟で使い回しやすい関数設計が可能になります。 apply()の基本構文は以下のとおりです。 func.apply(thisArg, [arg1, arg2, ...]) 第1引数（thisArg）：関数内でthisとして参照されるオブジェクトを指定します。 第2引数（argsArray）：関数へ渡す引数を配列形式で指定しま

  2. JavaScriptで配列要素のすべての組み合わせを取得する方法

    JavaScriptでは、独自の関数を定義することで、配列内の値のすべての組み合わせを簡単に取得できます。ジェネレーター関数（function*）を再帰的に利用すると、コードを簡潔に保ちながら組み合わせを効率的に生成することが可能です。実装例以下のコードは、渡された配列の値から重複を許可したすべての組み合わせを生成する例です。function combination(values) {    function * combinationRepeat(size, v) {       if (size)