[frontend 101] javascript oop
TRANSCRIPT
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!