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

JavaScriptのcall()とapply()で関数を呼び出す方法をわかりやすく解説

JavaScriptには、関数の呼び方を柔軟に制御できるメソッドとして call() と apply() が用意されています。どちらも「this」の値を指定しながら関数を実行できる点は共通していますが、引数の渡し方が異なります。

call() と apply() の違い

call(): 引数を個別の値（カンマ区切り）として渡します。

apply(): 引数を配列（または配列風オブジェクト）として一括で渡します。

それでは、実際に両方のメソッドを使って関数を呼び出すサンプルコードを見てみましょう。

サンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .result {
        font-size: 18px;
        font-weight: 500;
        color: blueviolet;
    }
</style>
</head>
<body>
<h1>call()とapply()による関数の呼び出し</h1>
<div class="result"></div>
<br />
<button class="Btn">ここをクリック</button>
<h3>上のボタンをクリックすると、call()とapply()で関数が呼び出されます</h3>
<script>
    let resEle = document.querySelector(".result");
    let BtnEle = document.querySelector(".Btn");
    function addNum(num1, num2, num3, num4) {
        return num1 + num2 + num3 + num4;
    }
    function multiplyNum(num1, num2, num3, num4) {
        return num1 * num2 * num3 * num4;
    }
    let arr = [22, 33, 44, 55];
    BtnEle.addEventListener("click", () => {
        resEle.innerHTML = "数値の合計 = " + addNum.call(this, 22, 33, 44, 55) + "<br>";
        resEle.innerHTML += "配列要素の積 = " + multiplyNum.apply(this, arr) + "<br>";
    });
</script>
</body>
</html>

コードの解説

このサンプルでは、4つの数値を受け取って合計を返す addNum() 関数と、同じく4つの数値を受け取って積を返す multiplyNum() 関数を定義しています。

ボタンをクリックすると、addNum.call(this, 22, 33, 44, 55) のように、call()メソッドでは引数をカンマ区切りで個別に渡し、multiplyNum.apply(this, arr) のように、apply()メソッドでは配列arrをそのまま渡しています。どちらの場合も第1引数の「this」は関数内でのthisの参照先を指定する役割を持っています。

実行結果

ページを開いた直後の画面：

JavaScriptのcall()とapply()で関数を呼び出す方法をわかりやすく解説

「ここをクリック」ボタンを押すと −

JavaScriptのcall()とapply()で関数を呼び出す方法をわかりやすく解説

このように、画面に「数値の合計 = 154」と「配列要素の積 = 1779840」という計算結果が表示されれば成功です。

まとめ

call() と apply() は、既存の関数を別のコンテキストで再利用したい場合や、配列の要素をそのまま関数の引数として渡したい場合に非常に便利です。特に apply() は、Math.max.apply(null, 配列) のように配列から最大値・最小値を求める際などにもよく使われるテクニックなので、ぜひ覚えておきましょう。

  1. JavaScriptとCSSで作る！タイプライター風の文字入力・削除エフェクトの実装方法

    CSSアニメーションとJavaScriptを組み合わせることで、まるでタイプライターで打っているかのような「文字の入力」と「削除」を繰り返すエフェクトを実装できます。Webサイトのヒーローセクションやキャッチコピーの演出など、訪問者の目を引く演出として幅広く活用できる人気のテクニックです。以下のサンプルコードでは、複数のテキストを順番にタイプ表示し、すべて表示し終えると今度は1文字ずつ削除していく動きを再現しています。実装例<!DOCTYPE html> <html> <style> div {    display: flex; &nb

  2. JavaScriptでCSS変数を取得・設定する方法

    JavaScriptを活用すると、CSS変数（カスタムプロパティ）の値を動的に読み取ったり、書き換えたりすることができます。ポイントになるのは、次の3つのメソッドです。 1. getComputedStyle() ― 適用済みスタイルの取得 getComputedStyle()メソッドは、対象の要素に実際に適用されているすべてのスタイル情報を含むオブジェクトを返します。このオブジェクトには、CSS変数の値も含まれています。 2. getPropertyValue() ― 目的のプロパティ値の取得 getComputedStyle()が返したオブジェクトに対してgetPropertyVal