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

JavaScriptでメソッドを借りる方法とは？call()・apply()・bind()の使い方を解説

JavaScriptでは、call()、apply()、bind() の3つのメソッドを使うことで、他のオブジェクトが持つメソッドを「借りて」実行することができます。このテクニックは「メソッドの借用（Method Borrowing）」と呼ばれ、コードの再利用性を高めるために広く活用されています。

call()・apply()・bind() の違い

  • call()：第1引数に this として渡したいオブジェクトを指定し、残りの引数はカンマ区切りで個別に渡します。呼び出し時に即座に実行されます。
  • apply()：call() とほぼ同じですが、引数を配列（または配列風オブジェクト）としてまとめて渡す点が異なります。
  • bind()：this を固定した新しい関数を返します。即座には実行されず、必要なタイミングで後から呼び出せます。

メソッドを借用するサンプルコード

以下は、オブジェクト obj が持つ welcome メソッドを、メソッドを持たない別のオブジェクト obj1 が借用して実行する例です。

<!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,.sample {
        font-size: 18px;
        font-weight: 500;
        color: rebeccapurple;
    }
    .result {
        color: red;
    }
</style>
</head>
<body>
<h1>JavaScriptでメソッドを借りる</h1>
<div class="sample"></div>
<div class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>
上のボタンをクリックすると、オブジェクトobjのwelcomeメソッドを借用します
</h3>
<script>
    let sampleEle = document.querySelector(".sample");
    let resultEle = document.querySelector(".result");
    let obj = {
        firstName: "Rohan",
        lastName: "Sharma",
        welcome() {
            return "Welcome " + this.firstName + " " + this.lastName;
        },
    };
    let obj1 = {
        firstName: "John",
        lastName: "Shaw",
    };
    sampleEle.innerHTML = "obj.welcome() = " + obj.welcome();
    document.querySelector(".Btn").addEventListener("click", () => {
        resultEle.innerHTML = "obj1.welcome() = " + obj.welcome.call(obj1);
    });
</script>
</body>
</html>

ポイントは obj.welcome.call(obj1) の部分です。call() の第1引数に obj1 を渡すことで、welcome メソッド内の this が obj1 を指すようになり、obj1 の firstName と lastName を使った結果が返されます。

実行結果

上記のコードを実行すると、次のような画面が表示されます。

JavaScriptでメソッドを借りる方法とは？call()・apply()・bind()の使い方を解説

「CLICK HERE」ボタンをクリックすると、借用したメソッドの実行結果が表示されます。

JavaScriptでメソッドを借りる方法とは？call()・apply()・bind()の使い方を解説


  1. JavaScriptでプロトタイプを使ってメソッドを共有する方法

    JavaScriptにおけるメソッドの共有JavaScriptでは、メソッドをオブジェクト（コンストラクタ関数）のprototypeプロパティに定義することで、複数のインスタンス間でそのメソッドを共有できます。通常、コンストラクタ内でthis.displayInfo = function(){...}のようにメソッドを定義すると、生成されるインスタンスごとに関数のコピーが作成され、メモリを無駄に消費します。一方、prototypeに定義すれば、関数は一度だけ生成され、すべてのインスタンスから参照・呼び出しできるようになります。これはメモリ効率の面でも大きなメリットがあります。以下は、JavaS

  2. JavaScriptでクラスに静的メソッドを割り当てる方法

    JavaScriptでクラスに静的メソッド（staticメソッド）を割り当てるには、メソッドの前にstaticキーワードを付けるだけです。静的メソッドは、クラスをインスタンス化することなく、クラス名から直接呼び出すことができます。 静的メソッドはクラスそのものに属するため、個々のインスタンスの状態に依存しないユーティリティ関数や計算処理などに適しています。なお、静的メソッドはインスタンスからは呼び出せず、必ずクラス名を介して呼び出す必要がある点に注意しましょう。 以下は、JavaScriptでクラスに静的メソッドを割り当てるコード例です。 コード例 <!DOCTYPE html>