2012年11月16日

CodeStudy 18-11 オブジェクトのこと

相変わらず CodeStudy で試行錯誤しています。
オブジェクトのおさらいをしています。
セクション 18-11 にもう一度取り組んでみたら、だいぶ整理できてきました。

問題
Calcオブジェクトが途中まで定義されています。
新たにname,price,numberプロパティを定義し、問題文の説明にあるようなメソッドtotalPrice(),result()を定義し、result()をoutputで出力して下さい。


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

var calc = new Calc("じゃがいも", 30, 16);
  calc.totalPrice = function(){
    return this.price * this.number;
  }

  calc.result = function() {
    return "1個" + this.price + "円の" + this.name + "" + this.number + "個買ったので、合計" + this.totalPrice() + "円になりました。";
  }

output(calc.result());


1~5行目の最初に function Calc()…となっているので、今までの知識から 関数を定義していると思ってしまいましたが、どうも違うらしくて、オブジェクトの原型になるインスタンスを定義しているみたいです。
ここで定義した Calc をもとにして 7行目で new 演算子を使って オブジェクト calc を作っています。

2~4行目がまず判りにくかったですが this.name は Calc のプロパティで、name は7行目の オブジェクトを作る時の引数を受け取る変数です。
この場合 新しく作られた calc オブジェクトは、原型の Calc で定義されたプロパティの name, price, number を持っていますが、そのままだと中身は空です。
ですので、7行目の ("じゃがいも",30,16) が 引数として それぞれ (name, price, number) に代入されて、それが 2~4行目で オブジェクトcalc の値を持ったプロパティ として定義されます。

後は 比較的簡単だと思います。
8~10行目は 合計の購入金額を計算するメソッドを オブジェクトcalc に 定義しています。return で計算結果が返される先は、メソッドを呼び出した所なので、13行目の this.totalPrice() の所です。

12~14行目は、計算結果を 文字列にするための メソッドです。この文字列が 16行目のoutput() で表示されます。

これは 練習問題だからか、わざと複雑にしてるんじゃないかと思いたくなりますが、例えば じゃがいも以外に ニンジンとかキャベツとか が増えた時に Calc をもとにして オブジェクトを作ると プログラムの修正が楽にできるようにしてあるんだと思います。

一度 正解できた問題も、行き詰まって戻ってきて取り組むと 整理しながら理解ができて良かったです。
インスタンスを定義するのと、関数を定義するのが 同じ function で、書き方も同じというのは 何か理由がありそうですが、先日の 連想配列 と オブジェクトが似ている件と合わせて これからの宿題にします。

0 件のコメント:

コメントを投稿