Creating custom objects in javascript
JavaScript is an object-oriented programming language, you should apply proper object-oriented practices when developing JavaScript applications. This involves creating custom objects to encapsulate functionality within logical entities.
The following code creates a dynamic object, meaning that it’s created in line with a variable declaration.
<body>
<input type="submit" onclick="step1()" value="DYNAMIC OBJECT-INLINE" /> <br />
<script type="text/javascript">
var step1 = function () {
var book = {
ISBN: "55555555",
Length: 560,
genre: "programming",
covering: "soft",
author: "Info Codify",
currentPage: 5
}
alert("ISBN : " + book.ISBN +
"\nLengh : " + book.Length +
"\nGenre : " + book.genre +
"\nAuthor : " + book.author);
}
</script>
</body>
The object provides a way to encapsulate into a single object the properties. When using the 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.
Dynamic inline objects & methods
The properties of an object represent its state, whereas the methods of an object provide its behavior. The object has only properties, to give it behavior you can add three methods to provide some functionality to the object.
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.
The following code demonstartes this:
<body>
<input type="submit" onclick="step2()" value="DYNAMIC OBJECT-METHODS" /><br />
<script type="text/javascript">
var step2 = function () {
var book = {
ISBN: "55555555",
Length: 560,
genre: "programming",
covering: "soft",
author: "Info Codify",
currentPage: 5,
title: "My Big Book of Wonderful Things",
flipTo: function flipToAPage(pNum) {
this.currentPage = pNum;
},
turnPageForward: function turnForward() {
this.flipTo(this.currentPage++);
},
turnPageBackward: function turnBackward() {
this.flipTo(this.currentPage--);
}
}
alert("ISBN : " + book.ISBN +
"\nLengh : " + book.Length +
"\nGenre : " + book.genre +
"\nAuthor : " + book.author);
}
</script>
</body>
Object prototypes
Creating objects in line is useful only when it is used in the page where it’s defined, and perhaps only a few times. 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. The constructor can take parameters to initialize the state of the object and the object take extra steps to initialize itself.
The following code creates a prototype for the book object:
<body>
<input type="submit" onclick="step3()" value="OBJECT PROTOTYPES" />
<!-- CREATING PROTOTYPES -->
<script type="text/javascript">
var step3 = function () {
function Book() {
this.ISBN = "55555555";
this.Length = 560;
this.genre = "programming";
this.covering = "soft";
this.author = "Info Codify";
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
alert("ISBN : " + books[0].ISBN +
"\nLength: " + books[0].Length +
"\nGenre : " + books[0].genre +
"\nAuthor : " + books[0].author);
}
</script>
</body>
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.
Object prototypes and constructors
Accessing each element to provide initialization values isn’t more efficient. It would be more convenient if the object supported more than one constructor.
The following code creates a prototype containing two constructors:
<body>
<input type="submit" onclick="step4()" value="OBJECT PROTOTYPES-CONSTRUCTORS" /><br />
<script type="text/javascript">
var step4 = function () {
function Book() {
//just creates an empty book.
}
function Book(title, length, author) {
this.title = title;
this.Length = length;
this.author = author;
}
Book.prototype = {
ISBN: "",
Length: -1,
genre: "",
covering: "",
author: "",
currentPage: 0,
title: "",
flipTo: function FlipToAPage(pNum) {
this.currentPage = pNum;
},
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"))
alert(
"\nLength: " + books[1].Length +
"\nGenre : " + books[1].author +
"\nAuthor : " + books[1].title
);
}
</script>
</body>
In this way 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.
Ads Right
