Sufficient free memory is located in which to create the new object. The new operator returns a reference to the location in memory where the new object has been created. In the first of the three examples above (new Object();), no variable is assigned the result of the object creation, therefore there is no way for the JavaScript programmer to refer to this object later in the programme. In almost all cases, a variable will be assigned the reference to the location of the newly created object.

In the second example above the reference variable accountNumbers is assigned the reference to the location of the newly created Array object.

Although the following way of creating String objects is perfectly acceptable JavaScript:

        var firstName = new String( "Jose" );
 

it is usually much more convenient to used the special syntax provided for creating String literal objects. The same result could be achieved with the following statement:

        var firstName = "Jose";
 

String objects can be created in two different ways because the creation of String objects is such a common feature of programming that the developers of the JavaScript language provided this second, simpler syntax especially for Strings.

Just as the creation of Strings is so common the JavaScript developers provided a special syntax, the same has been done for make the creation of Function objects easier. As you will know from earlier units a function object can be created in the following way:

        function myFunction( arg1,arg2, -, argN )

        {
        //function statements go here
        }
 

Functions are themselves objects (of the type Function), and can be created in the same way as objects using the Function constructor:

        var myFunction = new Function( arg1, arg2, -, argN, "//function statements go here");
	

In most cases the former way of creating Function objects is more straightforward.

Variables (data) that "belong" to objects are called properties. In earlier units you have seen examples of properties, such as an array's length property:

        var myArray = new Array( 5 );

        alert( "length of array is: " + myArray.length );
 

In the example above the length property of the myArray object is accessed by the dot notation:

        myArray.length
 

Methods are object properties containing functions. In earlier units you have seen examples of methods, for example the reverse method of an array:

        var myArray = new Array( 3 );

        myArray[0] = 11;
        myArray[1] = 22;
        myArray[2] = 33;

        alert( myArray.reverse() );
	

In the example above the reverse() method of the myArray object is invoked by the dot notation:

        myArray.reverse()
	

As can be seen, the only difference from (data) properties is when methods are invoked with the use of the () (parentheses) operator — this is a special operator expecting a variable holding a Function object to the left, and optional operands (the function arguments) between the parentheses.

It is important to realise that methods are properties, but ones which can also be invoked since they are properties that hold Function objects.

What is sometimes known as dot notation is used to indicate which properties an object owns. Ownership of properties can exist to any number of levels deep, and the dot notation can be used at every level. fine.

The use of the full stop (dot) can be thought of as meaning "the thing on the right belongs to the object (named collection) on the left". The general form for properties and methods to be invoked is as follows:

    <object>.<property>
    <object>.<method>()
	

Common examples include:

    var myArray = new Array( 3 ) ;
    myArray.length;

    var catpic = new Image();
    catpic.src = "images/cartoons/sillycat1.gif";
	

In each of the above examples, the dot syntax is used to refer to a named piece of data (property) of an object. So we can refer to the length property belonging to the Array object myArray, and the src property of the Image object catpic.

We can see extensive use of the dot notation in the line:

    document.forms[0].age.value;
	

This line refers to the value property of the age property (itself an object) of the form object at index 0 of the forms[] array object of the document object. Code using such a reference to the value of a form's text input box is as follows:

        <script> <!--

        function showAge()

        {
        var newAge = document.forms[0].age.value;
        alert("Age is: " + newAge );
        }
        // --> </script>

        <form>
        Enter age:
        <INPUT TYPE="text" NAME="age" SIZE=10>
        <INPUT TYPE="button" NAME="button1" 
           VALUE="click me" SIZE=10 onClick="showAge()">

        </form>
 

The browser output is:

When a JavaScript programme is being executed. a special object, called the 'global' object, is created. The global object exists until the programme terminates. All variables of a JavaScript programme are properties of this global object.

In the same way that all variables of a JavaScript programme are in fact properties of the global object, likewise all the functions of a JavaScript programme are methods of the global object.

Since methods are just properties that hold Function objects, functions, being methods of the global object, are also stored in properties of the global object.

When the JavaScript interpreter starts up, there is always a single global object instance created. All other objects are properties of this object. Also, all variables and functions are properties of this global object.

