1. Javascript 勉強会
~prototype編~

2. • 今回の目的
• Prototype の理解を通じて、
プロトタイプベース志向言語を理解する
・オブジェクトを生成する
コンストラクタ機構
・二つの参照
・Prototype 継承と this の挙動
・オーバーライド

3. • オブジェクトを生成するコンストラクタ機構
・コンストラクタとは？ study_07_01.js
・function 関数名() {} ,つまり
関数オブジェクトのこと
・関数オブジェクトがnewで呼ばれたときに
関数オブジェクト自体をコンストラクタと
いえるようになる
・全ての関数オブジェクトはコンストラクタ
でありうる
・ここで行われたのは、
prototypeを利用したクラスの継承

4. • Return文を入れなくても
生成されたオブジェクトが返されている
・・・newしないで呼び出された場合、
return文のない関数オブジェクト
なので何も返さない。Study_07_02.js

5. • 二つの参照
・そもそも、全ての関数は
prototypeプロパティをもつ
（explicit prototype property）
継承元MyClassの__proto__,
hasOwnProperty,toString等をもつ
study_07_03.js

6. ・オブジェクト生成に使った
コンストラクタのprototype オブジェクト
への隠しリンクをもつ
（objの__proto__,implicit prototype link）
→暗黙リンクをたどり、
コンストラクタのプロパティを
探索するのが、
「プロトタイプチェーン」の機能

7. • プロトタイプチェーンの参照の順序
オブジェクト自身のプロパティ
→継承元のプロパティ
→継承元オブジェクトの継承元プロパティ
…Object.prototype まで検索して終了。

8. ・new してできたオブジェクト同士で
コンストラクタへのプロパティは
共有されてしまうのでは？
（どこかで代入されたり、削除されたりすると
共有しているオブジェクト全てに影響が出てしまう？）
study_07_04.js

9. • 暗黙リンクを参照するのは読み取り時
のみで、代入や削除時は参照されない。
・ では、objA.prop1 = 100; 後の
プロパティ prop1 は何か？
→ 代入時に objA そのものに プロパティ prop1
が生成されている。 study_07_05.js
（hasOwnPropertyメソッドで、オブジェクト自身に
プロパティがあることが確認できる。）

10. ・メソッドのオーバーライド
・オーバーライドとは…
→ スーパークラスで定義されたメソッド
をサブクラスで定義し直し、
動作を上書きすること。
「クラスからクラスへの継承」
（多重定義、とは違います）Study_07_06.js
クラスの概念がないjavascriptの中で、
クラスの機能を実現できる

11. • Prototype 継承と this の挙動
study_07_07.js
・this について
「実行中」のオブジェクトが
「自分自身」を表すオブジェクトに
アクセスするためのキーワード
study_07_08.js
・実行中のオブジェクトは naming なので、
this は naming をさす。
このとき、 this.name は naming.nameと等しい。

12. • 2番目の例だと、実行中のオブジェクトは
takemoto なので、 this は takemoto をさす。
なので、who 内部の this.nameは
takemoto.name のこと。
・ 関数内のトップレベル（プロパティ内でな
い）
で this を呼び出すと、
グローバルオブジェクトをさす。
・このように、 this が何をさすかは
「関数の呼び出し方」で決まる。

13. • 実用例
PositionedRectangle.prototype.rectangle = new Rectangle(2,3);
→ new を使うと、コンストラクタ関数
を呼び出し、その this を戻り値として返す。
PositionedRectangle.prototype.rectangle.area();
→ this は 継承元の Rectangle をさしている。
PositionedRectangle.prototype.rectangle には
Rectangle(2,3); の this が挿入されている。
プロパティ area() の実行主は
PositionedRectangle.prototype.rectangle であるた
め、 area(); 内の this は Rectangle(2,3); と同一。

14. • 一つ注意すべきなのは、new演算子で呼び
出されるコンストラクタ関数では return
を明記すべきでない。
study_07_09.js
instanceof 演算子 ・・・ 左辺が右辺のインスタンスであるか判定
・戻り値はオブジェクトに限定される。
プリミティブ型を return に指定した場合
は、
this が返される。
※そもそも、javascript において new は使うべきではない。
詳しくは、
JavaScriptのnewって本当にいらない子？
http://taiju.hatenablog.com/entry/20090706/1246840565

15. • 課題
〜 注文の計算 〜
スタバとタリーズがある。
商品はコーヒーとパンの二つ。
スタバはコーヒー400円,パン200円
タリーズはコーヒー300円,パン250円
任意の個数を入力したとき、
スタバ,タリーズそれぞれの注文の
合計金額を返すメソッドを、
プロトタイプ継承を利用して作りませう。

16. • 参考情報
・プロトタイプ（prototype）によるJavaScriptのオブジェクト指向
http://codezine.jp/article/detail/222
・多重定義
http://chaichan.lolipop.jp/src/javascnew05.htm
・そろそろきっちりJavaScript
http://news.mynavi.jp/column/js/006/index.html
・applyとcallの使い方を丁寧に説明してみる
http://taiju.hatenablog.com/entry/20100515/1273903873
・JavaScriptのthisキーワードをちゃんと理解する
http://builder.japan.zdnet.com/script/sp_javascript-kickstart-
2007/20371112/3/