Learn to program with JavaScript (in HTML5)

JavaScript is an Object-Oriented (OO) language but it has a funny way of showing it. In other OO languages we would write a recipe for making objects. The recipe would be called a class.

In JavaScript class is a reserved word, so you cannot use it as an identifier, but it is not a keyword. You do not write a class. [But see note at foot of page.]

Instead objects can be created by example.

Consider this snippet of code:

  var pt = new Object ();
  pt.x = 2;
  pt.y = 3;

On the first line we declare a variable called pt. We create it as an object by using new (a keyword) and then calling what looks like a function, Object(). It is in fact a special kind of function called a "constructor". It does what it says and constructs something with the fundamental type, Object.

Then we make up something called pt.x and assign a numerical value to that. Doing this means that pt has a variable within it called x. Such a variable attached to an object is called a "property" of the object. Notice that we do NOT use var when creating a property.

We then add another property, called y. The object can now be considered to represent a 2-dimensional geometrical point with Cartesian coordinates x and y. Equally well it could be interpreted as anything else that could have two numerical properties, but we should use names that suggest the kind of object and properties we intend, as we have done in this example.

So generally in JavaScript objects are named unordered collections of properties (ie, data items). And you have just seen how to create an object.

It was stated early in this part of the course that one of the basic data types is Function. So functions can be properties of objects! Then they are called "methods".

Methods represent the behaviour of objects, while other properties represent state. Remember the bouncing balls on the very first page of this course? They are objects with state (position, velocity, colour) and behaviour (how to move, how to draw themselves, how to collide with other objects).

Object Oriented Design

OO Design is about identifying which things in an application are usefully treated as objects, what properties define their state and what methods would represent their behaviour. It results in very useful encapsulation which enables large programs to be developed with good structure. Very often the objects correspond directly to obvious real-world objects, as in the bouncing balls example.

If the encapsulation is really to be useful it is important that objects should be entirely responsible for changing their own state and all the code for their behaviour should be in their own methods, not in other code elsewhere. (In other programming languages it is possible, more or less, to enforce this. For example, properties can be made private so that nothing external can alter them. In JavaScript it is left up to the programmer's determination.)

Constructors

To pursue OO structure in JavaScript we designate certain functions as "constructors" of objects, of types we can name for ourselves (not just Object). The convention is to make a name for the class of all similar objects, starting with a capital letter. So in the case of our simple example of a 2D point we would create an object of type Point by using the new operator on a constructor we will write:

  var pt = new Point (2, 3);

Then it is quite clear that our variable has the the data type (class, if you like) called Point. The constructor may or may not need any parameters but for our example it would be declared like this:

  function Point (x, y)
  {
    this.x = x;
    this.y = y;
  }

Note that this is yet another keyword and it is a way of referring to the current object: the one being constructed or, in a method, the one whose behaviour we are defining. Notice that this.x is not the same thing as the parameter x. Notice also that the constructor is just a regular function. The only clues that it is meant to be a constructor are the capital letter at the start of its name (but that is only a convention) and the occurence of this inside it (but that may not be necessary either in some cases).

Object literals

There is yet another way to create an object, using an "object initialiser" (also known as an "object literal"):

  var pt = { x:20, y:30 }; // No constructor needed

Sometimes that is a handy quick way of doing it, especially if the object requires no methods (so it is merely a data record).

Initialisers may be nested:

  var rectangle = { topLeft: {x:0, y:0}, 
                    bottomRight: {x:200, y:100}};

That example constructs an object of type Object having 4 properties:

  rectangle.topLeft.x
  rectangle.topLeft.y
  rectangle.bottomRight.x
  rectangle.bottomRight.y

Note that object initialisers have curly braces. We will soon meet something very similar that uses square brackets.

Copyright ©grelf.net, UK, 2011 - 2021 | This web site does not use cookies or collect any data