オブジェクトのメソッドのメモリ効率

こんにちは。向日葵です。

現在HTML5プロフェッショナル認定試験レベル2を勉強中です。その中で私が理解できなかった部分を私なりに解釈したものを紹介します。

今回はオブジェクトのメソッドのメモリ効率についてです。

コンストラクタ関数

コンストラクタ関数とは

そもそもコンストラクタ関数が何者であるかですが、めちゃくちゃ簡単にいうとオブジェクトを作るための関数です。

コンストラクタ関数の書き方

prototypeにメソッドを定義する方法

function Person(name, subject) {
    this.name = name;
    this.subject = subject;
}
Person.prototype.introduce = function() {
    console.log(`私は${this.name}です。得意科目は${this.subject}です。`);
};
const taro = new Person('太郎', '英語');
const hanako = new Person('花子', '国語');
taro.introduce();
hanako.introduce();

コンストラクタ内でメソッドを定義方法

function Person(name, subject) {
    this.name = name;
    this.subject = subject;
    this.introduce = function() {
        console.log(`私は${this.name}です。得意科目は${this.subject}です。`);
    };
}
const taro = new Person('太郎', '英語');
const hanako = new Person('花子', '国語');
taro.introduce();
hanako.introduce();

書き方が変わることで何が変わる？

一番の大きな違いはメモリ効率です。

コンストラクタ内でメソッドを定義する方法と比べてprototypeにメソッドを定義する方法のほうがメモリ効率が良いです。

コンストラクタ内でメソッドを定義すると、インスタンスを作るたびに同じメソッドが新しく作られます。

一方、prototypeに定義をすると、メソッドはprototype上に1つだけ作られすべてのインスタンスで共有されます。インスタンスからメソッドを呼び出すと、インスタンス自身にメソッドがあるかを探します。あれば実行し、なければprototypeにメソッドがないかを探します。

イメージ

定義方法が違うことでメモリ効率に違いが出るのが最初は納得できませんでした。掘り下げていった結果自分の中でしっくりきたイメージが授業風景でした。

先生が黒板に板書したものを見て学ぶ方法と教科書を見て学ぶ方法の2つについて考えます。

黒板に板書する場合、黒板は1つあれば十分です。生徒1人1人が同じ黒板を見て学ぶため、同じ内容を共有できます。

教科書を使う場合、生徒の人数分教科書が必要になります。

そして生徒が増えるごとに必要な教科書の数も増えていきます。このように教科書を使う場合、人数が増えるほど紙を多く消費します。つまり、教科書を使った場合紙をたくさん消費するのに対して、黒板に板書する場合は黒板1つを全員で共有できるため、より少ない資源ですみます。

資源を多く消費している状態はJavaScriptでいうとメモリを多く消費している状態です。

ここで黒板はprototype、生徒はインスタンス、教科書はコンストラクタ関数内で定義したメソッドになります。教科書は生徒が増えるほど必要になるため、より多くの資源を消費するのでした。そのためprototypeにメソッドを定義する方法が、コンストラクタ内でメソッドを定義する方法と比べてメモリ効率が良いということです。

おまけ

ここまでコンストラクタ関数とprototypeに着目してきました。

ES6からはオブジェクトをよりわかりやすく定義できるclass構文が追加されました。現在のJavaScriptではclass構文で書かれることが多くなっています。classも内部ではコンストラクタ関数とprototypeの仕組みが利用されています。

こちらの記事でclassについて少し触れています。ざっくりでいいのでclassについて知りたい方などにおすすめです。

最後に

最後まで見ていただきありがとうございます。

これからも学んだことのアウトプット頑張っていきたいと思います。