PROTOTYPE PROGRAMMING
JAVASCRIPT
@RMARIUZZO
JAN 13TH, 19:00, COWORKING
Slide 2
Slide 2 text
X-TEAM / WEB DEVELOPER
RUBENS MARIUZZO
Slide 3
Slide 3 text
PROTOTYPE
PROGRAMMING
Slide 4
Slide 4 text
A style of object-oriented programming
in which behavior reuse
is performed via a process of cloning
existing objects that serve as prototypes.
— Wikipedia
Slide 5
Slide 5 text
A style of object-oriented programming
in which inheritance
is performed via delegation to
existing objects that serve as prototypes.
— Wikipedia
Slide 6
Slide 6 text
OOP
class—based prototype—based
Slide 7
Slide 7 text
OOP
class—based prototype—based
Slide 8
Slide 8 text
Class—based OOP
parent
child child
child
Slide 9
Slide 9 text
Prototype—based OOP
parent
child child
child
Slide 10
Slide 10 text
OBJECTS
Everything starts with
Slide 11
Slide 11 text
In JavaScript “there are multiple ways to create
objects, but only two atomic mechanisms are used”
Slide 12
Slide 12 text
var obj = {
key: value
}
1. Creating an object from literal
Slide 13
Slide 13 text
var Fun = function() {
this.key = value;
};
var obj = new Fun();
2. Creating an object from function
Slide 14
Slide 14 text
IMPLICIT PROTOTYPE LINK
Slide 15
Slide 15 text
Almost all objects has a prototype link,
at the time of their creation.
That implicit prototype link is
a reference to another object.
Slide 16
Slide 16 text
var obj = {};
obj.foo;
// Output: ?
Slide 17
Slide 17 text
var obj = {};
obj.foo;
// Output: unknow
Slide 18
Slide 18 text
var obj = {};
obj.toString();
// Output: ?
Slide 19
Slide 19 text
var obj = {};
obj.toString();
// Output: [object Object]
Slide 20
Slide 20 text
WHY?
Slide 21
Slide 21 text
WHY?
IMPLICIT PROTOTYPE LINK
Slide 22
Slide 22 text
- foo
obj1
- foo
obj2
PROTOTYPE LINK
Slide 23
Slide 23 text
- foo
obj1
- foo
obj2
obj1.foo resolves to obj2.foo
because obj1 delegates to obj2
PROTOTYPE LINK
Slide 24
Slide 24 text
By default, for all objects
the implicit prototype link points to:
Object.prototype
Slide 25
Slide 25 text
var obj = {};
var proto = Object.getPrototypeOf(obj);
proto === Object.prototype;
// Output: true
Slide 26
Slide 26 text
HOW CAN WE DELEGATE
USING IMPLICIT PROTOTYPE LINK?
Adding methods to Object.prototype
has a very high risk of breaking something.
Don’t do that. Point.
Slide 30
Slide 30 text
EXPLICIT PROTOTYPE
PROPERTY
Slide 31
Slide 31 text
A prototype property is automatically created
for every function.
That explicit prototype property is
a reference to a prototype for new objects.
Slide 32
Slide 32 text
var Foo = function () {}
- prototype
Foo {}
Slide 33
Slide 33 text
var Foo = function () {};
Foo.prototype;
// Output: {}
Slide 34
Slide 34 text
var Foo = function () {};
Foo.prototype.bar = 123;
Slide 35
Slide 35 text
var Foo = function () {};
Foo.prototype.bar = 123;
var obj = new Foo();
obj
- prototype
Foo
Slide 36
Slide 36 text
var Foo = function () {};
Foo.prototype.bar = 123;
var obj = new Foo();
obj.bar;
// Output: 123
Slide 37
Slide 37 text
PROTOTYPAL INHERITANCE
Slide 38
Slide 38 text
var A = function() {};
A.prototype.p1 = 101;
var B = function() {};
B.prototype.p2 = 202;
Slide 39
Slide 39 text
var A = function() {};
A.prototype.p1 = 101;
var B = function() {};
B.prototype = Object.create(A.prototype);
B.prototype.p2 = 202;
Slide 40
Slide 40 text
var A = function() {};
A.prototype.p1 = 101;
var B = function() {};
B.prototype = Object.create(A.prototype);
B.prototype.p2 = 202;
var obj = new B();
obj.p1; // Output: 101
obj.p2; // Output: 202
Slide 41
Slide 41 text
alla ES5
Slide 42
Slide 42 text
var A = {};
A.p1 = 101;
var B = {};
B.p2 = 202;
Slide 43
Slide 43 text
var A = {};
A.p1 = 101;
var B = Object.create(A);
B.p2 = 202;
Slide 44
Slide 44 text
var A = {};
A.p1 = 101;
var B = Object.create(A);
B.p2 = 202;
var b1 = Object.create(B);
b1.p1; // Output: 101
b1.p2; // Output: 202
Slide 45
Slide 45 text
PROPERTIES
Slide 46
Slide 46 text
var obj1 = {
a: 1
};
Slide 47
Slide 47 text
var obj1 = {
a: 1
};
var obj2 = Object.create(obj1);
obj2.a++;
// Output: ?
Slide 48
Slide 48 text
var obj1 = {
a: 1
};
var obj2 = Object.create(obj1);
obj2.a++;
// obj1.a: 1
// obj2.a: 2
Slide 49
Slide 49 text
PROPERTIES
can be shadowed
using [[Put]] operation
Slide 50
Slide 50 text
✓ Prototype Programming is a style of OOP.
✓ Objects has implicit prototype link, when created.
✓ Properties are resolved through prototype chain.
✓ Functions has an explicit prototype property.
SUMMARY