先生と生徒の会話形式で理解しよう

生徒

「先生、JavaScriptの関数にある call、apply、bind って何ですか？どう違うんですか？」

先生

「それは関数を呼び出す時の特別な方法で、関数の中で使われる this の値を自由に変えられる便利な機能です。」

生徒

「thisって何ですか？」

先生

「thisは関数の中で、その関数が『誰のものか』を指す特別なキーワードです。普通は関数を呼んだオブジェクト（もの）を指しますが、callやapplyで変えられますよ。」

生徒

「具体的にどう使うんですか？わかりやすい例を教えてください！」

先生

「それでは、基本の使い方と違いを詳しく見ていきましょう！」

1. call, apply, bindとは？

JavaScriptの関数は普通、obj.func() のようにオブジェクトの一部として呼び出されることが多いです。このとき、関数の中の this はそのオブジェクト obj を指します。

でも、call、apply、bind を使うと、この this を好きなオブジェクトに変えて関数を呼べます。

これらの違いをかんたんにまとめると：

call：関数を呼び出しながら、thisと引数を個別に渡す
apply：関数を呼び出しながら、thisと引数を配列で渡す
bind：thisを固定した新しい関数を作る（あとで呼び出す）

2. this（ディス）とは？

thisは「今の関数がどのオブジェクトに属しているか」を示す特別なキーワードです。

例えば、猫のオブジェクト cat に「鳴く」関数があったら、その関数の this は cat を指します。


const cat = {
  name: "タマ",
  meow: function() {
    console.log(this.name + "がニャーと鳴きました");
  }
};

cat.meow();  // タマがニャーと鳴きました

この this.name は cat.name のことですね。

3. callの使い方

callは関数を「今すぐ呼び出し」、thisの中身と引数を個別に指定します。


function greet(greeting) {
  console.log(greeting + ", " + this.name);
}

const person = { name: "太郎" };

greet.call(person, "こんにちは");  // こんにちは, 太郎

ここでは、greet関数の中のthisをpersonに変えて呼んでいます。

引数は「こんにちは」という文字列を渡しています。

4. applyの使い方

applyはcallと似ていますが、引数は配列（リスト）で渡します。


greet.apply(person, ["おはようございます"]);  // おはようございます, 太郎

引数が複数ある場合に便利です。例えば：


function introduce(age, city) {
  console.log(this.name + "さんは、" + age + "歳で、" + city + "に住んでいます。");
}

introduce.apply(person, [30, "東京"]);
// 太郎さんは、30歳で、東京に住んでいます。

5. bindの使い方

bindはthisを固定した新しい関数を作ります。呼び出しはあとで行います。


const boundGreet = greet.bind(person);
boundGreet("こんばんは");  // こんばんは, 太郎

このように、bindはすぐ実行せず、thisを決めた関数を作るので、イベントや後で呼ぶ処理に使いやすいです。

6. call, apply, bindの違いまとめ

call：すぐ呼び出して、thisと引数を個別に渡す
apply：すぐ呼び出して、thisと引数を配列で渡す
bind：thisを固定した新しい関数を作り、あとで呼ぶ

7. まとめ

JavaScriptの関数呼び出しに使う call、apply、bind は、this の値を自由に操作できる便利な方法です。

使い方を理解すると、関数の中で「どのオブジェクトのことを話しているか」を自在に切り替えられて、複雑なコードも整理しやすくなります。

ぜひ実際に試して使いこなしてくださいね！

JavaScriptの関数の呼び出し方（call, apply, bindの違い）