java

java

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.

c++

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, tom@aol.com” and “Mustafa Qureshi, 65, qureshi@cyber.net.pk” 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.

Leave a Reply

Your email address will not be published.