ある程度、JavaScriptの理解が進むと、prototypeに出会うと思います。

prototypeとは

JavaScriptで関数を作成すると生まれるオブジェクトです。
newで関数を実行して、クラスのように扱うときに便利なものです。

prototypeのパフォーマンス

prototypeを使わなくても、挙動的にはあまり問題はないです。
それを使わずに進めることもできます。

このような感じにするとクラスっぽくなります。
この書き方だと、Humanが増えるたびにsayNameなども新しく生成することになるので、メモリを消費し、パフォーマンスが良くないです。

prototypeを使うと、関数を共通にできるので、上記よりもパフォーマンスが優れています。

メモリ速度を見てみましょう。

prototypeの速度

こちらのサイトをマネして計測してみます。

prototype を使う場合と使わない場合の速度比較 – basyura's blog

Chromeで1,000,000回for文で実行しました。
prototypeを使わないほうが1000くらいで、使ったほうが400くらいになりました。
2倍以上違います。

速度のテスト

prototypeのメモリ

次のメモリを見てみます。
Chromeデベロッパー・ツールから確認できるようです。

JavaScriptのprototypeとメモリ 本当にメモリ節約してるのか見てみた

こちらは、prototypeを使わないほうが124,000,312、使ったほうが20,000,000になりました。
こんな感じで、6倍くらい違います。

メモリのテスト

環境ブラウザによって異なるとは思いますが、それでも思ったよりもが出ました。

prototypeの問題点

パフォーマンスを見ると、prototypeを使わないという選択がない気がしますが、どうでしょうか。
確かに便利なのですが、気になる点があります。

プライベート変数が使用できない

prototypeからアクセスするためには、thisのついた(公開された)変数である必要があります。
それによって、外部から変更されたくないものでも、書き換えることができます。

prototypeではない関数を作成して、プライベート変数にアクセスすることはできますが、せっかくのprototypeの恩恵が少なくなります。

また、_を付けたものを、プライベート変数として扱う、などとして欠点を補うルールで扱うことがあります。

関数の内側にprototypeを記述することができない。

一度、関数を設定してからでないと、prototypeに追加することができません。
関数の定義が分かれるので、視覚的に分かりにくくなります。

無名関数でまとめて、少し分かりやすくすることはできます。

継承の問題

(prototypeの問題ではありませんが)prototypeを調べると、クラス的なものを継承して生成することがあります。

継承用の関数を用意して行う、ことがベストな手法のようですが、JavaScript自体いろいろ問題があるので継承をしない、という選択をする方も多いようです。

そして、継承している場合に、以下のようにprototypeをまとめて記述すると、継承が消えてしまいます。
まとめて書く方法は、タイピングが減って便利ですが、そこを理解して使いたいです。

まとめ

prototypeは便利なのですが、JavaScriptが自由すぎるので、気をつけないと破綻します。
こういう現状があるので、AltJSを使いたくなるのかもしれません。

私は、コーディングの慣れと、周りとの親和を考えて、積極的に使ってきませんでした。
しかし、JavaScriptによるシングルページアプリケーションなどの案件が増えてきたので、prototypeを使っていこうと思います。

お洒落なコーディングがしたいです!
それでは、また!