The Javascript object Adding behaviour Inheritance without classes OOP concepts in JS

1. 18th of December, 2014
Javascript and OOP
The power of simplicity

2. 18th of December, 2014
Outline
● The Javascript object
● Adding behaviour
● Inheritance without classes
● OOP concepts in JS

3. 18th of December, 2014
Outline
● The Javascript object
● Adding behaviour
● Inheritance without classes
● OOP concepts in JS

4. 18th of December, 2014
What is an object ?
var label = {
x: 20,
y: 23,
width: 100,
height: 24,
text: "Click me!"
};
label["x"] === 20;
label.y === 23;

5. 18th of December, 2014
What is an object ?
var label = {
x: 20,
y: 23,
width: 100,
height: 24,
text: "Click me!"
};
label["x"] === 20;
label.y === 23;

6. 18th of December, 2014
What is an object ?
var label = {
x: 20,
y: 23,
width: 100,
height: 24,
text: "Click me!"
};
label["x"] === 20;
label.y === 23;

7. 18th of December, 2014
Create it in a function
function createLabel(x, y, text) {
return {
x: x,
y: y,
width: computeWidth(text),
height: defaultHeight,
text: text
};
}
var errorLabel = createLabel(20, 23, "There was an error");
var successLabel = createLabel(56, 89, "Success");

8. 18th of December, 2014
The constructor function
function Label(x, y, text) {
this.x = x;
this.y = y;
this.width = computeWidth(text);
this.height = defaultHeight;
this.text = text;
}
var errorLabel = new Label(20, 23, "There was an error");
errorLabel.x === 20;

9. 18th of December, 2014
The constructor function
function Label(x, y, text) {
this.x = x;
this.y = y;
this.width = computeWidth(text);
this.height = defaultHeight;
this.text = text;
}
var errorLabel = new Label(20, 23, "There was an error");
errorLabel.x === 20;

10. 18th of December, 2014
The constructor function
function Label(x, y, text) {
this.x = x;
this.y = y;
this.width = computeWidth(text);
this.height = defaultHeight;
this.text = text;
}
var errorLabel = new Label(20, 23, "There was an error");
errorLabel.x === 20;

11. 18th of December, 2014
Outline
● The Javascript object
● Adding behaviour
● Inheritance without classes
● OOP concepts in JS

12. 18th of December, 2014
Adding behaviour
var greeter = {
nameToGreet: "Roger",
};
greeter.greet(); // How to do it ?

13. 18th of December, 2014
Adding behaviour
var greeter = {
nameToGreet: "Roger",
greet: function () {
console.log("Hello " + this.nameToGreet + "!");
}
};
greeter.greet(); // "Hello Roger!"

14. 18th of December, 2014
Adding behaviour
var greeter = {
nameToGreet: "Roger",
greet: function () {
console.log("Hello " + this.nameToGreet + "!");
}
};
greeter.greet(); // "Hello Roger!"

15. 18th of December, 2014
A word about this...
var greeter = {
nameToGreet: "Roger",
greet: function () {
console.log("Hello " + this.nameToGreet + "!");
}
};
var semiGreeter = { nameToGreet: "Bob" };
semiGreeter.greet = greeter.greet;
semiGreeter.greet(); // "Hello Bob!"

16. 18th of December, 2014
A word about this...
var greeter = {
nameToGreet: "Roger",
greet: function () {
console.log("Hello " + this.nameToGreet + "!");
}
};
var semiGreeter = { nameToGreet: "Bob" };
semiGreeter.greet = greeter.greet;
semiGreeter.greet(); // "Hello Bob!"

17. 18th of December, 2014
A word about this...
var greeter = {
nameToGreet: "Roger",
greet: function () {
console.log("Hello " + this.nameToGreet + "!");
}
};
var semiGreeter = { nameToGreet: "Bob" };
semiGreeter.greet = greeter.greet;
semiGreeter.greet(); // "Hello Bob!"