For client-side JavaScript, this object is the instance window of the constructor Window.

When an HTML document is loaded into a browser, a single Window object instance, named window, is created. All other objects are properties of this window object.

Since everything is a property of the window object, there is a relaxation of the dot notation when referring to properties. Thus each reference to a variable, function or object is not required to start with "window." — although this would be a more "accurate" notation to use, it is far less convenient.

Thus instead of writing:

    document.write( "Hello" );

We could write:

    window.document.write( "Hello" );

and so on.

One of the properties of the window object is the status property. This property is a String value that is displayed in the browser window's status bar. You can change the status bar with, or without, an explicit reference to the window object. Both these lines have the same effect:

    window.status = "this is a test";
    status = "this is a test";
	

When an HTML document is loaded into a frame of a browser window, a Document object instance — named document — is created for that frame. This document object, like most objects, has a collection of properties and methods. Perhaps the most frequently used method of the document object is the write() method:

    document.write( "sorry, that item is out of stock<p>" );
	

One useful property of the document object is the forms property. This is actually an array of Form objects with an element for each form defined in the document. So we could refer to the first form defined in the document as follows:

    document.forms[0]

When a function (or method) is executed, a temporary object is created that exists for as long as the function is executing. This object is called the call object, and the arguments and local variables and functions are properties of this object.

It is through use of this call object that functions/methods are able to use local argument and variable/function names that are the same as global variables/functions, without confusion. The call object is JavaScript's implementation of the concepts of variable/function scoping — i.e. determining which piece of memory is referred to by the name of a variable or function, when there are global and local properties with the same name.

Strings are objects. A frequently used property of String is length. String includes methods to return a new String containing the same text but in upper or lower case. So we could create an upper case version of the String "hello" as follows:

        var name = "hello";
        alert( name.toUpperCase() );
	

It should be noted that none methods belonging to string objects never change the string's value, but they may return a new String object, such as in the example above.

Since Arrays are rather an important topic in the own right, Array objects are given their own section at the end of this unit — although you may wish to skip ahead to read that section now to help your understanding of object with this more familiar example.

You should refer back to the earlier unit on functions.

As previously stated, functions are of the type Function, and can be treated as data variables or properties, or they can be treated as sub-programmes and executed using the () operator.

The Math object provides a number of useful methods and properties for mathematical processing.

For example, Math provides the following property:

Math.PI

that is useful for many geometric calculations.

An example of some other methods provided by the Math object include:

    Math.abs();
    Math.round();
    Math.max( n1, n2 );
	

These may be used in the following way:

    document.write( "<p>PI is " + Math.PI );

    document.write( "<p>The signless magnitudes of the numbers -17 and 7 are "
         + Math.abs( -17 ) + " and " + Math.abs( 7 ) );

    document.write( "<p>The interger part of 4.25 is " + Math.round( 4.25) );

    document.write( "<p>The larger of 17 and 19 is " + Math.max(17, 19) );
	

Objects are created with the new operator and a constructor function. The new operator requires the name of a function to its right (with optional arguments), and will return a reference to the memory location of the newly created object.

Examples of creating objects include:

    var myArray1 = new Array( 3 );
    var myArray2 = new Array();
    var fistName = new String( "Jonathan" );
    var catPicture = new Image();
 

If we assume we have a defined a Triangle constructor, we can create new objects in just the same way as above:

    var triangle1 = new Triangle( 5, 10 );
    var triangle2 = new Triangle( 10, 20 );
    var triArray = new Array( 3 );

    triArray[0] = new Triangle( 17, 92 );
 

A constructor function creates a new object, possibly initialising some of these new objects properties based on arguments provided when the function was called. We can see from the above that the Array() constructor function can create an array if provided with no arguments, or a numeric argument (for the size of the array), or a number of arguments (for the initial elements of the array).

Our Triangle constructor requires two arguments — the first is the width of the new triangle, the second is the height. Our Triangle constructor function looks as follows:

        function Triangle( newWidth, newHeight )

        {
        this.width = newWidth;
        this.height = newHeight;
        }
 

