Javascript Object Oriented Programming
Download as PPT, PDF•0 likes•389 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();