You may be knowing that
JavaScript is an object based language, but not object oriented. What does this mean? If you know any object oriented programming language – Java, C++ or Smalltalk, for example – then you might be knowing that
inheritance is an important concept in object oriented programming. This feature is missing in JavaScript. That’s why its said to be object based and not object oriented. Even if you don’t know object oriented programming, you have surely used
objects like
document,
window and
form in JavaScript.
Does this mean that you can create your own objects in JavaScript? Absolutely right! JavaScript gives you the power to define your own custom objects to handle complex tasks. In this article, we will explore the basics of object creation, constructors and syntax for defining properties. Advanced topics like defining methods of an object and modifying existing objects will be covered in some later article.
Defining Your Own Objects
To define your objects, you need a
constructor. The concept is similar to other object oriented languages and the syntax is similar to C++ and Java. The following code segment creates an object named
GameCharacter to store information regarding a hypothetical game called
Galee Ke Padhay Baz. Please bear with me – the name is in my native language, Urdu.
Lets suppose we want to have properties that hold values for the game characters’ name, strength and fighting style. The constructor is as follows:
function GameCharacter (myName, myStrength, myStyle)
{
this.name = myName;
this.strength = myStrength;
this.style = myStyle;
}
I can hear you mumber: “
I can understand most of it, but what is this this thing?” Don’t worry, I am explaining it. But first some other important things.
Constructors Explained
First of all, note that
the name of the function is the same as the name of the object we want to define. This is always the case for a constructor. If you want to define an object called Card then your constructor should be defined like
function Card (…).
Next, observe that the constructor is being passed three parameters. These parameters will be containing the starting values when an object is
created. There is a major difference between the terms: created and defined. By
definition, I mean the structure / methods of the class of objects. And by
creation I mean a specific object. An example will help here. Consider the class of
Person. Its definition will include things like his / her name, age, email, etc. Every instance of
Person will share this structure. But the information contained in these properties will be different for different instances of
Person. Once an object is defined we can create several instances of it. For example, “
Tom Cruise, 30, [email protected]” and “
Mustafa Qureshi, 65, [email protected]” are two instances of the
Person object.
Having said all this, we can creaet several game characters like this:
aCharacter = new GameCharacter ("Hiloo Bhai", 70, "Free Style");
anotherCharacter = new GameCharacter ("Farhat Saleem", 65, "Martial Arts");
If you now take a look at the constructor defined in the last section, you will understand the way parameters assign starting values to the object.
Something About “this”
Coming to the
this part. Take a look at the GameCharacter constructor once again. The values passed to the constructor are received in variables
myName,
myStrength and
myStyle. Thus for
new GameCharacter (“Hiloo Bhai”, 65, “Free Style”) the values of these variables are “Hiloo Bhai”, “65” and “Free Style” respectively. But these my… variables are temporary or local. They will not retain their values once the function exits. To make these values as the permanent properties of aCharacter, we have used the
this pointer.
JavaScript doesn’t first declare properties and then assign them values. Its unlike C++ and Java. Using
this, we both create properties and assing them values at the same time. Thus, the three statements starting with
this create three properties of the object and assign them the values passed from the
new GameCharacter (…) statement.
Joining The Pieces
Lets try a simple working example that puts all the pieces together. The following code defines an object GameCharacter; creates two instances of it and writes them to the page with
document.write().
<html>
<head>
script language="JavaScript">
<!--
function GameCharacter (myName, myStrength, myStyle)
{
this.name=myName;
this.strength=myStrength;
this.style=myStyle;
}
function show (character)
{
document.write("Name:"+character.name+"<br>");
document.write("Strength:"+character.strength+"<br>");
document.write("Fighting Style:"+character.style+"<br>");
document.write("<hr>");
}
hiloo=new GameCharacter("Hiloo Bhai", 70, "Free Stayle");
fs=new GameCharacter("Farhat Saleem", 65, "Martial Arts");
function start ()
{
show(hiloo);
show(fs);
}
//-->
</script>
</head>
<body onLoad="start()">
</body>
</html>
The following important concepts were covered in this article:
- The definition of an object is the specification of its properties and methods.
- The creation of an object means making a new instance of an already defined object (also called class). This instance will have its own unique identy.
- We create instances of objects with the new statement.
- A constructor is a function that has the same name as that of the object. Its automatically called when new statement is executed.
- A constructor usually assings values to the properties of the object.
Note: The names and email addresses used in this document are completely hypothetical and any resemblence is purely coincidental.