JavaScriptのクラスメソッドの定義で用いる２つの方法、prototype型とthis型にどんな違いがあるかを書いていきたいと思います。

JavaScriptのクラスメソッド定義にはprototype型とthis型の２種類あります。定義の仕方は全く違うものの、その機能としては全く同じことができてしまう・・・定義の仕方以外に違いってないの？と思いますよね。今回はその違いについて見ていきましょう。

prototype型とthis型って？

少しだけprototype型とthis型のおさらいをしておきましょう。以下のソースを見てください。

Personというクラスを定義し、this型でhelloメソッド、prototype型でbyeメソッドを定義しています。
その後、田中(Tanaka)さんというPersonクラスのインスタンスを定義し、15〜16行でそれぞれのメソッドを呼び出しても出力される言葉が違うだけで処理内容は変わりません。記述の方法以外に違いは見えません・・・。

では、もはや好みで使えばいいのでしょうか？
きのこの山派、たけのこの里派のごとく、this好き派とprototype派で長年争うことになるのでしょうか？

実はそうではないのです。

prototype型とthis型の大きな違い

結論から言いましょう。

prototype型の勝ちです。

なぜか？それはインスタンス生成時の動きを見ればわかります。まずはthis型でインスタンスを生成した時どうなるか見てみましょう。

PersonクラスからSuzuki、Satou、Tanakaの３つのインスタンスを作成してみました。
ポイントなのは、３つのインスタンスそれぞれにhelloメソッドが生成されているという点です。これでは100個のインスタンスを生成した場合、100個のhelloメソッドも同時に生成されてしまいます。全く同じ動きをするメソッドなのに、100個も無駄に生成されてはメモリの無駄遣いですね。

さて、この図にprototype型のbyeメソッドを加えてみましょう。

なんと、３つのインスタンスそれぞれにbyeメソッドは生成されず、Personクラスの方を参照しているじゃありませんか！これなら100個、1000個インスタンスを生成してもbyeメソッドは1個のままです！メモリが大分節約されますね。

まとめ

this型とprototype型の違いは

• this型はインスタンス生成の度にメソッドが生成（コピー）されてしまう。
• prototype型はインスタンス生成によるメソッド生成がない。

よって、this型よりもprototype型の方が良い！

「prototype型とthis型のメソッド定義でどんな違いがある！？」については以上です。
よろしければ他の記事も見ていってください。