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

JavaScriptのapply()関数の使い方とcall()関数との違いを解説

従来のJavaScriptでは、オブジェクトごとに固有のメソッドやプロパティを持たせるのが一般的でした。しかし、apply()関数を使えば、複数のオブジェクトを組み合わせてアクセスできるメソッドを構築することが可能になります。

実際のところ、このメソッドの動作はcall()関数とほぼ同じですが、配列のような変数を引数として渡したい場合には、apply()関数が活躍します。

次の例では、複数の引数が個別に渡されているため、apply()関数を使う必要はなく、代わりにcall()関数が使用されています。

サンプルコード

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

実行結果

720

次の例では、個別の引数の代わりに配列を渡しています。この場合、call()関数はNaNを返すのに対し、apply()関数は正しい値を返します。これは、call()関数が配列を引数として正しく扱えないためです。

サンプルコード

<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.call(obj,array));
        document.write("</br>");
        document.write(mul.apply(obj,array));
    </script>
</body>
</html>

実行結果

NaN
720

このように、引数を個別に渡す場合はcall()関数、配列としてまとめて渡す場合はapply()関数を使い分けることで、柔軟なメソッドの実装が可能になります。

  1. JavaScriptのcall()メソッドとは？使い方と実行例をわかりやすく解説

    JavaScriptのcall()メソッドを使うと、あるオブジェクト向けに定義されたメソッドを、別のオブジェクトに対しても再利用できます。つまり、同じ関数をさまざまなオブジェクトから呼び出せるようになるのです。call()メソッドの大きな特徴は、引数（パラメータ）をカンマ区切りで個別に渡すという点です。これにより、thisの参照先を任意のオブジェクトに変更しながら、必要な値も同時に渡せます。call()メソッドの基本的な仕組みcall()は以下のような形式で使用します。関数名.call(thisArg, 引数1, 引数2, ...)第1引数（thisArg）：関数内でthisとして参照されるオ

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

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