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
Understanding JavaScript Prototypes
Search
sporto
August 11, 2013
Programming
3
330
Understanding JavaScript Prototypes
Also see
http://sporto.github.io/blog/2013/02/22/a-plain-english-guide-to-javascript-prototypes/
sporto
August 11, 2013
Tweet
Share
More Decks by sporto
See All by sporto
React inside Elm
sporto
2
180
Elm
sporto
1
250
Redux: Flux Reduced
sporto
1
330
Practically Immutable
sporto
0
190
Webpack and React
sporto
4
380
Rails with Webpack
sporto
1
220
Lesson learnt building Single Page Application
sporto
0
120
Grunt
sporto
1
180
Safe Testing in Ruby
sporto
1
130
Other Decks in Programming
See All in Programming
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
seike460
PRO
3
760
Team operations that are not burdened by SRE
kazatohiei
1
310
Goで作る、開発・CI環境
sin392
0
230
iOS 26にアップデートすると実機でのHot Reloadができない?
umigishiaoi
0
130
AIプログラマーDevinは PHPerの夢を見るか?
shinyasaita
1
220
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
falcon8823
5
1.1k
第9回 情シス転職ミートアップ 株式会社IVRy(アイブリー)の紹介
ivry_presentationmaterials
1
320
#kanrk08 / 公開版 PicoRubyとマイコンでの自作トレーニング計測装置を用いたワークアウトの理想と現実
bash0c7
1
770
5つのアンチパターンから学ぶLT設計
narihara
1
170
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
250
新メンバーも今日から大活躍!SREが支えるスケールし続ける組織のオンボーディング
honmarkhunt
5
7.2k
Systèmes distribués, pour le meilleur et pour le pire - BreizhCamp 2025 - Conférence
slecache
0
120
Featured
See All Featured
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Embracing the Ebb and Flow
colly
86
4.7k
Being A Developer After 40
akosma
90
590k
A Tale of Four Properties
chriscoyier
160
23k
The World Runs on Bad Software
bkeepers
PRO
69
11k
Agile that works and the tools we love
rasmusluckow
329
21k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
The Language of Interfaces
destraynor
158
25k
Transcript
Understanding JS prototypes Sebastian Porto
+ Prototypes ! + Object.create ! + Constructor functions !
+ ES6
The wrong way to learn function Liquid() { } Liquid.prototype.fluid
= true; ! function Beer() { Liquid.call(this); } ! Beer.prototype = Object.create(Liquid.prototype); Beer.prototype.alcohol = 5.1; ! var beer = new Beer();
__proto__
• var liquid = {} var beer = {} •
beer.__proto__ = liquid A simple chain
A simple chain liquid beer __proto__ liquid is the prototype
of beer
Property look-ups • var liquid = { fluid: true }
• var beer = {} beer.__proto__ = liquid • beer.fluid //-> true
A simple chain liquid beer __proto__ fluid fluid? fluid?
A longer chain liquid coopers fluid fluid? beer drink
Long chain example • var liquid = { fluid: true
} • var drink = {} drink.__proto__ = liquid • var beer = {} beer.__proto__ = drink • var coopers = {} coopers.__proto__ = beer • coopers.fluid; //-> true
Many object can have same prototype liquid beer __proto__ cider
__proto__
Prototype can be shared • var liquid = { fluid:
true } • var beer = {} beer.__proto__ = liquid • var cider = {} cider.__proto__ = liquid • beer.fluid; //-> true cider.fluid; //-> true
Prototypes are not copies • var beer = { tasty:
true }; • var coopers = {}; coopers.__proto__ = beer; • coopers.tasty; //-> true • beer.tasty = false; • cooper.tasty; //-> false
beer coopers ethanol Prototypes are dynamic .__proto__
Prototypes are dynamic • var beer = { alcohol: 6
} var ethanol = { alcohol: 100 } • var coopers = {} coopers.__proto__ = beer • coopers.alcohol //-> 6 • coopers.__proto__ = ethanol • coopers.alcohol //-> 100
Writing creates properties • var beer = { alcohol: 6
} • var coopers = {} coopers.__proto__ = beer • coopers.alcohol = 4 • beer.alcohol //-> still 6
Creates ‘own’ property beer coopers alcohol = 6 .alcohol =
4 alcohol = 4 “own” property
beer coopers alcohol = 6 alcohol = 4 creatures Same
property can be in several places
Arrays • var beer = { ingredients: [‘wheat’, ‘yeast’]
} • var coopers = {} coopers.__proto__ = beer • coopers.ingredients.push(‘oats’) • beer.ingredients //->[‘wheat’, ‘yeast’, ‘oats’];
Direct modification beer coopers ingredients .ingredients.push(‘oats’)
coopers.ingredients.push(‘oats’); ! creatures.ingredients; //-> [‘wheat’, ‘yeast’, ‘oats’]; Arrays are modified
directly in the prototype beer coopers creatures ingredients ['wheat', 'yeast'] __proto__ __proto__
Objects are the same • var beer = {
ingredients: {wheat: 10, yeast: 20} } • var coopers = {} coopers.__proto__ = beer • coopers.ingredients.wheat = 30 • beer.ingredients.wheat //-> 30
__proto__ == great for learning ! Not for use
Object.create
Object.create • var beer = { tasty: true }
• var coopers = Object.create(beer) • coopers.tasty //-> true
Object.create var coopers = Object.create(beer); ! Just like: ! var
coopers = {}; coopers.__proto__ = beer;
Object.create is just setting __proto__ ! so same rules apply
- not copies - dynamic
getPrototypeOf var beer = { tasty: true }; ! var
coopers = Object.create(beer); ! ! Object.getPrototypeOf(coopers) //-> beer object
isPrototypeOf var beer = { tasty: true }; ! var
coopers = Object.create(beer); ! ! beer.isPrototypeOf(coopers); //-> true
ES6 setPrototypeOf var beer = { tasty: true }; !
var coopers = {}; ! ! Object.setPrototypeOf(coopers, beer);
Constructor Functions
Functions as constructors function Beer(){ ! } ! var beer
= new Beer(); Uppercase by convention
function Beer(){ ! ! ! ! ! } ! var
beer = new Beer(); Implicit this ! var this = {} this.__proto__ = Beer.prototype (yield to your code) return this
Implicit this function Beer(){ var this = {}; this.__proto__ =
Beer.prototype; this.tasty = true; return this; } ! var beer = new Beer(); ! beer.tasty; // true
function Beer(){ this.tasty = true; } ! var beer =
new Beer(); ! beer.tasty; //-> true Implicit this
Don’t forget new function Beer(){ this.kind = ‘beer’; } !
var beer = Beer(); this will the global object
function Beer(){ ! this.__proto__ = Beer.prototype; ! } function.prototype
function.prototype function Beer(){ ! } ! Beer.prototype Every function has
this special property
But this is not the prototype Beer.prototype !== Beer.__proto__ Call
this ‘function prototype’
function.prototype function Beer(){ ! } ! var beer = new
Beer(); beer.__proto__ ???? What is the __proto__ of beer?
It is assigned as the prototype of the instance function
Beer(){ var this = {}; this.__proto__ = Beer.prototype; this.tasty = true; return this; } It is assigned as the prototype of the new created object
Function instance new __proto__ Function prototype .prototype
• function Beer(){} • Beer.prototype.tasty = true • var coopers
= new Beer() • coopers.__proto__ == Beer.prototype //-> true • coopers.tasty //-> true It is the prototype assigned to the instance
function Beer(){ } ! Beer.prototype.brew = function () {} !
var coopers = new Beer(); var creatures = new Beer(); ! coopers.brew(); creatures.brew(); ! Useful for performance
• function Beer(){...} • Beer.prototype.ingredients = ['honey'] • var coopers
= new Beer() var vb = new Beer() • coopers.ingredients.push('oats') • vb.ingredients //-> ['honey', 'oats'] Again, same rules!
• function Beer(){ this.ingredients = [‘yeast’] } • var coopers
= new Beer() var creatures = new Beer() • coopers.ingredients.push(‘wheat’) • creatures.ingredients //-> [‘yeast’] Isolation
function Beer(){ ! } ! var coopers = new Beer();
! coopers instanceof Beer; //-> true ! instanceof
coopers instanceof Beer; ! ! Checks that ! coopers.__proto__ ==
Beer.prototype ! instanceof
var Beer = function () { ! }; ! Beer.findAll
= function () { ... } ! Beer.findAll(); "Class methods"
ES6
class Beer { constructor(a) { this.alcohol = a; } !
drink() { ... } } ES6 Classes
ES6 Classes function Beer(a){ this.alcohol = a; } ! Beer.prototype.drink
= function () { ... } ! var beer = new Beer(5) class Beer { constructor(a) { this.alcohol = a; } ! drink() { ... } } ! var beer = new Beer(5)
Questions? Thanks