The Four Layers of JavaScript OOP

The Four Layers of JavaScript OOP
Dr. Axel Rauschmayer
2ality.com
2014-02-25
Webcast

View Slide

Level of JavaScript knowledge?
Understanding OOP (any language)
Single objects (object literals)
Constructors
Prototype chains
Dr. Axel Rauschmayer (2ality.com) The Four Layers of JavaScript OOP 2014-02-25 2 / 35

View Slide

The four layers
How to best learn JavaScript OOP?
Object
Prototype
Constructor
new
…
Object
Layer 1:
single
object
Layer 2:
prototype
chain
Layer 3:
constructor
SubConstr
SuperConstr
Layer 4:
constructor
inheritance
__proto__
__proto__
Instance
Prototype
…
__proto__
__proto__

View Slide

Layer 1: Single objects

View Slide

Creating a single object
Objects: atomic building blocks of JavaScript OOP.
Objects: maps from strings to values
Properties: entries in the map
Methods: properties whose values are functions
this refers to receiver of method call
// Object literal
var jane = {
// Property
name: 'Jane',
// Method
describe: function () {
return 'Person named ' + this.name;
}
};
JS advantage: create objects directly, introduce abstractions later

View Slide

var jane = {
name: 'Jane',
}
};
# jane.name
'Jane'
# jane.describe
[Function]
# jane.describe()
'Person named Jane'
# jane.name = 'John';
# jane.describe()
'Person named John'
# jane.unknownProperty
undefined

View Slide

Objects versus maps
Similar:
Very dynamic: freely delete and add properties
Diﬀerent:
inheritance (via prototype chains)
fast access to properties (via constructors1)
1If you don’t add or remove properties after construction.

View Slide

Layer 2: Prototype chains

View Slide

Sharing properties: the problem
var jane = {
name: 'Jane',
}
};
var tarzan = {
name: 'Tarzan',
}
};

View Slide

Sharing properties: the solution
__proto__
name 'Jane' name
__proto__
'Tarzan'
describe function() {...}
jane tarzan
PersonProto
jane and tarzan share the same prototype object.
Both prototype chains work like single objects.

View Slide

Sharing properties: the code
var PersonProto = {
}
};
var jane = {
__proto__: PersonProto,
name: 'Jane'
};
var tarzan = {
__proto__: PersonProto,
name: 'Tarzan'
};

View Slide

Getting and setting the prototype
ECMAScript 6: __proto__
ECMAScript 5:
Object.create()
Object.getPrototypeOf()

View Slide

Getting and setting the prototype
Object.create(proto)
var PersonProto = {
}
};
var jane = Object.create(PersonProto);
jane.name = 'Jane';
Object.getPrototypeOf(obj)
# Object.getPrototypeOf(jane) === PersonProto
true

View Slide

Layer 3: Constructors

View Slide

A constructor for persons
function Person(name) {
this.name = name;
this.describe = function () {
};
}
var jane = new Person('Jane');
console.log(jane instanceof Person); // true

View Slide

Instances created by the constructor
name 'Tarzan'
tarzan
name 'Jane'
jane
How to eliminate the redundancy?

View Slide

Sharing methods
// Instance-specific properties
this.name = name;
}
// Shared properties
Person.prototype.describe = function () {
};

View Slide

Instances created by the constructor
__proto__
name 'Tarzan'
tarzan
Person.prototype
prototype
Person
this.name = name;
}
__proto__
name 'Jane'
jane

View Slide

Two prototypes
Overloaded terminology:
Prototype 1: prototype relationship between objects
Prototype 2: property prototype of constructors
(the prototype of all instances)
Disambiguation (if necessary): call prototype 2 the instance prototype.

View Slide

instanceof
Is value an instance of Constr?
value instanceof Constr
How does instanceof work?
Check: Is Constr.prototype in the prototype chain of value?
// Equivalent
value instanceof Constr
Constr.prototype.isPrototypeOf(value)

View Slide

Layer 4: Inheritance between constructors

View Slide

Goal: derive Employee from Person
this.name = name;
}
Person.prototype.sayHelloTo = function (otherName) {
console.log(this.name + ' says hello to ' + otherName);
};
Person.prototype.describe = function () {
};
Employee(name, title) is like Person, except:
Additional instance property: title
describe() returns 'Person named ()'

View Slide

Things we need to do
Employee must
Inherit Person’s instance properties
Create the instance property title
Inherit Person’s prototype properties
Override method Person.prototype.describe
(and call overridden method)

View Slide

Employee: the code
function Employee(name, title) {
Person.call(this, name); // (1)
this.title = title; (2)
}
Employee.prototype = Object.create(Person.prototype); // (3)
Employee.prototype.describe = function () { // (4)
return Person.prototype.describe.call(this) // (5)
+ ' (' + this.title + ')';
};
1 Inherit instance properties
2 Create the instance property title
3 Inherit prototype properties
4 Override method Person.prototype.describe
5 Call overridden method (a super-call)

View Slide

The structure of the constructors
title 'CTO'
__proto__
name 'Jane'
__proto__
sayHelloTo function() {...}
jane
Person.prototype
prototype
Person
__proto__
Employee.prototype
prototype
Employee
Object.prototype
calls

View Slide

Built-in constructor hierarchy
2
length
1 'bar'
__proto__
0 'foo'
…
toString function() {...}
__proto__ null
[ 'foo', 'bar' ]
Object.prototype
prototype
Object
…
sort function() {...}
__proto__
toString function() {...}
Array.prototype
prototype
Array

View Slide

Conclusion

View Slide

Conclusion
Summary: the layers
1 Basic building blocks: objects
2 Sharing properties: prototype chains
3 Constructors set up instances. Separation of concerns:
Instance data: set up by function Constr
Methods: in Constr.prototype
4 Inheritance between constructors. Derive Sub from Super:
Instance data: Sub calls Super (as a function)
Methods: Sub.prototype has prototype Super.prototype
Future (ECMAScript 6): classes2 (help especially with layer 4)
2www.2ality.com/2012/07/esnext-classes.html

View Slide

Thanks!
Book: “Speaking JavaScript”
Available in March
SpeakingJS.com
Free online
(subscribe to be notiﬁed)

View Slide

Bonus

View Slide

Bonus
Extracting methods
var counter = {
count: 0,
inc: function () {
this.count++;
}
};
# setTimeout(counter.inc, 0)
# counter.count
0
# setTimeout(counter.inc.bind(counter), 0)
# counter.count
1

View Slide

Bonus
Shadowing this
var obj = {
name: 'Jane',
friends: [ 'Tarzan', 'Cheeta' ],
loop: function () {
'use strict';
this.friends.forEach(
function (friend) {
console.log(this.name + ' knows ' + friend);
}
);
}
};

View Slide

Bonus
Fix 1: that = this
loop: function () {
'use strict';
var that = this;
this.friends.forEach(function (friend) {
console.log(that.name + ' knows ' + friend);
});
}

View Slide

Bonus
Fix 2: bind()
loop: function () {
'use strict';
}.bind(this));
}

View Slide

Bonus
Fix 3: forEach parameter thisValue
loop: function () {
'use strict';
}, this);
}

View Slide

The Four Layers of JavaScript OOP

The Four Layers of JavaScript OOP

Axel Rauschmayer

More Decks by Axel Rauschmayer

Other Decks in Programming

Featured

Transcript