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
Django's GeneratedField by example - DjangoCon US 2025
pauloxnet
0
120
Function Body Macros で、SwiftUI の View に Accessibility Identifier を自動付与する/Function Body Macros: Autogenerate accessibility identifiers for SwiftUI Views
miichan
2
180
ハードウェアとソフトウェアをつなぐ全てを内製している企業の E2E テストの作り方 / How to create E2E tests for a company that builds everything connecting hardware and software in-house
bitkey
PRO
1
120
これでもう迷わない!Jetpack Composeの書き方実践ガイド
zozotech
PRO
0
310
COVESA VSSによる車両データモデルの標準化とAWS IoT FleetWiseの活用
osawa
1
270
「何となくテストする」を卒業するためにプロダクトが動く仕組みを理解しよう
kawabeaver
0
380
研究開発と製品開発、両利きのロボティクス
youtalk
1
520
Webアプリケーションにオブザーバビリティを実装するRust入門ガイド
nwiizo
6
760
AI開発ツールCreateがAnythingになったよ
tendasato
0
120
S3アクセス制御の設計ポイント
tommy0124
3
190
AWSで始める実践Dagster入門
kitagawaz
1
590
OCI Oracle Database Services新機能アップデート(2025/06-2025/08)
oracle4engineer
PRO
0
110
Featured
See All Featured
Testing 201, or: Great Expectations
jmmastey
45
7.6k
The Straight Up "How To Draw Better" Workshop
denniskardys
236
140k
Automating Front-end Workflow
addyosmani
1370
200k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Navigating Team Friction
lara
189
15k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
30
9.7k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.8k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
Making Projects Easy
brettharned
117
6.4k
A better future with KSS
kneath
239
17k
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