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.2k
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
390
JavaScript を書き始める前に知っておきたい JavaScript のこと #04
uruha
1
400
JavaScript を書き始める前に知っておきたい JavaScript のこと #03
uruha
1
350
DMM.com のフロントエンド 今・今後 / Think ! FrontEnd #01
uruha
1
1.4k
JavaScript を書き始める前に知っておきたい JavaScript のこと
uruha
1
550
JavaScript を書き始める前にやっておきたいこと / Kanazawa.js meetup #1
uruha
1
1k
JConf JP Sponsor talk DMM.com / TECH VISION に向けての取り組み
uruha
1
370
Other Decks in Technology
See All in Technology
本当のAWS基礎
toru_kubota
0
520
DevOpsDays History and my DevOps story
kawaguti
PRO
9
2.5k
データベース02: データベースの概念
trycycle
0
160
プロトタイピングによる不確実性の低減 / Reducing Uncertainty through Prototyping
ohbarye
5
380
家族アルバム みてねにおけるGrafana活用術 / Grafana Meetup Japan Vol.1 LT
isaoshimizu
1
720
自己改善からチームを動かす! 「セルフエンジニアリングマネージャー」のすゝめ
shoota
6
630
現代CSSフレームワークの内部実装とその仕組み
poteboy
7
3.6k
エンジニアのキャリアをちょっと楽しくする3本の軸/Three Pillars to Make an Engineer's Career More Enjoyable
kwappa
0
2.7k
アクセス制御にまつわる改善 / Improving access control
itkq
0
530
Java EE/Jakarta EEの現状と将来―クラウドネイティブ時代にJava EEは対応できるのか?―
takakiyo
1
160
IaCジェネレーターとBedrockで詳細設計書を生成してみた
tsukasa_ishimaru
1
150
地理空間データ可視化・解析・活用ソリューション Pacific Spatial Solutions (PSS)
pacificspatialsolutions
0
270
Featured
See All Featured
The Power of CSS Pseudo Elements
geoffreycrofte
60
5k
Become a Pro
speakerdeck
PRO
11
4.5k
Fireside Chat
paigeccino
21
2.6k
GraphQLとの向き合い方2022年版
quramy
32
12k
Git: the NoSQL Database
bkeepers
PRO
422
63k
Product Roadmaps are Hard
iamctodd
44
9.7k
Build your cross-platform service in a week with App Engine
jlugia
225
17k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
2
1.3k
Fantastic passwords and where to find them - at NoRuKo
philnash
37
2.5k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
6
1.5k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
357
22k
Optimizing for Happiness
mojombo
370
69k
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