1. Technology
Send to a Friend via Email

Learn Javascript

Defining Classes

Join the Discussion

Questions? Comments?

Related Terms

Class Object

Introduction

You can't get fully into writing object oriented Javascript until you start creating classes of your own - yes Javascript allows you to define your own classes. When you define your own class you will determine which properties and methods that your class should have and what the methods do. Once you have the class defined you can then create objects belonging to that class just the same as you have been doing for predefined classes.

Class Definition

The first thing that we need to do in creating a class is to define its constructor. This is a function with the same name as we are giving to the class that will be run whenever we create an object belonging to this class. For example:

function AdBox() {
}

As you can see this looks no different from an ordinary class - so far. What differentiates this from a function is what is coded in it (the definition of the class) and how it is called.

Let's add some properties to our class.

function AdBox() {
this.width = 200;
this.height = 60;
this.text = 'default ad text';
}

Each of the properties that we define here is assigned a default value.

The next step is to define the methods that we want to belong to the class. Here is what our class looks like with a couple of methods added:

function AdBox() {
this.width = 200;
this.height = 60;
this.text = 'default ad text';
this.prototype.move = function() {
// code for move method goes here
}
this.prototype.display = function() {
// code for display method goes here
}
}

You can code your methods without adding the keyword prototype into the definition but if you do then a separate copy of the method code will be created for each object that you derive from the class. Defining a prototype method means that all objects will share the same copy of the code.

Of course the methods within our class can also be set up with arguments so that we can pass parameters into the various methods. In fact the class itself can be set up with arguments (and some additional code to do something with those arguments). When you define an object as belonging to a class that expects arguments the code within the class definition itself (the class constructor) makes use of those arguments to set up the properties of the class.

Generic Object or Class

In the previous tutorial we looked at ways to create generic objects. Now with defining classes we have what appears to be an alternative way to do the same thing.

Well not really. When you create a generic object you have one object that you have defined and can use. When you create a class you don't yet have any objects that you can use. Instead you have a template from which you can create as many similar objects as you need.

If you know for certain that you will need one of something and never more than one then by all means create a generic object. If there is the possibility that you may require a second similar object then you will do better to create a class that you can then use to define as many objects as you need.

Using What You Know

You already know how to define objects of a particular class and defining objects based on the class that you have defined yourself is no different. You would define an object belonging to the AdBox class using the following code:

var myAd = new AdBox();

You also already know how to refer to the properties and methods belonging to your new object.

myAd.width = 250;
myAd.display();

There is nothing in Javascript to stop you from accessing the functions defining your methods from outside of the classes that they belong to (as there is in most other object oriented languages) but there should be no reason to do so and such access certainly wouldn't be object oriented code.

Past Lessons

  1. Introduction
  2. Decision Making
  3. Functions
  4. Maintain and Test
  5. External Script and Noscript
  6. Object Oriented Javascript
  7. Loops
  8. More Predefined Classes
  9. Document Object Model
  10. Event Handlers
  11. More Event Handlers

©2014 About.com. All rights reserved.