JavaScript | クラスのメソッドをアロー関数にするメリットとデメリット

JavaScript JavaScript
2020.08.13
スポンサーリンク

クラスのメソッドをアロー関数にするメリットとデメリット

クラスの中でメソッドを「通常の関数」として書くか「アロー関数」として書くかで、挙動や効率が変わります。初心者向けに整理してみましょう。

メリット（アロー関数にする利点）

  • thisがインスタンスに固定される
    • アロー関数は「定義されたときのthis」を保持するので、呼び出し方に左右されません。コールバックやイベント処理でthisが迷子にならない。
class Counter {
  count = 0;
  increment = () => {
    this.count++;
    console.log(this.count);
  }
}

const c = new Counter();
const f = c.increment;
f(); // 1（thisがインスタンスに固定されている）
JavaScript
  • bind不要
    • 通常のメソッドだと this を固定するために .bind(this) を使うことが多いですが、アロー関数なら不要。
  • イベントハンドラや非同期処理で便利
    • setTimeout や addEventListener に渡すときに、外側のthis（インスタンス）をそのまま使える。

⚠️ デメリット（注意点）

  1. インスタンスごとに関数が生成される
    • 通常のメソッドはクラスの「プロトタイプ」に1つだけ作られる。
    • アロー関数は「インスタンスのプロパティ」として作られるので、インスタンスを作るたびに新しい関数オブジェクトが生成される。
    • → インスタンスが大量にあるとメモリ効率が悪くなる。
  2. プロトタイプチェーンに載らない
    • 通常のメソッドは Person.prototype.sayHello のようにプロトタイプに存在する。
    • アロー関数はインスタンスのプロパティなので、prototype には現れない。
    • → 継承やメソッドの上書き（オーバーライド）がしにくい。
  3. superが使えない
    • アロー関数はクラスの「メソッド」ではなく「プロパティ」なので、superキーワードで親クラスのメソッドを呼ぶことができない。

まとめ（使い分けの指針）

  • アロー関数を使うと便利な場面
    • コールバックやイベントでthisを固定したいとき
    • インスタンスごとに独自の関数を持たせたいとき
  • 通常のメソッドを使うべき場面
    • 多数のインスタンスを作るクラス（効率重視）
    • 継承やオーバーライドを使う設計
    • プロトタイプにメソッドをまとめたいとき

👉 初心者向けに一言でまとめると：
「アロー関数はthis迷子防止に便利。でも効率や継承を考えるなら通常メソッド」

スポンサーリンク
タイトルとURLをコピーしました