Download to read offline
![[A 3]SSJSでも使える！Javascriptでオブジェクト指向プログラミング入門](https://cdn.slidesharecdn.com/ss_thumbnails/a-3ssjsjavascript-141120023907-conversion-gate01-thumbnail.jpg?width=640&height=640&fit=bounds)
Javascript勉強会資料1
- 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__,implicitprototype 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.