Javascript Object Oriented Programming

Click to add Text
Javascript
Presented by Bunlong VAN
http://geekhmer.github.io
Object Oriented

Object Oriented Basic
•Object (instance): representation of a “thing” (someone or
something)
•Class: ablueprint, or recipe for an Object
•Encapsulation: illustrates the fact that an Object contains
(encapsulates):
• Data (stored in properties)
• The means to do something with data (using
methods)
•Inheritance

Object Creation
•Two simple ways
var obj = new Object();
obj.name = “Foo”;
obj.say = function() {
return “Hello”;
}
var obj = {
name: “Foo”,
say: function() {
return “Hello”;
}
}

Method
•When a property is a function we can call it a method
var object = {
method: function() {
alert(“Here is method”);
}
}

Prototype
•JavaScript functions work as constructors, methods and
modules
•It has Prototypal Inheritance, which offers great expressive
powers
•All Objects are directly or indirectly link to Object.prototype
•Each Object is linked to its parent via a magic link
•When a member is accessed the compiler looks at the
Object and then looks up to its parent via the magic link
•It keeps going all the way up to Object.prototype
•Go to console of firebug and type Object.prototype

Prototype (Con.)
•Looking for my_object.foo, found it in the Object itself
•Looking for my_object.baz looks in the object and if it
doesn't find it there it goes to my_object_parent which is
my_object.prototype
•Looking for my_object.some_random_member can't find it in the
object, look at my_object_parent, can't find it
•There either, goes to Object can't find it there and is set to
undefined

Prototype (Con.)
var Person = function() {
this.name = “Mr. Bunlong”;
this.callMe = function() {
alert(“I am ” + this.name);
}
}
var personObj = new Person();
personObject.callMe();
personObject.constructor();
personObject.myFoo(); // will return underfined

Object Augm entation
•New members can be added to any object
Person.prototype.callMeAgain = function() {
alert(“I said my name is ” + this.name);
};
personObj.callMeAgain();

Prototype Usage
•CallMeAgain() is a property of the prototype object
•But it behaves as if it's a prototype of the dude object

Own Properties Vs Prototype's
•personObj.hasOwnProperty(“callMe”); // will return true
•personObj.hasOwnProperty(“callMeAgain”); // will return false

isPrototypeOf
•Person.prototype.isPrototypeOf(personObj); // will return true

Inheritance
•OOP ensures code reuse
•Two forms of OOP
• Classical with Mixin
• Prototypal

Prototypal Inheritance
var Boy = function() {};
Boy.prototype = new Person();
var boyObj = new Boy();
boyObj.callMe();

Inheritance through Mixin
var Person = function(name) {
this.greet = function() {
alert(“Hello, I'm ” + name);
}
};
var Employee = function(name) {
person.apply(this, [name]);
this.getTeam = function() {return “UI Library”;}
}
// instantiate object of Employee
var employee = new Employee(“Bunlong”);
employee.greet();
var team = employee.getTeam();
alert(“Team: ” + team);

Singleton
•There is no need to produce a class like constructor for an
object that will have exactly one instance
•This is typical of JavaScript applications
•Use an object literal to get started instead

Module Pattern
•The methods of a singleton can enjoy access to shared
private datum and private methods
•Variables defined in a module are only visible in a module
•Variables defined in a function are only visible to the
function
•Function can be used as module containers

Module Pattern (Con.)
var myModule = function() {
var privateVariable,
privateFunction = function() {
// coding here
};
return {
FirstMethod: function() {
// can access privateVariable
// can access privateFunction
}
}
}();
myModule.firstMethod();

Javascript Object Oriented Programming

Javascript Object Oriented Programming

More Related Content

What's hot (19)

Similar to Javascript Object Oriented Programming (20)

More from Bunlong Van (9)

Recently uploaded (20)

Javascript Object Oriented Programming