CodeStudy 21-4 プロトタイプのこと ①

少し前に 全く判らずに、出直して挑戦した CodeStudy のセクション 21-4 が正解できました。既に書かれているコードの間違いを直す問題だったのですが、間違っている部分が、結構多くて、そこを ばっさりと書き換えないといけないのが 初心者には難しかったです。以下は僕が書いたコードです。

function Menu(name, price){
   this.name = name;
   this.price = price;
}

Menu.prototype.totalPrice = function(quantity){
   return this.price * quantity;
}

var hamburger = new Menu("ハンバーガー", 100);
var cheeseburger = new Menu("チーズバーガー", 120);

output("太郎は、" + hamburger.name + "を" + hamburger.totalPrice(5) + "円分買いました。");

output("二郎は、" + cheeseburger.name + "を" + cheeseburger.totalPrice(3) + "円分買いました。");

1~4行目は、Menu クラスの定義です。インスタンス化の時に メニューの名前と値段を 引数で受け取り、オブジェクトのプロパティに代入するようになっています。
this.name が クラス Menu のプロパティ。name は引数を受け取る為の変数です。
this.price の方も同じです。

6~8行目が プロトタイプの定義です。クラス Menu のprototype プロパティ（だと思います。） に続けて 書いたプロパティやメソッドが、インスタンス化したオブジェクトで共用できるようになります。この場合では、ハンバーガーやチーズバーガー何円分買ったか、つまり 値段 × 個数 の計算が、2種類のオブジェクトで共用されています。

10~11行目は、1~4行目で定義した Menu クラスから、hamburger と theeseburger の2つのオブジェクトを生成（インスタンス化）しています。カッコ内は Menu クラスに渡す引数で、それぞれのオブジェクトの name と price のプロパティに代入されます。

13~14行目は、いつもの CodeStudy 専用の output メソッドを使って、オブジェクトのプロパティの中身と、メソッドの結果を表示させています。.totalPrice( ) の引数は プロトタイプ メソッドの (quantity) に渡される、買った個数です。

一応 正解はできましたが、prototype のことはまだ良く判っていません。困ったときの 「独習 JavaScript」には 図入りで詳しく解説してありましたが、どうも ぼんやりとしか判っていません。もっとしっかり理解できたら、このブログ上でもまとめを書いてみたいです。

あと、前回までに 書いた中で 用語をかなり間違って使っていました。ちょっとずつ 修正していきます。