Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

[Frontend 101] JavaScript OOP

365 views

Published on

Shared on Aug. 18 @ Yahoo

A brief introduction to JavaScript OOP (Object-oriented programming).

3 ways to create a javascript "class"

1. Object Literal
2. Object Functions (w/o using prototype)
3. IIFE, immediately-invoked function expression

and a little bit of Inheritance :P

Published in: Engineering
  • Be the first to comment

[Frontend 101] JavaScript OOP

  1. 1. JavaScript OOP Maxis Kao @ Yahoo Search Frontend 101
  2. 2. JavaScript
  3. 3. JavaScript
  4. 4. Java
  5. 5. OOP
  6. 6. Classical OOP ➔ Object-oriented programming ➔ C++, Java, Python
  7. 7. ➔ Prototype-based programming ➔ Prototypical inheritance in JavaScript,
  8. 8. before we start
  9. 9. Class // define a new class called Pokemon with an empty constructor var Pokemon = function () {}; Defines the object's characteristics. A class is a template definition of an object's properties and methods.
  10. 10. Object // create two instances, mew and pikachu var mew = new Pokemon(); var pikachu = new Pokemon(); An instance of a class.
  11. 11. Property An object characteristic, such as name. // define the name property for the Pokemon class var Pokemon = function (pokemonName) { this.name = pokemonName; };
  12. 12. Method An object capability, such as walk. It is a subroutine or function associated with a class. // define the method bark() for the Pokemon class Pokemon.prototype.bark = function () { console.log("Hey, I'm " + this.name); };
  13. 13. Question 1. Please use JavaScript object to describe a Pokemon which includes a property “name” and a method “bark” to shout its name out.
  14. 14. 1. Object function var Pokemon = function (pokemonName) { // this refers to Pokemon this.name = pokemonName; }; Pokemon.prototype.bark = function () { // this refers to Pokemon console.log("Hey, I'm " + this.name); }; var pikachu = new Pokemon('Pikachu'); pikachu.bark(); pikachu.name = 'PikaPika'; pikachu.bark();
  15. 15. 1. Object function var Pokemon = function (pokemonName) { // this refers to Pokemon this.name = pokemonName; }; Pokemon.prototype.bark = function () { // this refers to Pokemon console.log("Hey, I'm " + this.name); }; var pikachu = new Pokemon('Pikachu'); pikachu.bark(); // "Hey, I'm Pikachu" pikachu.name = 'PikaPika'; pikachu.bark(); // "Hey, I'm PikaPika"
  16. 16. 2. Object function (without prototype) var Pokemon = function(pokemonName) { this.name = pokemonName; this.bark = function() { // this refers to Pokemon console.log("Hey, I'm " + this.name); }; }; var pikachu = new Pokemon('Pikachu'); pikachu.bark(); pikachu.name = 'PikaPika'; pikachu.bark();
  17. 17. 2. Object function (without prototype) var Pokemon = function(pokemonName) { this.name = pokemonName; this.bark = function() { // this refers to Pokemon console.log("Hey, I'm " + this.name); }; }; var pikachu = new Pokemon('Pikachu'); pikachu.bark(); // "Hey, I'm Pikachu" pikachu.name = 'PikaPika'; pikachu.bark(); // "Hey, I'm PikaPika"
  18. 18. 3. Object Literal var Pokemon = { name: "Pikachu", bark: function() { console.log("Hey, I'm " + this.name); } }; Pokemon.name = 'Pikachu'; Pokemon.bark(); Pokemon.name = 'PikaPika'; Pokemon.bark();
  19. 19. 3. Object Literal var Pokemon = { name: "Pikachu", bark: function() { console.log("Hey, I'm " + this.name); } }; Pokemon.name = 'Pikachu'; Pokemon.bark(); // "Hey, I'm Pikachu" Pokemon.name = 'PikaPika'; Pokemon.bark(); // "Hey, I'm PikaPika"
  20. 20. Question 2. Please make the public property “name” private in Question 1. var Pokemon = function(pokemonName) { this.name = pokemonName; ... }
  21. 21. 1. Object function var Pokemon = function(pokemonName) { var name = pokemonName; this.bark = function () { console.log("Hey, I'm " + name); }; // introduce a setter this.setName = function (newName) { name = newName; }; }; var pikachu = new Pokemon('Pikachu'); pikachu.bark(); pikachu.setName('PikaPika'); pikachu.bark();
  22. 22. 1. Object function var Pokemon = function(pokemonName) { var name = pokemonName; this.bark = function () { console.log("Hey, I'm " + name); }; // introduce a setter this.setName = function (newName) { name = newName; }; }; var pikachu = new Pokemon('Pikachu'); pikachu.bark(); // "Hey, I'm Pikachu" pikachu.setName('PikaPika'); pikachu.bark(); // "Hey, I'm PikaPika"
  23. 23. Trying to access the private member... var Pokemon = function(pokemonName) { var name = pokemonName; this.bark = function () { console.log("Hey, I'm " + name); }; // introduce a setter this.setName = function (newName) { name = newName; }; }; var pikachu = new Pokemon('Pikachu'); pikachu.bark(); pikachu.setName('PikaPika'); pikachu.name = 'PikaPika'; pikachu.bark();
  24. 24. Trying to access the private member... var Pokemon = function(pokemonName) { var name = pokemonName; this.bark = function () { console.log("Hey, I'm " + name); }; // introduce a setter this.setName = function (newName) { name = newName; }; }; var pikachu = new Pokemon('Pikachu'); pikachu.bark(); // "Hey, I'm Pikachu" pikachu.setName('PikaPika'); pikachu.name = 'PikaPika'; pikachu.bark(); // "Hey, I'm Pikachu"
  25. 25. Pokemon.bark(); Pokemon.setName('Pikachu'); Pokemon.bark(); 2. Immediately Invoked Function (IIF) var Pokemon = (function(){ var name; var setName = function(newName) { name = newName; }; var bark = function () { console.log("Hey, I'm " + name); }; return { bark: bark, setName: setName }; })();
  26. 26. var Pokemon = (function(){ var name; var setName = function(newName) { name = newName; }; var bark = function () { console.log("Hey, I'm " + name); }; return { bark: bark, setName: setName }; })(); Pokemon.bark(); // "Hey, I'm undefined" Pokemon.setName('Pikachu'); Pokemon.bark(); // "Hey, I'm Pikachu" 2. Immediately Invoked Function (IIF)
  27. 27. function MythPokemon(pokemonName, ability) { // Call the parent constructor using .call() Pokemon.call(this, pokemonName); // Initialize the MythPokomon-specific properties this.ability = ability; } MythPokemon.prototype = Object.create(Pokemon.prototype); MythPokemon.prototype.bark = function(){ console.log("I'm mighty " + this.name + "! I can " + this.ability); }; Inheritance
  28. 28. Inheritance: use MythPokemon var mew = new MythPokemon('Mew', 'sing a song'); mew.bark();
  29. 29. Inheritance: use MythPokemon var mew = new MythPokemon('Mew', 'sing a song'); mew.bark(); // "I'm mighty mew! I can sing a song"
  30. 30. Happy JavaScript OOP!

×