Advanced DOM scripting Dynamic Web Design Techniques Chapter 2 CREATING YOUR OWN Reusable OBJECTS

JavaScript is all about objects. Objects is the foundation of everything, so if you're unfamiliar with Objects, you ' re going to learn quickly. The goal of this book are not to being a JavaScript or DOM code reference, but in order to make sure you understand a lot of T He examples and ideas I ' ll be presenting, we'll spend a little time discussing objects. A strong understanding of how objects work, specifically in JavaScript, and how fundamental they is would also go a long w Ay in allowing you to create generic,reusable code this saves you time and money.

I need to introduce from a few key things to remember when working with objects:
What objects is and how they ' re constructed
The difference between static, public, private, and privileged members
What is this refers to
A bit more about the scope chain
A bit About Object context

At the end of this chapter, we'll build a custom debugging log object to put all that good use and show how proper defi Nition of creates a clean, public application Programming Interface (API) for your objects.

What's in an object?

You ' ve already used objects even though it is not know. An object, in simplistic terms, was an instance of a contained set of variables, known as properties, combined with Functio NS, known as methods. Objects is usually based on a description called as a class this defines what properties and methods the object would have . Your script can considered object oriented (OO), as it is constructed using the interaction of various objects. In particular, JavaScript was a prototype-style OO language where there is no classes, and everything was based on a copy O F an existing object.  Everything from a function to a string was actually an object, and that's what the makes JavaScript powerful and frustrating at The same time. Most objects can is grouped into and types:

function objects, such as the alert () function, allow you to use arguments to alter the functionality of the object:
Alert (' argument ');

Object objects, such as the obj represented in the following snippet, can ' t is called like functions and has a fixed func Tionality unless they contain additional Function objects, which
You'll see in the "Understanding Object" section:
var obj = new Object ();
obj (' argument '); Would error as obj is not a Function

Function objects can also is divided into and subgroups:
Function instances, such as alert (), is invoked using arguments.
Functions that is constructors must is instantiated with the new operator.

Also comes with several built-in objects such as the following:
object is the generic base object you can use to create simple static objects.
Function is the object, cloned by all objects, use arguments, and is the object you create when defining all the Functio NS in your scripts.
Array is a special grouping of properties and methods, such as length, which give you iterative access to the object and Al Low-you-access the properties using square bracket notation.
String, Boolean, and number is the objects representing all your string, Boolean, and number values respectively.
Math, Date, RegExp, and several others are included; Each have its own a unique uses, but we won ' t get to them all here.

All these built-in objects is instantiated with the new keyword or some other special syntax, such as the function keywor D for the Function object, curly brace short form ({}) for object, and Bracket short form ([]) for Array. What's important is so each of the these objects provides a set of properties and methods so allow you to manipulate the O Bject in a different, depending on the object's intended use.

We ll discuss the new operator and instantiation when you create your own object later in the chapter.

Inheritance

Object inheritance is a important part of object-oriented programming. When creating your own objects, you can extend or inherit properties and methods from existing objects. This inheritance provides a convenient from reuse the functionality of existing objects, so you can is free to focus on The new and improved code.

Unlike traditional class-based object-oriented languages, there is no underlying class structure to extend one class from another. In JavaScript, inheritance are simply done by copying
The methods from one object prototype to another, and the resulting concept is the same:

//Create A Person object instancevarperson ={};p erson.getname=function() { ... }; Person.getage=function() { ... };//Create An Employee object instancevarEmployee ={};employee.gettitle=function() { ... }; Employee.getsalary=function() { ... };//Inherit methods from personEmployee.getname =Person.getname;employee.getage= Person.getage;

Each higher object inherits all of the properties and methods of the lower objects, as shown in Figure 2-1.

For more on the specifics of inheritance and some fancy methods so allow you to achieve a close approximation to the CLA Ssical method, I suggest you check out Douglas Crockford's explanation of "classical inheritance in JavaScript" at HTTP// Www.crockford.com/javascript/inheritance.html.

Understanding Object Members

You ' re already familiar with plain old functions such as alert (). Functions is just the simple reusable containers this allow you to avoid redundancy in your code. Likewise, you ' re-already familiar with objects, properties, and methods, and if you are not know it. When you use something like the Body property of a document:

Document.body

or the getElementById () method of a document:

document.getElementById (' example ');

You ' re accessing a member of the Document object. Properties and methods is collectively referred to as the "object", because they belong to that parent objec T, in the case document. The body member is a property, because it simply references a single value, whereas the getElementById () member is a metho D, because it accepts arguments and can manipulate the internal state of the object.

Properties themselves is really just instances of the object object or another object that extends from Object, such as String or number. Likewise, methods also extend from the object object, but because they accept arguments, they ' re instances of the Function object, so they can also return a value.

You can see the type of object for both body and getElementById by trying the following in the Load event in the test docu ment in chapter2/types/types.html:

function () {alert (' document.body is a: ' + document.body);});

Advanced DOM scripting Dynamic Web Design Techniques Chapter 2 CREATING YOUR OWN Reusable OBJECTS