アロー関数とbindの違いを初心者向けに解説
JavaScriptで「thisが思った通りにならない！」というときによく出てくるのが アロー関数 と bind。どちらも「thisを固定する」ために使われますが、仕組みと使いどころが違います。
基本の違い
| 項目 | アロー関数 | bind |
|---|---|---|
thisの決まり方 | 定義されたときの外側のthisに自動で固定される | 明示的に「このthisにしてね」と指定できる |
| 書き方 | () => { ... } | func.bind(obj) |
| 柔軟性 | 一度決まったら変えられない | 呼び出しごとに違うthisを指定できる |
| 主な用途 | コールバックや非同期処理で外側のthisを保持 | メソッドを他の場所に渡してもthisを失わないようにする |
例1: アロー関数でthisを保持
class Counter {
constructor() {
this.count = 0;
}
start() {
setInterval(() => {
// アロー関数なのでthisはCounterインスタンスに固定
this.count++;
console.log(this.count);
}, 1000);
}
}
new Counter().start();
👉 アロー関数は「外側のthis」を自動で使うので、bind不要。
例2: bindでthisを指定
class Counter {
constructor() {
this.count = 0;
this.tick = this.tick.bind(this); // thisを固定
}
tick() {
this.count++;
console.log(this.count);
}
}
const c = new Counter();
setInterval(c.tick, 1000); // bindしてあるのでOK
👉 通常のメソッドはthisが失われるが、bindで「必ずこのインスタンスを指す」と明示できる。
例3: 柔軟性の違い
function greet() {
console.log("Hello, " + this.name);
}
const alice = { name: "Alice" };
const bob = { name: "Bob" };
const bound = greet.bind(alice);
bound(); // Hello, Alice
// bindし直せば別のthisも可能
const bound2 = greet.bind(bob);
bound2(); // Hello, Bob
// アロー関数は外側のthisに固定されるので、後から変えられない
const arrow = () => console.log("Hello, " + this.name);
arrow.call(bob); // 外側のthisのまま（undefinedなど）
まとめ（使い分けの指針）
- アロー関数
- 外側の
thisをそのまま使いたいときに便利 - コールバックや非同期処理でよく使う
- 一度決まったら変えられない
- 外側の
bind- 通常のメソッドを「このオブジェクトに結びつけたい」ときに使う
- 後から違う
thisを指定できる柔軟さがある - ただし書き方は少し冗長
👉 初心者向けに一言でまとめると：
「アロー関数は自動で外側のthisに固定、bindは自分で好きなthisを結びつける」