Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Object Oriented Programming in JavaScript

890 views

Published on

Published in: Software
  • Be the first to comment

Object Oriented Programming in JavaScript

  1. 1. Object-­‐‑Oriented   Programming
  in
  JavaScript Zander Magtipon May 25, 2015
  2. 2. OOP  in  JavaScript • Overview • Prototype Chain • Custom Objects o The class o The constructor o The object (class instance) o The property o The method o Static members o Private and privileged members • Inheritance • Encapsulation • Accessing Superclass Members • Passing Constructor Arguments
  3. 3. Overview • JavaScript is designed on a simple object-based paradigm. An object is a collection of properties, and a property is an association between a name and a value. A property's value can be a function, in which case the property is known as a method. • One of the key differences of JavaScript from other OOP languages is that it does not have classes. Instead, JavaScript uses functions as classes. • The class functionality is accomplished by object prototypes where object inherits from another object.
  4. 4. Overview • JavaScript functions are objects, giving functions the capacity to hold executable code and be passed around like any other object. • All objects in JavaScript are descended from Object object. • All objects inherit methods and properties from Object.prototype. • All object properties/methods are public.
  5. 5. Prototype  Chain • A prototype chain is a finite chain of objects which is used to implement inheritance and shared properties. • Every object in JavaScript has an internal link to another object called prototype. That prototype object has a prototype of its own, and so on until an object is reached with null as its prototype. • __proto__ is the actual object that is used in the lookup chain to resolve methods, etc. • prototype is the object that is used to build __proto__ when you create an object.
  6. 6. Prototype  Chain var b = new Foo(20); var c = new Foo(30);
  7. 7. Custom  Objects • Defining a class is as easy as defining a function. function Person() { } The class
  8. 8. Custom  Objects • In JavaScript the function serves as the constructor of the object. • The constructor is used to set the object's properties or to call methods to prepare the object for use. function Person () { console.log('instance created'); } The constructor
  9. 9. Custom  Objects • An instance of an object can be created by executing the constructor function using the new operator. var person1 = new Person(); var person2 = new Person(); The object (class instance)
  10. 10. Custom  Objects • Properties are set in the constructor of the class so that they are created on each instance. • The keyword this, which refers to the current object, lets you work with properties from within the class. The property (object attribute)
  11. 11. Custom  Objects function Person(firstName) { this.firstName = firstName; console.log('Person instantiated'); } var person1 = new Person('Alice'); var person2 = new Person('Bob'); // Show the firstName properties of the objects console.log('person1 is ' + person1.firstName); // logs "person1 is Alice" console.log('person2 is ' + person2.firstName); // logs "person2 is Bob" The property (object attribute)
  12. 12. Custom  Objects • Methods are functions that follow the same logic as properties. Calling a method is similar to accessing a property, but you add () at the end of the method name, possibly with arguments. • To define a method, assign a function to a named property of the class's prototype property. The method
  13. 13. Custom  Objects function Person(firstName) { this.firstName = firstName; } Person.prototype.sayHello = function() { console.log("Hello, I'm " + this.firstName); }; var person1 = new Person("Alice"); var person2 = new Person("Bob"); // call the Person sayHello method. person1.sayHello(); // logs "Hello, I'm Alice" person2.sayHello(); // logs "Hello, I'm Bob" The method
  14. 14. Custom  Objects • Static members (properties/methods) or class members only exist on the class and doesn't exist on child objects. Static members
  15. 15. Custom  Objects function Person(firstName) { this.firstName = firstName; } Person.prototype.sayName = function() { console.log("instance:", this.firstName); }; Person.firstName = "anybody"; Person.sayName = function() { console.log("static:", this.firstName); }; var person1 = new Person("Alice"); person1.sayName(); // logs "instance: Alice" Person.sayName(); // logs "static: anybody" Static members
  16. 16. Custom  Objects • Private members are made by the constructor. Local vars and parameters of the constructor becomes the private members. • A privileged method is able to access the private variables and methods, and is itself accessible to the public methods and the outside. Private and privileged members
  17. 17. Custom  Objects function Person(firstName) { //-- private var _firstName = firstName; function _getMessage() { return "Hello my name is " + _firstName; } //-- privileged this.sayHello = function() { console.log(_getMessage()); } } var person1 = new Person("Alice"); person1. sayHello(); // logs "Hello my name is Alice" Private and privileged members
  18. 18. Inheritance • Inheritance is a way to create a class as a specialized version of another class. • JavaScript only supports single inheritance. • When trying to access a property of an object, the property will not only be sought on the object but on the prototype of the object, the prototype of the prototype, and so on until either a property with a matching name is found or the end of the prototype chain is reached. • When an inherited function is executed, the value of this points to the inheriting object, not to the prototype object where the function is an own property.
  19. 19. Inheritance function Photo(name) { this.name = name || "photo"; } Photo.prototype.upload = function() { console.log("Photo.upload:", this.name); }; ProfilePhoto.prototype = Object.create(Photo.prototype); function ProfilePhoto(name) { Photo.call(this, name || "profile-photo"); } var photo = new Photo(); photo.upload(); // logs "Photo.upload: photo" var profilePhoto = new ProfilePhoto(); profilePhoto.upload(); // logs "Photo.upload: profile-photo"
  20. 20. Inheritance function Photo(name) { this.name = name || "photo"; } Photo.prototype.upload = function() { console.log("Photo.upload:", this.name); }; ProfilePhoto.prototype = Object.create(Photo.prototype); function ProfilePhoto(name) { Photo.call(this, name || "profile-photo"); } //-- method override ProfilePhoto.prototype.upload = function() { console.log("ProfilePhoto.upload:", this.name); }; var photo = new Photo(); photo.upload(); // logs "Photo.upload: photo" var profilePhoto = new ProfilePhoto(); profilePhoto.upload(); // logs "ProfilePhoto.upload: profile-photo"
  21. 21. Encapsulation • Encapsulation includes the idea that the data of an object should not be directly exposed. • Instead, callers that want to achieve a given result are coaxed into proper usage by invoking methods (rather than accessing the data directly).
  22. 22. Encapsulation function Photo(name) { this.name = name || "photo"; } Photo.prototype.setName = function(name) { this.name = name; }; Photo.prototype.getName = function() { return this.name; }; var photo = new Photo(); photo.setName("picture"); // sets photo name to "picture" photo.getName(); // returns "picture"
  23. 23. Encapsulation function Photo(name) { var _name = name || "photo"; Object.defineProperty(this, "name", { get: function() { return _name; }, set: function(name) { _name = name; } }); } var photo = new Photo(); photo.name = "picture"; // sets photo name to "picture" photo.name; // returns “picture”
  24. 24. Accessing  Superclass   Members • One of the big differences between Classical (Object-Oriented) and Prototypal inheritance is that the former has an elegant mechanism for referring to the parent class (usually using the super keyword). It's often used in constructors to initialize the parent class with the supplied input parameters. Another common usage is to extend parent functionality in the child class.
  25. 25. Accessing  Superclass   Members function Photo(name) { var _name = name || "photo"; Object.defineProperty(this, "name", { get: function() { return _name; } }); } Photo.prototype.upload = function() { console.log("Photo.upload:", this.name); };
  26. 26. Accessing  Superclass   Members ProfilePhoto.prototype = Object.create(Photo.prototype); function ProfilePhoto(name) { Photo.call(this, name || "profile-photo"); } //-- method override ProfilePhoto.prototype.upload = function() { Photo.prototype.upload.call(this); console.log(”ProfilePhoto.upload:", this.name); }; var profilePhoto = new ProfilePhoto(); profilePhoto.upload(); // logs "Photo.upload: profile-photo" // logs "ProfilePhoto.upload: profile-photo"
  27. 27. Accessing  Superclass   Members ProfilePhoto.prototype = Object.create(Photo.prototype); function ProfilePhoto(name) { Object.defineProperty(this, "parent", { get: function() { return Photo; } }); this.parent.call(this, name || "profile-photo"); } //-- method override ProfilePhoto.prototype.upload = function() { this.parent.prototype.upload.call(this); console.log(”ProfilePhoto.upload:", this.name); }; var profilePhoto = new ProfilePhoto(); profilePhoto.upload(); // logs "Photo.upload: profile-photo" // logs "ProfilePhoto.upload: profile-photo"
  28. 28. Passing  Constructor   Arguments function Photo(name) { var _name = name || "photo"; Object.defineProperty(this, "name", { get: function() { return _name; } }); } ProfilePhoto.prototype = Object.create(Photo.prototype); function ProfilePhoto() { Photo.apply(this, Array.prototype.slice.call(arguments)); } var profilePhoto = new ProfilePhoto("avatar"); // sets the name to "avatar"
  29. 29. Questions?
  30. 30. Thank  You!

×