JavaScriptの文法プロトタイプオブジェクトのメソッドをオブジェクトリテラルで記述してみる

2017年9月7日

今までJavaScriptでプロトタイプオブジェクトのメソッドは、既存のプロトタイプオブジェクトに追加する書き方しかないと思ってました。

ですが、徹底マスター JavaScriptの教科書という本を読んでいると、オブジェクトリテラル形式で記述して、プロトタイプオブジェクトに代入できる方法もあることが分かりました。

プロトタイプオブジェクトのメソッドの定義方法を紹介

言葉だけで説明すると分かりにくいので、両者のコードを記述して比較してみましょう。

仮にBallオブジェクトが存在し、drawメソッドとmoveメソッドがあったとしましょう。既存のプロトタイプオブジェクトに追加する書き方では、このような書き方になります。

[php]
Ball.prototype.draw = function() {
…
};

Ball.prototype.move = function() {
…
};[/php]

既存のプロトタイプオブジェクトに追加する書き方は、メソッド一つずつについて定義をしていく感じです。

一方、オブジェクトリテラル形式で代入する方法で書き直すと、以下のような書き方になります。

[php]Ball.prototype = {
draw : function() {
…
　　　　　　　　　　　　　　　　},
move : function() {
…
　　　　　　　　　　　　　　　　}
};[/php]

オブジェクトのプロパティは　{ 関数名 : function(){} }となり、プロパティ名は任意の関数名（drawととmove）です。またプロパティ値は、function(){} の内容となります。こっちの方がスッキリする書き方かなと思ったりします。

実は、今回の記事で使ったBallオブジェクト、drawメソッド、moveメソッドはドットインストールからの引用です（ありがとうございます）。「JavaScriptでインタラクティブアートを作ろう　#11 プロトタイプを使ってみよう」というレッスン（有料）では、既存のプロトタイプオブジェクトに追加する書き方で紹介されています。

一方、上述した「教科書」のP.230では、オブジェクトリテラル形式で代入する方法が紹介されています。「教科書」の記述（オブジェクトリテラル形式）でドットインストールの記述（プロトタイプオブジェクトに追加する書き方）を少し変えても、全く同じ動作をすることが分かりました。

この記事が、JavaScriptでオブジェクトを学習されている方の参考になれば幸いです。

【参考サイト】