JavaScript を書き始める前に知 っておきたい JavaScript のこと #02 Kanazawa.js Remote Meetup #03 千葉 弘太郎 1 1

千葉 弘太郎（ちば こうたろう） Kotaro Chiba Twitter: @ur_uha Github: uruha Work: DMM.com LLC 2 2

前回 JavaScript を書き始める前にやっておきたいこと 3 3

今回 「ざっくり知る」JavaScript の prototype について 4 4

const arrayInstance = ['hello', 'world']; arrayInstance.join(); // => 'hello,world' 5 5

なぜ使えるのか？（考えたことあります？） 本来 arrayInstance には join メソッドは無いはず...(´・ω・｀) 6 6

原理 prototype を辿って（プロトタイプチェーン）、 Array.prototype.join() メソッドを使っている。 7 7

Array() ──────── Array.prototype [prototype] [constructor, join, ...] │ │ arrayInstance は prototype を探しに⾏く │ │ └ instance → arrayInstance ['hello', 'world'] 8 8

また、 Array.prototype は Object() の instance、 Object.prototype へチェーンが続きます 9 9

Object.prototype │ │ Array() ──────── Array.prototype [prototype] [constructor, join, ...] │ │ │ │ └ instance → arrayInstance ['hello', 'world'] 10 10

⾒てみる。 11 11

arrayInstance がインスタンス化される際に __proto__ という prototype をたどるためのプロパティが存在しま す。 12 12

このチェーンは全ての⼤元である Object() まで続きます。 13 13

ただ、 __proto__ は ECMA の⾮標準プロパティのため、継 承元の prototype を取得するなど実際にソースコードレベ ルで使⽤する場合は Object.getPrototypeOf を使ったほ うが良いです。 14 14

Object.prototype │ │ Array() ──────── Array.prototype [prototype] [constructor, join, ...] │ │ │ │ └ instance ┬→ arrayInstance ├→ arrayInstance_02 ├→ arrayInstance_03 ├→ ... また、全てのインスタンスが、共通の prototype を継承し ているのも特徴です。 15 15

まとめ ⾃作のオブジェクトがビルトイン/ネイティブオブジェクトの メソッドを使えるのはプロトタイプチェーンによって、継承 元のメソッドを参照しているから ⾃作のオブジェクトをインスタンス化した際に prototype プロパティが付与され遡ることができる prototype の遡りは Object まで続く 全てのインスタンスは共通の prototype を継承している 16 16

もっと踏み込むといろいろあるんですが、 とりあえず仕組みを理解するところまで。 17 17

次回予告 (参加できたら) 18 18

JavaScript を書き始めたら知っておきたい JavaScript のこと JavaScript についてもう少し詳しく オブジェクト指向 prototype 継承 動的型付け シングルスレッド 動的型付けやシングルスレッドらへんを喋らたら 19 19