[frontend 101] javascript oop

JavaScript OOP

Maxis Kao @ Yahoo Search

Frontend 101

JavaScript

JavaScript

Java

OOP

Classical OOP

➔ Object-oriented programming

➔ C++, Java, Python

➔ Prototype-based programming

➔ Prototypical inheritance

in JavaScript,

before we start

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.

Object

// create two instances, mew and pikachu

var mew = new Pokemon();

var pikachu = new Pokemon();

An instance of a class.

Property

An object characteristic, such as name.

// define the name property for the Pokemon class

var Pokemon = function (pokemonName) {

this.name = pokemonName;

};

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

};

Question 1.

Please use JavaScript object to describe a Pokemon which includes a property “name” and a method “bark” to shout its name out.

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();

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"

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();

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"

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();

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"

Question 2.

Please make the public property “name” private in Question 1.

var Pokemon = function(pokemonName) {

this.name = pokemonName;

...

}

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();

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"

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();

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"

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

};

})();

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)

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

Inheritance: use MythPokemon

var mew = new MythPokemon('Mew', 'sing a song');

mew.bark();

Inheritance: use MythPokemon

var mew = new MythPokemon('Mew', 'sing a song');

mew.bark();

// "I'm mighty mew! I can sing a song"

Happy JavaScript OOP!