javascript object oriented programming

Click to add Text

Javascript

Presented by Bunlong VAN

http://geekhmer.github.io

Object Oriented

The Disclaimer

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