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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 |
<!DOCTYPE html> <html lang="en"> <head> <title>Learning JavaScript Object</title> </head> <body> <script> //Sample 01: Create a Car Object var Car1 = new Object(); var Car2 = {}; //Sample 02: Assign Data Member Car1.MaxSpeed = 180; Car1.Owner = "Manish Sharma"; Car1.CurrentSpeed = 0; Car2.MaxSpeed = 210; Car2.Owner = "Abdul Rehman"; Car2.CurrentSpeed = 0; //Sample 03: Print the Object document.writeln("Car 1 Details" + "</br>"); document.writeln("Owner : " + Car1.Owner + "</br>"); document.writeln("@Speed : " + Car1.CurrentSpeed + "</br>"); document.writeln("Speed Max : " + Car1.MaxSpeed + "</br>"); document.writeln("Car 2 Details" + "</br>"); document.writeln("Owner : " + Car2.Owner + "</br>"); document.writeln("@Speed : " + Car2.CurrentSpeed + "</br>"); document.writeln("Speed Max : " + Car2.MaxSpeed + "</br>"); //Sample 04: Add Member Function Car1.PrintDetails = function() { var out = "Owner : " + this.Owner + "<br/>" + "Maximum Speed : " + this.MaxSpeed + "<br/>" + "@ Speed : " + this.CurrentSpeed + "<br/>"; document.writeln(out); } Car1.Accl = function() { this.CurrentSpeed = this.CurrentSpeed + 10; } //Sample 05: Call Member Functions Car1.Accl(); Car1.PrintDetails(); //Sample 06: Create Car3 Object var Car3 = { Owner: "Tommaso Mattia", MaxSpeed: 220, CurrentSpeed : 0, PrintDetails: function() { var out = "Owner : " + this.Owner + "<br/>" + "Maximum Speed : " + this.MaxSpeed + "<br/>" + "@ Speed : " + this.CurrentSpeed + "<br/>"; document.writeln(out); }, Accl: function() { this.CurrentSpeed = this.CurrentSpeed + 10; } }; //Sample 07: Use the Object Car3.Accl(); Car3.PrintDetails(); </script> </body> </html> |
Categories: JavaScript
Tags: function, new, object(), this