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();
Slide 4
Slide 4 text
__proto__
Slide 5
Slide 5 text
•
var liquid = {}
var beer = {}
•
beer.__proto__ = liquid
A simple chain
Slide 6
Slide 6 text
A simple chain
liquid
beer
__proto__
liquid is the
prototype of beer
Direct modification
beer
coopers
ingredients
.ingredients.push(‘oats’)
Slide 21
Slide 21 text
coopers.ingredients.push(‘oats’);
!
creatures.ingredients; //->
[‘wheat’, ‘yeast’, ‘oats’];
Arrays are modified directly in
the prototype
beer
coopers
creatures
ingredients
['wheat', 'yeast']
__proto__
__proto__
Slide 22
Slide 22 text
Objects are the same
•
var beer = {
ingredients: {wheat: 10, yeast: 20}
}
•
var coopers = {}
coopers.__proto__ = beer
•
coopers.ingredients.wheat = 30
•
beer.ingredients.wheat
//-> 30
Slide 23
Slide 23 text
__proto__ == great for
learning
!
Not for use
Slide 24
Slide 24 text
Object.create
Slide 25
Slide 25 text
Object.create
•
var beer = {
tasty: true
}
•
var coopers = Object.create(beer)
•
coopers.tasty //-> true
Slide 26
Slide 26 text
Object.create
var coopers = Object.create(beer);
!
Just like:
!
var coopers = {};
coopers.__proto__ = beer;
Slide 27
Slide 27 text
Object.create
is just setting __proto__
!
so same rules apply
- not copies
- dynamic
Slide 28
Slide 28 text
getPrototypeOf
var beer = {
tasty: true
};
!
var coopers = Object.create(beer);
!
!
Object.getPrototypeOf(coopers)
//-> beer object
Slide 29
Slide 29 text
isPrototypeOf
var beer = {
tasty: true
};
!
var coopers = Object.create(beer);
!
!
beer.isPrototypeOf(coopers);
//-> true
Slide 30
Slide 30 text
ES6 setPrototypeOf
var beer = {
tasty: true
};
!
var coopers = {};
!
!
Object.setPrototypeOf(coopers, beer);
Slide 31
Slide 31 text
Constructor Functions
Slide 32
Slide 32 text
Functions as constructors
function Beer(){
!
}
!
var beer = new Beer();
Uppercase by
convention
Slide 33
Slide 33 text
function Beer(){
!
!
!
!
!
}
!
var beer = new Beer();
Implicit this
!
var this = {}
this.__proto__ = Beer.prototype
(yield to your code)
return this
Slide 34
Slide 34 text
Implicit this
function Beer(){
var this = {};
this.__proto__ = Beer.prototype;
this.tasty = true;
return this;
}
!
var beer = new Beer();
!
beer.tasty; // true
Slide 35
Slide 35 text
function Beer(){
this.tasty = true;
}
!
var beer = new Beer();
!
beer.tasty; //-> true
Implicit this
Slide 36
Slide 36 text
Don’t forget new
function Beer(){
this.kind = ‘beer’;
}
!
var beer = Beer();
this will the
global object
Slide 37
Slide 37 text
function Beer(){
!
this.__proto__ = Beer.prototype;
!
}
function.prototype
Slide 38
Slide 38 text
function.prototype
function Beer(){
!
}
!
Beer.prototype
Every function has
this special property
Slide 39
Slide 39 text
But this is not the prototype
Beer.prototype !== Beer.__proto__
Call this ‘function
prototype’
Slide 40
Slide 40 text
function.prototype
function Beer(){
!
}
!
var beer = new Beer();
beer.__proto__ ????
What is the
__proto__ of beer?
Slide 41
Slide 41 text
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
Slide 42
Slide 42 text
Function
instance
new
__proto__
Function
prototype
.prototype
Slide 43
Slide 43 text
•
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
Slide 44
Slide 44 text
function Beer(){
}
!
Beer.prototype.brew = function () {}
!
var coopers = new Beer();
var creatures = new Beer();
!
coopers.brew();
creatures.brew();
!
Useful for performance
Slide 45
Slide 45 text
•
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!
Slide 46
Slide 46 text
•
function Beer(){
this.ingredients = [‘yeast’]
}
•
var coopers = new Beer()
var creatures = new Beer()
•
coopers.ingredients.push(‘wheat’)
•
creatures.ingredients
//-> [‘yeast’]
Isolation
Slide 47
Slide 47 text
function Beer(){
!
}
!
var coopers = new Beer();
!
coopers instanceof Beer;
//-> true
!
instanceof