Constructor functions make use of the special variable this — when a function is called with the new operator, a new object is created in memory, which the this variable refers to. Using this variable, the constructor is able to assign values to new properties called width and height. When a constructor function finishes, the reference to the newly created object is returned.

So after the following line is executed:

        var triangle1 = new Triangle( 5, 10 );
	

the object triangle1 should have a width property with value 5 and a height property with value 10.

This can be investigated by using the dot notation and some document.write() statements:

        document.write("<p> width is : " + triangle1.width );
        document.write("<p> height is : " + triangle1.height );
 

resulting the following browser output:

We can imagine memory to be arranged something like the following (remember that all object variables are reference variables):

Now we have a constructor function, Triangle, we can use this function object as an object that defines Triangles.

A constructor function object has a has a special property named 'prototype' — this is an object through which inheritance is implemented for all objects created from the constructor: every object created from the constructor can inherit the properties and methods of the prototype object.

For example, by creating a new property or method for the prototype, this property or method is made available to all objects created from the constructor. Prototypes are a very useful way of defining methods for objects, and for setting default object properties.

For example, let us imagine that we wish all our Triangle objects to have the property colour initially set to the String "blue". To provide this property to all Triangle objects created in the future, we can assign the property to the Triangle prototype as follows:

        Triangle.prototype.colour = "blue";
 

Likewise, if we wish to make a method available to all Triangle objects, we need to assign a function to an appropriate property of the prototype. As useful method for Triangle objects is the calculation of their area. A function to calculate the area of a triangle could be defined as follows:

        function triangleArea()
        {

        // triangle height is half (width * height)
        var area = 0.5 * this.height * this.width;

        // return calculation to 2 decimal places
        return Math.round( area * 100) / 100;
        }
 

Notice how this function has been written to refer to whatever object it is called from by using the variable this.

We now need to assign this function to a property of the Triangle prototype. The method name area seems a good choice:

        Triangle.prototype.area = triangleArea;
 

Notice, we are not executing this function, so we do not use the () operator. We are making Triangle.area refer to the same Function object as triangleArea.

After adding the above lines to a script, we can now see if a newly created Triangle object has a colour property and can use its area method:

        var triangle1 = new Triangle( 5, 10 );

        document.write("<p> colour property is: " + triangle1.colour);

        document.write("<p> area method returns: "+ triangle1.area() );
	

Remember, to invoke a function/method we must follow the function name with the () operator as above.

The previous section on the prototype property illustrates precisely what is meant by instance properties (properties) and instance methods:

In fact, since a method is just a special kind of property, instance variables and instance methods can all be considered to be implemented as instance properties of the prototype.

You may find it useful to clearly comment the implementation of instance properties and methods in your code, such as the following lines illustrate:

        //////////////////////////////////////////////
        // instance (object) methods
        //////////////////////////////////////////////

        function triangleArea()
        {

        // triangle height is half (width * height)
        var area = 0.5 * this.height * this.width;

        // return calculation to 2 decimal places
        return Math.round( area * 100) / 100;
        }

        // add instance method "area" to the "prototype" property of  "Triangle"
        // (i.e. add this method to the "prototype" property of the "Triangle" constructor function object)

        Triangle.prototype.area = triangleArea;

        //////////////////////////////////////////////
        // instance (object) variables (properties)
        //////////////////////////////////////////////
        // the default colour for triangles is "blue"

        Triangle.prototype.colour = "blue";
 

A "class properties" can be implemented by assigning a value to a property of the constructor object. This has been done for values such as Math.PI.

For example, we can implement the class property numSides with a value of 3 to the Triangle constructor as follows:

        //////////////////////////////////////////////
        // class properties
        //////////////////////////////////////////////
        // add property "numSides" 

        Triangle.numSides = 3;
	

At any later point in the code we can then refer to this class property using the dot notation. For example:

    document.write( "the number of sides of a triangle is: " + Triangle.numSides );
 

Class properties can be referred to even if no instances have been constructed (since the property belongs to the constructor, and not to the prototype).

A class method, such as Math.abs(), is implemented in the same way as a class property — a function is assigned to a property of the constructor function.

