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

1. JavaScript OOP
Maxis Kao @ Yahoo Search
Frontend 101

2. JavaScript

3. JavaScript

4. Java

5. OOP

6. Classical OOP
➔ Object-oriented programming
➔ C++, Java, Python

7. ➔ Prototype-based programming
➔ Prototypical inheritance
in JavaScript,

8. before we start

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. Object
// create two instances, mew and pikachu
var mew = new Pokemon();
var pikachu = new Pokemon();
An instance of a class.

11. Property
An object characteristic, such as name.
// define the name property for the Pokemon class
var Pokemon = function (pokemonName) {
this.name = pokemonName;
};

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. 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. 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. 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. 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. 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. 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. 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. Question 2.
Please make the public property “name” private in Question 1.
var Pokemon = function(pokemonName) {
this.name = pokemonName;
...
}

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. 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. 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. 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. 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. 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. 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. Inheritance: use MythPokemon
var mew = new MythPokemon('Mew', 'sing a song');
mew.bark();

29. Inheritance: use MythPokemon
var mew = new MythPokemon('Mew', 'sing a song');
mew.bark();
// "I'm mighty mew! I can sing a song"

30. Happy JavaScript OOP!