call / apply / bind の基本 — fn.call(ctx, arg1) / fn.apply(ctx, [args]) / fn.bind(ctx)
JavaScript では 関数の呼び出し時に this を指定するための便利なメソッドが用意されています。
初心者が混乱しやすいポイントですが、仕組みを理解すると「関数をどのオブジェクトのメソッドとして動かすか」を自由にコントロールできます。
基本の違い
| メソッド | 役割 | 引数の渡し方 | 戻り値 |
|---|---|---|---|
call | 関数を即実行 | 個別に渡す (arg1, arg2) | 関数の戻り値 |
apply | 関数を即実行 | 配列で渡す ([arg1, arg2]) | 関数の戻り値 |
bind | 新しい関数を作る | 個別に渡す | this が固定された関数 |
基本のコード例
function greet(msg) {
console.log(msg + " " + this.name);
}
const person = { name: "Aki" };
// call: 引数を個別に渡す
greet.call(person, "こんにちは"); // → "こんにちは Aki"
// apply: 引数を配列で渡す
greet.apply(person, ["やっほー"]); // → "やっほー Aki"
// bind: 新しい関数を作る
const bound = greet.bind(person);
bound("Hello"); // → "Hello Aki"
よく使うテンプレート集
配列操作に使う（apply）
const numbers = [5, 8, 2];
const max = Math.max.apply(null, numbers);
console.log(max); // 8
イベントハンドラで this を固定（bind）
const obj = {
name: "Mika",
show() {
console.log(this.name);
}
};
const btn = document.getElementById("btn");
btn.addEventListener("click", obj.show.bind(obj));
// → ボタンを押すと "Mika" が表示される
複数引数を渡す（call）
function sum(a, b) {
console.log(this.prefix, a + b);
}
const ctx = { prefix: "結果:" };
sum.call(ctx, 3, 4); // → "結果: 7"
例題: クラス風の利用
function Person(name) {
this.name = name;
}
function sayHello() {
console.log("Hello, " + this.name);
}
const p1 = new Person("Aki");
const p2 = new Person("Mika");
// p1 のコンテキストで sayHello を実行
sayHello.call(p1); // "Hello, Aki"
sayHello.call(p2); // "Hello, Mika"
- 効果: 同じ関数でも
thisを変えることで違うオブジェクトに対応できる。
実務でのコツ
- call/apply: 即実行したいときに使う。
- apply: 引数が配列で渡ってくるときに便利。
- bind: コールバックやイベントで
thisが変わってしまうのを防ぐ。 - アロー関数との違い: アロー関数は
thisを固定するので、bindと似た効果を持つ。
ありがちなハマりポイントと対策
thisが意図しない値になる:- イベントや非同期処理で
thisが変わる。 - 対策:
bindやアロー関数で固定。
- イベントや非同期処理で
- apply と call の違いが混乱:
- call → 引数を個別に渡す。
- apply → 引数を配列で渡す。
練習問題（配列の最大値を求める）
const arr = [10, 20, 5, 8];
const max = Math.max.apply(null, arr);
console.log("最大値:", max); // → 20
- 効果:
applyを使って配列を展開し、最大値を求められる。
直感的な指針
- call = 即実行（引数は個別）
- apply = 即実行（引数は配列）
- bind = 新しい関数を作ってあとで実行
- 「this を自由に切り替える」ための道具
これを覚えれば「イベントで this を固定」「配列を関数に渡す」「オブジェクトごとに関数を使い回す」といった場面で自在に活用できます。