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
700
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
ecspressoの設計思想に至る道 / sekkeinight2025
fujiwara3
12
2k
Semantic Machine Intelligence for Vision, Language, and Actions
keio_smilab
PRO
2
410
低レイヤソフトウェア技術者が YouTuberとして食っていこうとした話
sat
PRO
7
5.9k
会社もクラウドも違うけど 通じたコスト削減テクニック/Cost optimization strategies effective regardless of company or cloud provider
aeonpeople
2
350
AI人生苦節10年で会得したAIがやること_人間がやること.pdf
shibuiwilliam
1
190
【CEDEC2025】LLMを活用したゲーム開発支援と、生成AIの利活用を進める組織的な取り組み
cygames
PRO
1
1.4k
公開初日に個人環境で試した Gemini CLI 体験記など / Gemini CLI実験レポート
you
PRO
3
540
怖くない!GritQLでBiomeプラグインを作ろうよ
pal4de
1
130
Railsの限界を超えろ!「家族アルバム みてね」の画像・動画の大規模アップロードを支えるアーキテクチャの変遷
ojima_h
4
510
東京海上日動におけるセキュアな開発プロセスの取り組み
miyabit
0
190
完璧を目指さない小さく始める信頼性向上
kakehashi
PRO
0
110
生成AIによる情報システムへのインパクト
taka_aki
1
190
Featured
See All Featured
RailsConf 2023
tenderlove
30
1.2k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Making Projects Easy
brettharned
116
6.3k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Statistics for Hackers
jakevdp
799
220k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Six Lessons from altMBA
skipperchong
28
3.9k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
760
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