Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
JavaScript を書き始める前に知っておきたい JavaScript のこと #02
Search
Kotaro Chiba
May 23, 2020
Technology
1
1.4k
JavaScript を書き始める前に知っておきたい JavaScript のこと #02
今回は「ざっくり知る」prototype の話です
Kotaro Chiba
May 23, 2020
Tweet
Share
More Decks by Kotaro Chiba
See All by Kotaro Chiba
JavaScript を書き始める前に知っておきたい JavaScript のこと #05
uruha
1
490
JavaScript を書き始める前に知っておきたい JavaScript のこと #04
uruha
1
540
JavaScript を書き始める前に知っておきたい JavaScript のこと #03
uruha
1
420
DMM.com のフロントエンド 今・今後 / Think ! FrontEnd #01
uruha
1
1.5k
JavaScript を書き始める前に知っておきたい JavaScript のこと
uruha
1
690
JavaScript を書き始める前にやっておきたいこと / Kanazawa.js meetup #1
uruha
1
1.1k
JConf JP Sponsor talk DMM.com / TECH VISION に向けての取り組み
uruha
1
470
Other Decks in Technology
See All in Technology
Node-RED × MCP 勉強会 vol.1
1ftseabass
PRO
0
180
Fabric + Databricks 2025.6 の最新情報ピックアップ
ryomaru0825
1
160
「Chatwork」の認証基盤の移行とログ活用によるプロダクト改善
kubell_hr
1
240
asken AI勉強会(Android)
tadashi_sato
0
140
How Community Opened Global Doors
hiroramos4
PRO
1
130
Witchcraft for Memory
pocke
1
670
LangChain Interrupt & LangChain Ambassadors meetingレポート
os1ma
2
220
AWS テクニカルサポートとエンドカスタマーの中間地点から見えるより良いサポートの活用方法
kazzpapa3
2
610
製造業からパッケージ製品まで、あらゆる領域をカバー!生成AIを利用したテストシナリオ生成 / 20250627 Suguru Ishii
shift_evolve
PRO
1
160
本が全く読めなかった過去の自分へ
genshun9
0
710
マーケットプレイス版Oracle WebCenter Content For OCI
oracle4engineer
PRO
3
940
AWS Organizations 新機能!マルチパーティ承認の紹介
yhana
1
230
Featured
See All Featured
Making the Leap to Tech Lead
cromwellryan
134
9.4k
How to Ace a Technical Interview
jacobian
277
23k
VelocityConf: Rendering Performance Case Studies
addyosmani
331
24k
Designing for Performance
lara
609
69k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
BBQ
matthewcrist
89
9.7k
KATA
mclloyd
30
14k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
How STYLIGHT went responsive
nonsquared
100
5.6k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
124
52k
Building Adaptive Systems
keathley
43
2.6k
Transcript
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