steam learn: javascript and oop
TRANSCRIPT
18th of December, 2014
Javascript and OOP
The power of simplicity
18th of December, 2014
Outline
● The Javascript object● Adding behaviour● Inheritance without classes● OOP concepts in JS
18th of December, 2014
Outline
● The Javascript object● Adding behaviour● Inheritance without classes● OOP concepts in JS
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;
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;
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;
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");
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;
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;
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;
18th of December, 2014
Outline
● The Javascript object● Adding behaviour● Inheritance without classes● OOP concepts in JS
18th of December, 2014
Adding behaviour
var greeter = { nameToGreet: "Roger",
};
greeter.greet(); // How to do it ?
18th of December, 2014
Adding behaviour
var greeter = { nameToGreet: "Roger",
greet: function () { console.log("Hello " + this.nameToGreet + "!"); }
};
greeter.greet(); // "Hello Roger!"
18th of December, 2014
Adding behaviour
var greeter = { nameToGreet: "Roger",
greet: function () { console.log("Hello " + this.nameToGreet + "!"); }
};
greeter.greet(); // "Hello Roger!"
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!"
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!"
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!"
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!"
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!"
18th of December, 2014
Outline
● The Javascript object● Adding behaviour● Inheritance without classes● OOP concepts in JS
18th of December, 2014
Prototypal inheritance
Do not have classes ?
Extend objects !
18th of December, 2014
Prototypal inheritance
var baseObject = { name: "baseObject"};
var childObject = { __proto__: baseObject};
childObject.name === "baseObject";
18th of December, 2014
Prototypal inheritance
var baseObject = { name: "baseObject"};
var childObject = { __proto__: baseObject};
childObject.name === "baseObject";
18th of December, 2014
Prototypal inheritance
var baseObject = { name: "baseObject"};
var childObject = { __proto__: baseObject};
childObject.name === "baseObject";
18th of December, 2014
Prototypal inheritance
var baseObject = { name: "baseObject"};
var childObject = { __proto__: baseObject};
childObject.name === "baseObject";
18th of December, 2014
Prototypal inheritance
var baseObject = { name: "baseObject"};
var childObject = { __proto__: baseObject};
childObject.name === "baseObject";
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
18th of December, 2014
Prototype with constructor
var baseObject = { name: "baseObject"};
var ChildObject = function () {};ChildObject.prototype = baseObject;
var childObject = new ChildObject();
childObject.name === "baseObject";
18th of December, 2014
Prototype with constructor
var baseObject = { name: "baseObject"};
var ChildObject = function () {};ChildObject.prototype = baseObject;
var childObject = new ChildObject();
childObject.name === "baseObject";
18th of December, 2014
Outline
● The Javascript object● Adding behaviour● Inheritance without classes● OOP concepts in JS
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!"
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
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
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!"
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!"
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
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
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
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
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
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
18th of December, 2014
What did we learn ?
With:● Objects
18th of December, 2014
What did we learn ?
With:● Objects● Functions
18th of December, 2014
What did we learn ?
With:● Objects● Functions● Prototypes
18th of December, 2014
What did we learn ?
With:● Objects● Functions● Prototypes
We got:● Classes● Methods● Inheritance● Static fields● Private fields
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 !
18th of December, 2014
Questions ?For online questions, please leave a comment on the article.
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/
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