JavaScript

Objects can be created in many ways. One way is to create the object and add the fields directly.

<script type="text/javascript">

var myMovie = new Object();

myMovie.title = "Aliens";

myMovie.director = "James Cameron";

document.write("movie: title ""+myMovie.title+""");

<

This produces

movie: title "Aliens"

To create an object write a method with the name of object and invoke the method with "new".

<script type="text/javascript">

function movie(title, director) {

this.title = title;

this.director = director;

}

var aliens = new movie("Aliens","Cameron");

document.write("aliens:"+aliens.toString());

</script>

This produces

aliens:[object Object]

Use an abbreviated format for creating fields using a ":" to separate the name of the field from its value. This is equivalent to the above code using "this.".

<script type="text/javascript">

function movie(title, director) {

title : title;

director : director;

}

var aliens = new movie("Aliens","Cameron");

document.write("aliens:"+aliens.toString());

</script>

This produces

aliens:[object Object]

Now create a custom "toString()" method for our movie object. We can embed the function directly in the object like this.

<script type="text/javascript">

function movie(title, director) {

this.title = title;

this.director = director;

this.toString = function movieToString() {

return("title: "+this.title+" director: "+this.director);

}

}

var narnia = new movie("Narni","Andrew Adamson");

document.write(narnia.toString());

</script>

This produces

title: Narni director: Andrew Adamson

Or we can use a previously defined function and assign it to a variable. Note that the name of the function is not followed by parenthisis, otherwise it would just execute the function and stuff the returned value into the variable.

<script type="text/javascript">

function movieToString() {

return("title: "+this.title+" director: "+this.director);

}

function movie(title, director) {

this.title = title;

this.director = director;

this.toString = movieToString;

}

var aliens = new movie("Aliens","Cameron");

document.write(aliens.toString());

</script>

This produces

title: Aliens director: Cameron

Objects have "prototypes" from which they may inherit fields and functions.

<script type="text/javascript">

function movieToString() {

return("title: "+this.title+" director: "+this.director);

}

function movie(title, director) {

this.title = title;

this.director = director || "unknown"; //if null assign to "unknown"

this.toString = movieToString; //assign function to this method pointer

}

movie.prototype.isComedy = false; //add a field to the movie's prototype

var officeSpace = new movie("OfficeSpace");

var narnia = new movie("Narni","Andrew Adamson");

document.write(narnia.toString());

document.write("

Narnia a comedy? "+narnia.isComedy);

officeSpace.isComedy = true; //override the default just for this object

document.write("

Office Space a comedy? "+officeSpace.isComedy);

</script>

Functions are objects in JavaScript, as we should know well by now, and as objects, functions have methods, including the powerful Apply, Call, and Bind methods.

// Define the original function.

var checkNumericRange = function (value) {

if (typeof value !== 'number')

return false;

else

return value >= this.minimum && value <= this.maximum;

}

// The range object will become the this value in the callback function.

var range = { minimum: 10, maximum: 20 };

// Bind the checkNumericRange function.

var boundCheckNumericRange = checkNumericRange.bind(range);

// Use the new function to check whether 12 is in the numeric range.

var result = boundCheckNumericRange (12);

document.write(result);

// Output: true