クラスの中でアロー関数を使うとどうなるか
クラスの中でアロー関数を使うと、その関数のthisは「インスタンス」に固定されるという特徴が出てきます。これは普通のメソッド（通常の関数）との大きな違いです。
基本ルール
- 通常のメソッド（function記法）
→ 呼び出し方によってthisが変わる。
→ メソッドを変数に代入して呼ぶと、thisが失われることがある。 - アロー関数をクラスのプロパティとして定義
→thisは「そのクラスのインスタンス」に固定される。
→ どこから呼んでもthisが変わらない。
例1: 通常のメソッド
class Person {
constructor(name) {
this.name = name;
}
sayHello() {
console.log("Hello, I'm " + this.name);
}
}
const p = new Person("Alice");
p.sayHello(); // Hello, I'm Alice
const f = p.sayHello;
f(); // エラーや "Hello, I'm undefined" になる
fに代入して呼ぶと、thisがpを指さなくなる。
例2: アロー関数を使った場合
class Person {
constructor(name) {
this.name = name;
}
// プロパティとしてアロー関数を定義
sayHello = () => {
console.log("Hello, I'm " + this.name);
}
}
const p = new Person("Alice");
p.sayHello(); // Hello, I'm Alice
const f = p.sayHello;
f(); // Hello, I'm Alice （thisが固定されている！）
- アロー関数は「定義されたときのthis（インスタンス）」を保持するので、変数に代入しても問題なく動く。
例3: 非同期処理で便利
class Counter {
constructor() {
this.count = 0;
}
start() {
setInterval(() => {
// アロー関数なのでthisは常にCounterのインスタンス
this.count++;
console.log(this.count);
}, 1000);
}
}
const c = new Counter();
c.start(); // 1, 2, 3... とカウントアップ
- 普通の関数だと
thisがundefinedになってしまうが、アロー関数ならインスタンスを指し続ける。
まとめ
- クラスの中でアロー関数を使うと、thisがインスタンスに固定される。
- コールバックやイベントで
thisを失いたくないときに便利。 - ただし、クラスのプロトタイプにメソッドとして追加されないため、インスタンスごとに関数が生成される（メモリ効率はやや悪い）。
→ 多数のインスタンスを作る場合は通常メソッドを使う方がよい。
👉 初心者向けに言うと：
「クラスの中でアロー関数を使うと、thisが迷子にならない」
これを覚えておくと安心です。