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