The document provides an introduction to Object-Oriented Programming (OOP) in JavaScript, explaining key concepts such as classes, properties, and methods through the example of a Pokémon class. It covers how to define a class, create instances, encapsulate properties, and implement inheritance. Various coding patterns are demonstrated, including the use of prototypes, object literals, and immediately invoked function expressions (IIFEs) to manage private data and behavior.

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!