1. Introduction to JavaScript Custom Objects

In our past JavaScript examples, we used the built-in objects. Now, we will create our own Custom Object. Let us say we want to store related information about the Car; like color, number of tires and seating capacity. We can create three separate variables to denote these information. But it becomes hard when we want to represent more than one car and maintaining these variables. Also, if you want to provide functionalities like start a car, stop a car and speed up, you should use correct variables that belong to a specific car. We can solve all these problems when we group variables and functions in a single unit. Alright! Welcome to Class and Objects.

2. Creating Custom Object with Data Member

In JavaScript, we can create the Object on the fly and use it when needed. In the below example, we create two JavaScript objects, assign data members, and use them later.

1) In JavaScript, we can create an object using the new keyword followed by object(). In our case, we created an object and stored that in a variable Car1.
2) We can also create object using the pair of curly braces {}. This way, we created our second object and stored that in a variable Car2. Note, both the objects are empty, and they don’t have any members in it.
3) We can create a member using the dot notation. Here, we created three data members: MaxSpeed, Owner, CurrentSpeed. We also assigned a value while creating them.
4) Here, we created the member variables for the second car object.
5) Now we have two objects with data members populated with the values. The dot operator also fetches the value from the object. In the example above, Car1.Owner reads the data member Owner from the JavaScript object Car1. The same way, Car2.MaxSpeed will read the data member MaxSpeed from the object Car2. In the this code snippet, we read all the data members from both the car objects and displayed it in the browser window.
6) Shows the browser output.

3. Add Member Functions to JavaScript Object

The below example shows adding member function to a JavaScript custom object. Here, we add two member methods to the Car1 object:

1) Here, we assigned a function to a variable PrintDetails which will be a member of Car1. The keyword function with empty parenthesis tells that the function does not take any parameter. Also, there is no name for the function, and we call it as Anonymous Function. We must assign an Anonymous Function to a variable and later we can call the function with that variable name. In our case, the variable name is PrintDetails.
2) Inside the function body, we access the data member of the object to form a string and assign it to a variable out. The function displays the out variable to browser window. Note, the keyword ‘ this’ represents the current object in which the Method Call in happening.
3) Here, we create one more member function called Accl. Each call will increment the CurrentSpeed data member by 10.
4) Now, we have two member methods defined for the object Car1. We can call the method using the dot operator and in our case we called the Accl method and then called the PrintDetails method. The first call increases the current speed to 10 and the next call prints the details for Car1 object.
5) Shows the output.

4. Create JavaScript Object – Alternate Approach

In the previous section, we created a custom object and then added the members one by one. It is also possible to have all the members together and create the instance of the object. Below is the example:

1) Here, we create the JavaScript object variable Car3.
2) We added three data members. Data Member name is on the left side of the Colon and right side of the colon holds the value for the data member. For example, MaxSpeed is the name of the data member and 220 is the value it holds.
3) The same way, we use the colon and assign a function. Left side of the colon holds member function name and right side of the colon provides function definition. In our case, we added two member functions, Accl and PrintDetails. Note, both the member functions are accessing the data members defined in step 2. Also note that all the data members are packed in an object, and it’s referenced by the JavaScript variable Car3.
4) Here, the JavaScript is calling both the member functions. First, we speed up the Car3 object and then print the details of the object.
5) Shows the output of the code.

5. Code Reference

• MultiView Control & Views – ASP Lab 014
• Wizard & WizardStep – ASP Lab 015 

Categories: JavaScript

Tags: function, new, object(), this

This site uses Akismet to reduce spam. Learn how your comment data is processed.