18. 18th of December, 2014
A word about this...
var greeter = {
nameToGreet: "Roger",
greet: function () {
console.log("Hello " + this.nameToGreet + "!");
}
};
var semiGreeter = { nameToGreet: "Bob" };
semiGreeter.greet = greeter.greet;
semiGreeter.greet(); // "Hello Bob!"

19. 18th of December, 2014
A word about this...
var greeter = {
nameToGreet: "Roger",
greet: function () {
console.log("Hello " + this.nameToGreet + "!");
}
};
var semiGreeter = { nameToGreet: "Bob" };
semiGreeter.greet = greeter.greet;
semiGreeter.greet(); // "Hello Bob!"

20. 18th of December, 2014
Outline
● The Javascript object
● Adding behaviour
● Inheritance without classes
● OOP concepts in JS

21. 18th of December, 2014
Prototypal inheritance
Do not have classes ?
Extend objects !

22. 18th of December, 2014
Prototypal inheritance
var baseObject = {
name: "baseObject"
};
var childObject = {
__proto__: baseObject
};
childObject.name === "baseObject";

23. 18th of December, 2014
Prototypal inheritance
var baseObject = {
name: "baseObject"
};
var childObject = {
__proto__: baseObject
};
childObject.name === "baseObject";

24. 18th of December, 2014
Prototypal inheritance
var baseObject = {
name: "baseObject"
};
var childObject = {
__proto__: baseObject
};
childObject.name === "baseObject";

25. 18th of December, 2014
Prototypal inheritance
var baseObject = {
name: "baseObject"
};
var childObject = {
__proto__: baseObject
};
childObject.name === "baseObject";

26. 18th of December, 2014
Prototypal inheritance
var baseObject = {
name: "baseObject"
};
var childObject = {
__proto__: baseObject
};
childObject.name === "baseObject";

27. 18th of December, 2014
Prototypal inheritance
var baseObject = {
name: "baseObject"
};
var childObject = {
__proto__: baseObject
};
childObject.name === "baseObject";
childObject.name = "childObject";
childObject.name === "childObject";
Overrides baseObject.
name

28. 18th of December, 2014
Prototype with constructor
var baseObject = {
name: "baseObject"
};
var ChildObject = function () {};
ChildObject.prototype = baseObject;
var childObject = new ChildObject();
childObject.name === "baseObject";

29. 18th of December, 2014
Prototype with constructor
var baseObject = {
name: "baseObject"
};
var ChildObject = function () {};
ChildObject.prototype = baseObject;
var childObject = new ChildObject();
childObject.name === "baseObject";

30. 18th of December, 2014
Outline
● The Javascript object
● Adding behaviour
● Inheritance without classes
● OOP concepts in JS

31. 18th of December, 2014
Classes
function Greeter(name) {
this.name = name;
}
Greeter.prototype = {
greet: function () {
console.log("Hello " + this.name + "!");
}
};
var greeter = new Greeter("Roger");
greeter.greet(); // "Hello Roger!"

32. 18th of December, 2014
Classes
function Greeter(name) {
this.name = name;
}
Greeter.prototype = {
greet: function () {
console.log("Hello " + this.name + "!");
}
};
var greeter = new Greeter("Roger");
greeter.greet(); // "Hello Roger!"
Initialize instance

33. 18th of December, 2014
Classes
function Greeter(name) {
this.name = name;
}
Greeter.prototype = {
greet: function () {
console.log("Hello " + this.name + "!");
}
};
var greeter = new Greeter("Roger");
greeter.greet(); // "Hello Roger!"
Methods

34. 18th of December, 2014
Static fields
function Greeter(name) {
this.name = name || Greeter.DEFAULT_NAME;
}
Greeter.DEFAULT_NAME = "Sir";
Greeter.prototype = {
// ...
};
var greeter = new Greeter();
greeter.greet(); // "Hello Sir!"

