Javascript Object Oriented Programming
Download as PPT, PDF0 likes389 views
This document provides an overview of object-oriented programming concepts in JavaScript, including objects, classes, encapsulation, inheritance, and the prototype pattern. It explains how to create objects, define methods, extend objects through prototypes, implement inheritance through prototypal inheritance and mixins, and use the module pattern to create private variables and functions within objects.
![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);](https://image.slidesharecdn.com/javascriptobjectorientedprogramming-141123190355-conversion-gate01/85/Javascript-Object-Oriented-Programming-15-320.jpg)
Javascript Object Oriented Programming
- 1. Click to add Text Javascript Presented by Bunlong VAN http://geekhmer.github.io Object Oriented
- 3. 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
- 4. 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โ; } }
- 5. Method โขWhen a property is a function we can call it a method var object = { method: function() { alert(โHere is methodโ); } }
- 6. 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
- 7. 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
- 8. 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
- 9. 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();
- 10. Prototype Usage โขCallMeAgain() is a property of the prototype object โขBut it behaves as if it's a prototype of the dude object
- 11. Own Properties Vs Prototype's โขpersonObj.hasOwnProperty(โcallMeโ); // will return true โขpersonObj.hasOwnProperty(โcallMeAgainโ); // will return false
- 12. isPrototypeOf โขPerson.prototype.isPrototypeOf(personObj); // will return true
- 13. Inheritance โขOOP ensures code reuse โขTwo forms of OOP โข Classical with Mixin โข Prototypal
- 14. Prototypal Inheritance var Boy = function() {}; Boy.prototype = new Person(); var boyObj = new Boy(); boyObj.callMe();
- 15. 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);
- 16. 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
- 17. 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
- 18. Module Pattern (Con.) var myModule = function() { var privateVariable, privateFunction = function() { // coding here }; return { FirstMethod: function() { // can access privateVariable // can access privateFunction } } }(); myModule.firstMethod();