OOP
Objectives
Practice
More Info.

What is an Object?

We have been exposed to using both primitive (int, float, boolean, char) and reference (String, Array) type variables. Reference variables are those on which methods can be called. Until now, we have worked with a limited knowledge of reference type variables. Object oriented programming is the process of creating your own reference type variables.

An object is a representation of any real world thing. For example, civil engineers working on simulating traffic flow might need to represent cars and traffic lights. Game designers might need to represent missals and attackers. Cell phone developers often need to reference dates, times and locations (GPS coordinates). Each of these items would be an object. In OOP, programmers create files for each object and then put the files together to make a full program.
Object Design

Objects have two main parts – properties and actions. Properties qualities that an object possesses and actions are things that the object can do. The designer of an object needs to determine what properties and actions the objects of the class will need to perform the necessary jobs. In the case of the car object that the civil engineers need, we might store properties of make, model, year, color, and number of passengers. Meanwhile, each car will need to move forward, backward, stop and turn (both right and left). We often use something called UML (Unified Modeling Language) to display the design of a class. UML is a comprehensive set of rules for designing and modeling, but will only use a subset of this information. In a basic UML diagram, we will need to state the variables with types (properties) and the methods with return types and parameters (actions). So, for our car class, the resulting UML diagram looks as follows:
Car
String color;
String make;
String model;
int year;
int numPassengers;
move(float distance);
turn(float degrees);
stop();

JavaScript Objects

Objects in JavaScript are created using the name/value pairings. A name value pairing sets a property name to its values. Values for strings should be encased in quotes, while boolean and numeric values should not. Similar to CSS, names and values are separated by colons. Subsequent properties are separated by commas. All pairs are enclosed in curly braces to denote the start and end of the object. var today={"month":10, "day":31, "year":2015};
To output information from the created object, use the dot(.) operator. Any property of the object can be accessed by using the objectName(variable).propertyName. So, to output the month of the above date: document.write(today.month);
This process can prove to be tedious if we are creating a large number of objects. In this case, we can create a special method called a constructor. The purpose of a constructor is to give values to all of the variables of an object. A constructor uses the keyword this to refer to the object being created. When creating a constructor method, the name of the method should be the name of the object and it should take parameters for all properties that need to be set. function Date(month, day, year){ this.month=month; this.day=day; this.year=year; }
Constructors are called using the keyword new and are assigned to a variable. When this happens, the varible is created as an object with the properties defined in the constructor and the values that are sent in as parameters. This method of creating an object allows variables to be used as property values if desired. var today = new Date(10, 31, 2015);
The process of outputting an object in a certain format can also be accomplished by creating a function. It would be repetitive to keep having to refer to the properties of the date object individually to output a date in the standard format (mm/dd/yyyy). So, by adding another variable to the constructor, we can define a method that allow us to output the date in the format we want. function Date(month, day, year){ this.month=month; this.day=day; this.year=year; this.toString=show; } function show(){ return this.month+"/"+this.day+"/"+this.year; }
Alternatively, the methods associated with the Date objects can be set up as prototypes. In this manner, the methods are not declared in the constructor, but each instance of the object gains the prototypical methods associated with the object. function Date(month, day, year){ this.month=month; this.day=day; this.year=year; } Date.prototype.toString=function(){ return this.month+"/"+this.day+"/"+this.year; }
This method can then be called from a created object. var today=new Date(10,31,2015); document.write(today.toString());
For organization/reusability purposes, it is best to store your objects in their own .js files and import them into programs as needed. Also, note that any objects created on a page are only valid while that page is loaded. If you desire to use created objects on another page, you would need to send them through a server in some manner.
Objects in Arrays

As in other languages, JavaScript arrays can store objects as well. The objects in an array can be named or anonymous objects and can be accessed by simply iterating over the array structure and using either object property names or method calls.
Inheritance

By prototyping our functions above in the class design, we are setting ourselves up for inheritance. Inheritance is not as simple as in other programming languages. In JavaScript, you have to help the program to inherit the information. For example, if we want to create a birthdate class that inherits information from the date class, we would need to do the following: Birthdate.prototype=new Date(); //sets the Birthdate to be a Date object and copies data members Birthdate.prototype.constructor=Birthdate; //sets the Birthdate constructor to call Birthdate as opposed to Date function Birthdate(){ Date.prototype.constructor.call(this,9,17,1972); //super call to the Date Constructor with necessary information this.name="Mickey"; //adds a name variable to the Birthdate class } Birthdate.prototype = Object.create(Date.prototype); //copies the prototyped actions associated with Date into Birthdate Birthdate.prototype.toString=function(){ //overrides the Date toString method Date.prototype.toString.call(this); //super call to Date.toString() document.write(" "+this.name); //adds on name variable }