読者です 読者をやめる 読者になる 読者になる

リア充爆発日記

You don't even know what ria-ju really is.

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

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

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


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

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

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

こんなオブジェクトがあったとして、ここから2つのインスタンスを作ってみる。(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つ。

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

マリオカート8

マリオカート8