Javascript初心者に初心者++程度の自分が言語仕様を説明したときのメモ（第三回）

Javascript初心者に初心者++程度の自分が言語仕様を説明したときのメモ（第一回）
Javascript初心者に初心者++程度の自分が言語仕様を説明したときのメモ（第二回）

第三回目は、prototypeとnewに挑戦。

まず、prototypeとはなんなのか、ということなんだけど、一言でわかりやすく言い表すのがなかなかむずかしいけども、「原型」という直訳が表すとおり、オブジェクトの「根本的なプロパティや関数」を定義する領域のことだ（わかりにくい）。
追記）MDNの説明がふつうにわかりやすかった。曰く"あるオブジェクトはプロトタイプと呼ばれる、他のオブジェクト（または null ）への内部的な繋がりを持ちます。"　ということで、「他のオブジェクトへの内部的なつながり」というのは個人的にはしっくりきた。

とりあえず例を追ってみる。

function MyObject(value) {
  this.value = value;
  this.getValue = function() {
    return this.value;
  }
}

こんなオブジェクトがあったとして、ここから２つのインスタンスを作ってみる。（Javascriptにクラスはないので、インスタンスという単語はどうなの？と思ったけどinstanceof演算子とかあるので使った。instanceofについては後述）
こんな感じで。

myObj1 = new MyObject("foo");
myObj2 = new MyObject("bar");

これをブラウザのデバッガで見てみるとこんな感じに見える。

myObj1、myObj2にそれぞれvalueとgetValue関数が定義されている。valueはさておき、getValueはどのインスタンスもまったく同じ動きをするが、インスタンスそれぞれに定義されているので、その分メモリは消費される。

ここで『「根本的なプロパティや関数」を定義する領域』であるところのprototypeにgetValueを定義して再度インスタンスを作ってみる。

function MyObject(value) {
  this.value = value;
}

MyObject.prototype.getValue = function() {
    return this.value;
}

myObj1 = new MyObject("foo");
myObj2 = new MyObject("bar");

これをブラウザのデバッガで見てみるとこんな感じに見える。

このとおり、getValue関数は、__proto__というプロパティの下に位置している。
この__proto__はprototypeへの参照を持つプロパティなんだけど、実装依存なので直接参照したら不幸が起きるらしいので控えよう。
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/proto

さておき、このprototypeに関数を定義、参照させることにより、パフォーマンスの向上が図れる。
これがprototypeのメリットの１つ。

もう1つのメリットについては、次回に持ち越し。少しずつね。

マリオカート8