35. 18th of December, 2014
Inheritance
function AwesomeGreeter(name) {
Greeter.call(this, name);
}
AwesomeGreeter.prototype = new Greeter();
AwesomeGreeter.prototype.superGreet = function () {
this.greet();
console.log("You are awesome!");
};
var greeter = new AwesomeGreeter("Chuck");
greeter.superGreet(); // "Hello Chuck!" "You are awesome!"

36. 18th of December, 2014
Inheritance
function AwesomeGreeter(name) {
Greeter.call(this, name);
}
AwesomeGreeter.prototype = new Greeter();
AwesomeGreeter.prototype.superGreet = function () {
this.greet();
console.log("You are awesome!");
};
var greeter = new AwesomeGreeter("Chuck");
greeter.superGreet(); // "Hello Chuck!" "You are awesome!"
Call parent’s
constructor

37. 18th of December, 2014
Inheritance
function AwesomeGreeter(name) {
Greeter.call(this, name);
}
AwesomeGreeter.prototype = new Greeter();
AwesomeGreeter.prototype.superGreet = function () {
this.greet();
console.log("You are awesome!");
};
var greeter = new AwesomeGreeter("Chuck");
greeter.superGreet(); // "Hello Chuck!" "You are awesome!"
Inherit parent’s methods

38. 18th of December, 2014
Inheritance
function AwesomeGreeter(name) {
Greeter.call(this, name);
}
AwesomeGreeter.prototype = new Greeter();
AwesomeGreeter.prototype.superGreet = function () {
this.greet();
console.log("You are awesome!");
};
var greeter = new AwesomeGreeter("Chuck");
greeter.superGreet(); // "Hello Chuck!" "You are awesome!"
Add new
methods

39. 18th of December, 2014
Private fields
function Greeter(name) {
this.greet = function () {
console.log('Hello ' + name + '!');
};
}
var greeter = new Greeter("Roger");
greeter.greet(); // "Hello Roger!"
console.log(greeter.name); // undefined

40. 18th of December, 2014
Private fields
function Greeter(name) {
this.greet = function () {
console.log('Hello ' + name + '!');
};
}
var greeter = new Greeter("Roger");
greeter.greet(); // "Hello Roger!"
console.log(greeter.name); // undefined
Define greet as a
closure

41. 18th of December, 2014
Private fields
function Greeter(name) {
function buildMessage() {
return 'Hello ' + name + '!';
}
this.greet = function () {
console.log(buildMessage());
};
}
var greeter = new Greeter("Roger");
greeter.greet(); // "Hello Roger!"
console.log(greeter.name); // undefined
Private method

42. 18th of December, 2014
What did we learn ?
With:
● Objects

43. 18th of December, 2014
What did we learn ?
With:
● Objects
● Functions

44. 18th of December, 2014
What did we learn ?
With:
● Objects
● Functions
● Prototypes

45. 18th of December, 2014
What did we learn ?
With:
● Objects
● Functions
● Prototypes
We got:
● Classes
● Methods
● Inheritance
● Static fields
● Private fields

46. 18th of December, 2014
What did we learn ?
With:
● Objects
● Functions
● Prototypes
We got:
● Classes
● Methods
● Inheritance
● Static fields
● Private fields
So Javascript is cool !

47. 18th of December, 2014
Questions ?
For online questions, please leave a comment on the article.

48. 18th of December, 2014
Join the community !
(in Paris)
Social networks :
● Follow us on Twitter : https://twitter.com/steamlearn
● Like us on Facebook : https://www.facebook.com/steamlearn
SteamLearn is an Inovia initiative : inovia.fr
You wish to be in the audience ? Join the meetup group!
http://www.meetup.com/Steam-Learn/

49. 18th of December, 2014
References
● MDN - Introduction to object-oriented Javascript
● 2ality - JavaScript’s “this”: how it works, where it can trip
you up
● Ecmascript 6 specification draft