それでは クラス内でアロー関数（class-field）とプロトタイプメソッドを大量に作った場合のメモリの違い をわかりやすく見てみましょう。実際に JS でインスタンスを作って比較するイメージです。
1. 比較の前提
- プロトタイプメソッド：関数はプロトタイプに1つだけ存在 → インスタンスが何千個あっても関数オブジェクトは1つ。
- アロー関数（class-field）：関数はインスタンスごとに作られる → インスタンス × 1 の関数オブジェクトがメモリに乗る。
2. 実験コード（ブラウザ/Node.jsで可）
// プロトタイプメソッド版
class ProtoWorker {
constructor() {
this.count = 0;
}
tick() {
this.count++;
}
}
// アロー関数（class-field）版
class ArrowWorker {
count = 0;
tick = () => {
this.count++;
}
}
// 10000個のインスタンスを作る
const N = 10000;
const protoInstances = [];
const arrowInstances = [];
console.time("ProtoWorker creation");
for (let i = 0; i < N; i++) {
protoInstances.push(new ProtoWorker());
}
console.timeEnd("ProtoWorker creation");
console.time("ArrowWorker creation");
for (let i = 0; i < N; i++) {
arrowInstances.push(new ArrowWorker());
}
console.timeEnd("ArrowWorker creation");
// 簡単なメモリ使用量のチェック（ブラウザの場合）
console.log("ProtoWorker[0].tick === ProtoWorker[1].tick?",
protoInstances[0].tick === protoInstances[1].tick); // true
console.log("ArrowWorker[0].tick === ArrowWorker[1].tick?",
arrowInstances[0].tick === arrowInstances[1].tick); // false
3. 結果の解説
- プロトタイプ版
tickは1つしかないので、10,000個作ってもメモリの増加は小さい。===で比較すると同じ関数オブジェクトを参照しているのがわかる（true）。
- アロー関数版
tickは各インスタンスごとに作られる → 関数オブジェクトが10,000個存在。===で比較すると異なるオブジェクトになる（false）。- メモリ消費はインスタンス数に比例して増える。
- まとめ 特徴 プロトタイプメソッド アロー関数（class-field） 関数の配置 プロトタイプ上 インスタンスごと メモリ効率 高い（共有） 低い（インスタンスごとに増える） this バインド 呼び出し方依存（bindが必要） 自動で正しい this 継承 オーバーライドしやすい インスタンス単位で固定、継承は少し扱いにくい
💡 ポイント
- 小規模の UI やコールバックにはアロー関数が便利でバグも減る。
- 大量インスタンスを作る場合（ゲームのキャラクターやシミュレーションなど）では、プロトタイプメソッドでメモリ効率を意識する方が良い。