18th of December, 2014 Javascript and OOP The power of simplicity
Steam Learn: Javascript and OOP
Jul 18, 2015
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
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
Related Documents
