Steam Learn: Javascript and OOP

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

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;

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;

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!"

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";

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";

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

Steam Learn: Javascript and OOP

Recommended

More Related Content

What's hot (18)

Similar to Steam Learn: Javascript and OOP (20)

More from inovia (20)

Recently uploaded (20)

Steam Learn: Javascript and OOP