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

JavaScriptのcall()メソッドで引数を渡す方法をわかりやすく解説

JavaScript call()メソッドとは？

JavaScriptのcall()メソッドを使うと、あるオブジェクト向けに定義した関数を、別のオブジェクトのコンテキストで実行できます。thisの参照先を差し替えることで、同じメソッドを複数のオブジェクト間で再利用できるのが最大のメリットです。

call()の特徴は、第1引数にthisとして渡したいオブジェクトを指定し、第2引数以降に関数へ渡す値をカンマ区切りで個別に指定する点です。引数を配列としてまとめて渡すapply()メソッドとの違いは、この部分にあります。

サンプルコード

以下は、call()メソッドに引数を渡して呼び出す具体例です。

<!DOCTYPE html>
<html lang="en">
<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;
    }
    .sample {
        font-size: 18px;
        font-weight: 500;
    }
</style>
</head>
<body>
<h1>JavaScript call()</h1>
<div class="sample"></div>
<button class="Btn">CLICK HERE</button>
<h3>Click on the above buttons to check if adult or not</h3>
<script>
    let sampleEle = document.querySelector(".sample");
    let obj1 = { name: "Rohan", age: 22 };
    function checkAdult(vehicle, country) {
        if (this.age > 18) {
            sampleEle.innerHTML = this.name + " you are an adult and can drive " + vehicle + " in " + country;
        }
        else
            sampleEle.innerHTML = this.name + " you are not an adult and cannot drive " + vehicle + " in " + country;
    }
    document.querySelector(".Btn").addEventListener("click", () => {
        checkAdult.call(obj1, 'car', 'INDIA');
    });
</script>
</body>
</html>

実行結果

上記のコードをブラウザで実行すると、次のように表示されます。

JavaScriptのcall()メソッドで引数を渡す方法をわかりやすく解説

「CLICK HERE」ボタンをクリックすると、checkAdult.call(obj1, 'car', 'INDIA')が実行されます。このとき、第1引数のobj1がthisとして扱われ、「Rohan」「22歳」という情報とともに、渡された引数（乗り物・国名）が画面に反映され、次のように表示されます。

JavaScriptのcall()メソッドで引数を渡す方法をわかりやすく解説

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

    JavaScriptには、関数の呼び方を柔軟に制御できるメソッドとして call() と apply() が用意されています。どちらも「this」の値を指定しながら関数を実行できる点は共通していますが、引数の渡し方が異なります。 call() と apply() の違い call(): 引数を個別の値（カンマ区切り）として渡します。 apply(): 引数を配列（または配列風オブジェクト）として一括で渡します。 それでは、実際に両方のメソッドを使って関数を呼び出すサンプルコードを見てみましょう。 サンプルコード <!DOCTYPE html> <html lang=ja>

  2. 【JavaScript入門】onclick()でボタンクリック時に関数を呼び出す方法

    はじめにWebページのボタンがクリックされたときに、特定の関数を実行したい場面は非常によくあります。JavaScriptでは、HTML要素のonclick属性に関数名を指定するだけで、この動作を簡単に実現できます。例えば、次のようなボタンがあるとします。<button onclick="displayingMessageOnButtonClick()">押してください</button>このボタンがクリックされた際に、指定した関数を呼び出すことが目的です。コード例以下がその完全なサンプルコードです。<!DOCTYPE html> <h