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
Blazing Fast UI Development with Compose Hot Reload (droidcon New York 2025)
zsmb
1
290
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
250
10 Costly Database Performance Mistakes (And How To Fix Them)
andyatkinson
0
330
Claude Code + Container Use と Cursor で作る ローカル並列開発環境のススメ / ccc local dev
kaelaela
9
4.9k
AI時代のソフトウェア開発を考える(2025/07版) / Agentic Software Engineering Findy 2025-07 Edition
twada
PRO
86
28k
Systèmes distribués, pour le meilleur et pour le pire - BreizhCamp 2025 - Conférence
slecache
0
120
PipeCDのプラグイン化で目指すところ
warashi
1
270
dbt民主化とLLMによる開発ブースト ~ AI Readyな分析サイクルを目指して ~
yoshyum
3
990
生成AI時代のコンポーネントライブラリの作り方
touyou
1
210
技術同人誌をMCP Serverにしてみた
74th
1
640
MDN Web Docs に日本語翻訳でコントリビュートしたくなる
ohmori_yusuke
1
120
チームで開発し事業を加速するための"良い"設計の考え方 @ サポーターズCoLab 2025-07-08
agatan
1
410
Featured
See All Featured
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
690
Writing Fast Ruby
sferik
628
62k
The Invisible Side of Design
smashingmag
301
51k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
The World Runs on Bad Software
bkeepers
PRO
69
11k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Adopting Sorbet at Scale
ufuk
77
9.5k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
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