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
Is Xcode slowly dying out in 2025?
uetyo
1
270
今ならAmazon ECSのサービス間通信をどう選ぶか / Selection of ECS Interservice Communication 2025
tkikuc
21
4k
A2A プロトコルを試してみる
azukiazusa1
2
1.4k
Quand Symfony, ApiPlatform, OpenAI et LangChain s'allient pour exploiter vos PDF : de la théorie à la production…
ahmedbhs123
0
190
生成AI時代のコンポーネントライブラリの作り方
touyou
1
220
ソフトウェア品質を数字で捉える技術。事業成長を支えるシステム品質の マネジメント
takuya542
1
13k
地方に住むエンジニアの残酷な現実とキャリア論
ichimichi
5
1.5k
git worktree × Claude Code × MCP ~生成AI時代の並列開発フロー~
hisuzuya
1
570
Blazing Fast UI Development with Compose Hot Reload (droidcon New York 2025)
zsmb
1
290
AI時代のソフトウェア開発を考える(2025/07版) / Agentic Software Engineering Findy 2025-07 Edition
twada
PRO
87
29k
おやつのお供はお決まりですか?@WWDC25 Recap -Japan-\(region).swift
shingangan
0
140
Agentic Coding: The Future of Software Development with Agents
mitsuhiko
0
100
Featured
See All Featured
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
GraphQLとの向き合い方2022年版
quramy
49
14k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Rails Girls Zürich Keynote
gr2m
95
14k
How GitHub (no longer) Works
holman
314
140k
Embracing the Ebb and Flow
colly
86
4.7k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Side Projects
sachag
455
42k
BBQ
matthewcrist
89
9.7k
What's in a price? How to price your products and services
michaelherold
246
12k
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