May 022012
 
Share...Tweet about this on TwitterShare on FacebookShare on Google+Share on StumbleUponShare on LinkedInPin on PinterestShare on TumblrShare on RedditDigg this

This post is an introduction to the Object Oriented functionality in JavaScript. I will discuss the ways of creating, instantiation and inheriting objects in JavaScript.

JavaScript itself doesn’t contain the class keyword and there are mainly three ways of creating objects in JavaScript, by using:

  1. Literal notation
  2. new Object()
  3. Object templates

Literal notation

By using the Literal Notation, the object description is a set of comma-separated name/value pairs. As you may see all this is wrapped inside curly braces.

This is an example of instantiation the person object by directly assigning values to properties. Note that at the run time the properties (i.e: name, surname..) will automatically have “get” and “set” functionality, which means that we may assign or read the value from it.

In the example is shown as well the mechanism of creating methods by:

  1. Declaring the code as an inline function directly in the declaration
  2. Referencing a method outside the Literal declaration

[javascript]

[/javascript]

New Object() notation

Another way of creating an object in JavaScript is to directly use the new object() keyword. In the example below I am showing pretty much the same object as done in the previous example when the Literal notation was used. Nice thing about using the new Object() notation is that we may attach properties and methods at any time (which could be a bad thing as well as it creates some sort of spaghetti code). The example below shows as well how to define a function, as we did before, either inline or external.

[javascript]

[/javascript]

Both creation of objects either by using Literal notation or the new Object is pretty much easy but it doesn't really give us all the functionality as we would expect it from a "real" Object Oriented Programming language. In the earlier example, we have created the person object, but we cannot really reuse the functionality and instantiation new objects based on the code we have written. So, for instance, it is not possible to have something like:

[javascript]
var person = new person();///
[/javascript]

as we have never defined the template (or better call it a "class") as we would do in JAVA or in C# for instance.

At this point we have to introduce the notion of the JavaScript Object Template.

JavaScript Object templates

As mentioned before, we may compare the JavaScript object template to a "class" in other object-oriented programming languages. JavaScript unfortunately doesn't have the class keyword but there is a way of achieving this by using a standard function and calling it with a new keyword:

[javascript]

[/javascript]

Now, this is really powerful, I may instantiate more objects by using the same function that acts as a constructor of the object. As in earlier examples we may attach properties and methods directly in the function declaration. This is perfect for reusability.

There is another way of attaching properties to an object template, which is by using the prototype on prebuild JavaScript objects.

JavaScript prototypes

In general, Tthe prototype property can be used to create new properties or methods of created objects (whether they are user defined or system defined) as follows:

[javascript]

var james = new person("James");

person.prototype.age = 22;
james.age = 22;
alert(james.age);
[/javascript]

the new property generated through prototyping is automatically visible to all the instances.

Prototyping works for any defined object, so, as well to the one already defined in the JavaScript runtime like Date(), Array, etc...

Lets see how can we use the prototype property against an array:

[javascript]

[/javascript]

To me, the prototype really looks very similar to the c# extension methods.

Inheritance in Javascript

The inheritance is possible in JavaScript. Here I will show one way of achieving this by using the built-in inheritFrom method.

[javascript]

[/javascript]

Final thoughts

We have gone through the various object creation methods in javascript. Certainly this post haven't had the intention to list all of the detailed options, which I leave to you to find about, but merely to show the different possibilities and to perhaps discover something new.

This post demonstrates that javascript has big potentials, and indeed, it looks like that the future of the software development goes around javascript, which is an essential part of the today's internet.

As a good reference (and much more detailed) I would advise you to visit the following site: javascriptkit

    Share...Tweet about this on TwitterShare on FacebookShare on Google+Share on StumbleUponShare on LinkedInPin on PinterestShare on TumblrShare on RedditDigg this

    I'm a Software Developer and Solution Architect interested in Software Development, Object-Oriented Design and Software Architecture all this especially bound to the Microsoft.NET platform.Feel free to contact me or know more in the about section

    Leave a Reply

    weggerpo@mailxu.com