prototype プロパティでメモリを節約する

普段は業務用のアプリケーション開発がメインで、JavaScript でコードを書いているときにメモリの使用量を意識することはない。
ただ、インスタンスを1000個とか生成するケースに遭遇するときのためにこう書いておけばメモリが節約できるよという引き出しをひとつ用意しておいたほうがいいだろう。

コンストラクタでメソッドを追加

例えば、あるメソッドをObject 自身のメソッドとして定義すると、インスタンスを生成する数だけあるメソッドのメモリ領域を確保する。

function Something (any) {
  this.any = any;

  // インスタンスを生成する数だけメモリ領域を確保する
  this.doSomething = function () {
    console.log("I do " + this.any);
  }

}

const something = new Something("nothing");
something.doSomething(); // I do nothing

インスタンスが生成されるたびにdoSomething()はメモリ領域に格納される。 100個インスタンスを生成するとdoSomething()も100個生成されメモリ領域に格納される。

prototype プロパティにメソッドを追加

prototype プロパティを使えばメソッドを実行する際にプロトタイプチェーンを辿って対象のメソッドを探す。

function Something (any) {
  this.any = any;
}

// __proto__ プロパティを参照するためインスタンス数に依存しない
Something.prototype.doSomething = function() {
  console.log("I do " + this.any);
}

const something = new Something("nothing");
something.doSomething(); // I do nothing

doSomething() は Something.prototype に存在するのでインスタンス生成時のメモリの増減に関与しません。 100個インスタンスを生成しても、参照するdoSomething() はSomething.prototype.doSomething() ただひとつです。

まとめ

JavaScriptでメモリを節約するにはprototype プロパティ使えばいいんやでということが理解できました。

すべてのインスタンスが共通のprototype からプロパティを継承するというJavaScriptの独特な仕様ですね。

ES6のClass構文を使っていると、prototype なんて意識しなくなりますがBabelが吐き出すコードがある程度読めないとあれなので知識として知っておくべきですね。

開眼! JavaScript ―言語仕様から学ぶJavaScriptの本質

ブレイクスルーJavaScript フロントエンドエンジニアとして越えるべき5つの壁―オブジェクト指向からシングルページアプリケーションまで