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
500
JavaScript を書き始める前に知っておきたい JavaScript のこと #04
uruha
1
550
JavaScript を書き始める前に知っておきたい JavaScript のこと #03
uruha
1
430
DMM.com のフロントエンド 今・今後 / Think ! FrontEnd #01
uruha
1
1.5k
JavaScript を書き始める前に知っておきたい JavaScript のこと
uruha
1
720
JavaScript を書き始める前にやっておきたいこと / Kanazawa.js meetup #1
uruha
1
1.1k
JConf JP Sponsor talk DMM.com / TECH VISION に向けての取り組み
uruha
1
480
Other Decks in Technology
See All in Technology
Terraformで構築する セルフサービス型データプラットフォーム / terraform-self-service-data-platform
pei0804
1
120
2025年夏 コーディングエージェントを統べる者
nwiizo
0
130
2025年にHCP Vaultを学び直して見えた景色 / Lessons and New Perspectives from Relearning HCP Vault in 2025
aeonpeople
0
230
サラリーマンの小遣いで作るtoCサービス - Cloudflare Workersでスケールする開発戦略
shinaps
1
370
250905 大吉祥寺.pm 2025 前夜祭 「プログラミングに出会って20年、『今』が1番楽しい」
msykd
PRO
1
620
DDD集約とサービスコンテキスト境界との関係性
pandayumi
2
280
Flutterでキャッチしないエラーはどこに行く
taiju59
0
220
生成AI時代のデータ基盤設計〜ペースレイヤリングで実現する高速開発と持続性〜 / Levtech Meetup_Session_2
sansan_randd
1
150
今!ソフトウェアエンジニアがハードウェアに手を出すには
mackee
11
4.5k
Skrub: machine-learning with dataframes
gaelvaroquaux
0
120
実践!カスタムインストラクション&スラッシュコマンド
puku0x
0
310
職種の壁を溶かして開発サイクルを高速に回す~情報透明性と職種越境から考えるAIフレンドリーな職種間連携~
daitasu
0
140
Featured
See All Featured
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
840
Code Reviewing Like a Champion
maltzj
525
40k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
51
5.6k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Building Adaptive Systems
keathley
43
2.7k
BBQ
matthewcrist
89
9.8k
Music & Morning Musume
bryan
46
6.8k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Producing Creativity
orderedlist
PRO
347
40k
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