For example, we can we can implement a Triangle class method called larger(). This method requires two arguments, each a Triangle object, and returns the String "first" if the first Triangle is the larger, otherwise the method returns "second" (i.e. if the second is the same or larger it returns "second"). First we must create a function:

        function triangleLarger(t1, t2)
        {

        if( t1.area > t2.area )
        return "first";
        else
        return "second";

        }
	

t1 and t2 are the two Triangle object references passed as arguments. This function makes use of the area instance method for each of the two Triangle objects — the larger triangle is defined to be the one with the larger area.

Then we must assign this function to an appropriately named property of the constructor object:

        // add function to constructor (i.e. add to constructor function object)

        Triangle.larger = triangleLarger;
	

Notice, we are not executing this function, so we do not use the () operator. We are making Triangle.larger refer to the same Function object as triangleLarger.

The method can the be used as follows:

        var triangle1 = new Triangle(10, 20);
        var triangle2 = new Triangle(5, 10);

        document.write("<p><b>the larger of triangles 'triangle1' and 'triangle2' is the </b>");
        document.write( Triangle.larger( triangle1, triangle2 ) );
 

The browser output for the above code is as follows:

In the previous sections we have investigated the JavaScript features of prototypes and object inheritance. However, any object can override an inherited property or method by defining its own.

In our Triangle example, we have created a prototype colour property with a value of the String "blue". This means that, by default, all our Triangle objects will inherit this property and value. However, let us consider that while for most objects the colour blue is fine, for the object triangleR we may wish to have a colour property with value "red". The programming of this situation is very straightforward:

        var t1 = new Triangle( 10, 20 );
        var triangleR = new Triangle( 6, 6 );
        triangleR.colour = "red";
	

After execution of the above lines, part of the memory will look as follows:

When JavaScript comes across code referring to the colour property of object triangleR:

        document.write( "colour of triangleR is " + triangleR.colour );
	

it will follow the reference for triangleR to location 001741 and search for a property colour. It will succeed at location 001743. The value of this property will be returned, and this value, "red", will be passed to the document.write() method. Since the property value was found at the object referred to by traingleR, no search is made of the Triangle object prototype. In this way, object triangleR has been said to have overridden the inherited colour property with its own value of "red".

It is important to notice that although the object referred to by triangleR has overridden its inherited colour property, there has been no change to any of the other Triangle objects. So, for example, object t1 still inherits the colour property of Triangle.prototype.

A final concept to appreciate regarding prototype based inheritance in JavaScript is that the inheritance of prototype properties and methods is dynamic: if an object is created and the prototype is subsequently changed, the changes will be reflected in the state and behaviour of any object inheriting from it.

We shall illustrate this dynamic inheritance with the following code:

        var myTriangle = new Triangle( 6, 8 );
        var triangle2 = new Triangle( 11, 22 );

        document.write("<p> colour of myTriangle is " + myTriangle.colour );
        document.write("<p> colour of triangle2 is " + triangle2.colour );

        Triangle.prototype.colour = "green";

        document.write("<p> colour of myTriangle is " + myTriangle.colour );
        document.write("<p> colour of triangle2 is " + triangle2.colour );
 

The browser output from this code is:

After the execution of the first two lines:

        var myTriangle = new Triangle( 6, 8 );
        var triangle2 = new Triangle( 11, 22 );
 

part of the memory will look as follows:

So when the first two documemt.write( ) statements are executed:

        document.write("<p> colour of myTriangle is " + myTriangle.colour );
        document.write("<p> colour of triangle2 is " + triangle2.colour );
	

JavaScript retrieves the inherited colour "blue" for each object.

However, after execution of the line that changes the prototype property:

        Triangle.prototype.colour = "green";
	

memory is changed to look as follows:

Thus when the last two documemt.write() statements are executed, the reference is followed to the colour value at location 001734 "green", and it is this changed property value that is inherited by both the Triangle objects.

It is important to understand, then, that changing a prototype dynamically changes the inherited properties and methods for all objects sharing the prototype from that point onwards, and should not be an action used lightly, or when some simpler solution is possible.