Creating custom objects is standard practice when working with information in custom appli-cations. Because JavaScript is an oriented language, you should apply proper object-oriented practices when developing JavaScript applications. In almost all cases, this involves creating custom objects to encapsulate functionality within logical entities.
For example, the following code creates a book object. This is a dynamic object, meaning that it’s created inline with a variable declaration.
var book = {
The object created represents a book. It provides a way to encapsulate into a single ob-ject the properties that apply to a book—in this case, a book entity. The code specifies five properties. When using the book variable, you can access all the properties just as with any other property; if desired, you could output to the screen by placing the values into the DOM.
The properties of an object represent its state, whereas the methods of an object provide its behavior. At this point, the book object has only properties. To give the book object some behavior, you can add the following code:
var book = { flipTo: function flipToAPage(pNum) { this.currentPage = pNum;
},
turnPageForward: function turnForward() { this.flipTo(this.currentPage++);
},
turnPageBackward: function turnBackward() { this.flipTo(this.currentPage--);
} }
In the book object, three methods have been added: turnPageForward, turnPageBackward, and flipTo. Each method provides some functionality to the book object, letting a reader move
ptg14200515 through the pages. The interesting parts of this code are the function declarations
them-selves. For example, when you look at the code for the flipTo function, you might think that the function is called FlipToAPage because that’s what was declared. However, this isn’t the case. The methods are called using the alias property that assigned the function. When using the code, the runtime knows that it’s a method, not a property, and it expects the method to be called with parentheses:
//This line throws an exception because the object does not support this method book.FlipToAPage(15);
//This line works because this is what the method has been named.
book.flipTo(15);
Creating objects inline as the book object is in the previous code sample is useful only when it is used in the page where it’s defined, and perhaps only a few times. However, if you plan to use an object often, consider creating a prototype for it so that you can construct one whenever you need it. A prototype provides a definition of the object so that you can construct the object using the new keyword. When an object can be constructed, such as with the new keyword, the constructor can take parameters to initialize the state of the object, and the object itself can internally take extra steps as needed to initialize itself. The following code creates a prototype for the book object:
function Book() {
this.ISBN = "55555555";
this.Length = 560;
this.genre= "programming";
this.covering = "soft";
this.author = "John Doe";
this.currentPage = 5,
this.flipTo = function FlipToAPage(pNum) { this.currentPage = pNum;
},
this.turnPageForward = function turnForward() { this.flipTo(this.currentPage++);
},
this.turnPageBackward = function turnBackward() { this.flipTo(this.currentPage--);
} }
var books = new Array(new Book(), new Book(), new Book());
books[0].Length
…
EXAM TIP
JavaScript consists of objects. Everything in JavaScript is an object. Each object is based on a prototype. Whenever you create a new instance of an object, that instance is based on the object’s prototype.
ptg14200515 In the preceding code, the Book object is constructed so that you can create one with
default properties set. Then, the code creates an Array containing a list of books. You can access each element of the array to initialize each Book object as it’s needed.
Accessing each Book element to provide initialization values isn’t terribly efficient. It would be more convenient if the Book object supported more than one constructor. That way, you could create a blank book or create one with specific unique properties. This is where proto-typing comes in handy. The following code creates a prototype containing two constructors that support the needs of any users of the Book object:
function Book() {
//just creates an empty book.
}
function Book(title, length, author) {
turnPageForward: function turnForward() { this.flipTo(this.currentPage++);
},
turnPageBackward: function turnBackward() { this.flipTo(this.currentPage--);
} };
var books = new Array(new Book(), new Book("First Edition",350,"Random"));
With this new code, you can create an empty Book object by using the constructor with no parameters, or you can create a Book object by using specific parameters to initialize some fields.
ptg14200515 Objects can contain other objects as needed. In this example, the Author property could
easily be factored into a new prototype, making it more extensible and encapsulating the information related to an author. Add the following code to the Book prototype:
Book.prototype = {
new Book("First Edition",350, new Author("Random","Author","M")) );
Now, the book’s Author is a custom object instead of just a string. This provides for more extensibility in the design. If you later decide that you need to add information about the author, you can simply add the property or properties to the Author prototype.
EXAM TIP
You can add properties to a prototype dynamically rather than use the preceding method. The following code achieves the same outcome. Using such code is just a matter of preference.
Book.prototype.ISBN = "";
Book.prototype.Length = 350;
Book.prototype.genre = "";
Book.prototype.covering = "";
Book.prototype.author = new Author();
Book.prototype.currentPage = 0;
Book.prototype.title = "";
ptg14200515