Object-Oriented JavaScript: Using the `Prototype` Property

One of the most common tasks performed when working with user-defined objects is naturally utilizing their properties in some way. After all, what’s the point of assigning properties to an object if they won’t be used at all? Fortunately, JavaScript offers a special statement, the “for in” loop, that allows you to easily iterate over all the properties of an object without having to write customized code to accomplish the task. Its basic signature is the following:

for(var object_properties in object_name){
    // code to process object properties
}

As you can see, the “for in” loop uses two variables for traversing the properties of an object. The first one is utilized as an index, while the second one is the variable that holds the object itself. Now, in order to demonstrate the functionality of this statement, I’ll use the “Div” constructor function shown previously to create a new object and utilize a “for in” loop for iterating over the object’s properties. The example looks like this:

function Div(w,h,t,l,p,bg){
    // define object properties
    this.div=document.createElement('div');
    this.w=w+'px';
    this.h=h+'px';
    this.pos='absolute';
    this.top=t+'px';
    this.left=l+'px';
    this.pad=p+'px';
    this.bord='1px solid #000';
    this.bg='#'+bg;
    // define 'display()' method
    this.display=function(){
        this.div.style.width=this.w;
        this.div.style.height=this.h;
        this.div.style.position=this.pos;
        this.div.style.top=this.top;
        this.div.style.left=this.left;
        this.div.style.padding=this.pad;
        this.div.style.border=this.bord;
        this.div.style.background=this.bg;
        document.getElementsByTagName('body')[0].appendChild(this.div);
    }
}

Having defined the constructor function for “Div” objects, the next step consists of defining a simple wrapping function, which internally uses a “for in” loop, in order to iterate over the properties of the object just created. Take a look at the example below:

function displayObjProp(obj){
    var div=document.createElement('div');
    for(var i in obj){
        var p=document.createElement('p');
        p.appendChild(document.createTextNode('Name :'+i+' Value :'+obj[i]));
        div.appendChild(p);
    }
    document.getElementsByTagName('body')[0].appendChild(div);
}

// instantiate div object
var div=new Div(400,250,100,100,5,'00f');
div.display();
// call 'displayObjProp()' function
displayObjProp(div);

After running the above script, the “displayObjProp()” function loops over the properties of the div object and displays their name/value pairs, outputting the corresponding values in the following format:

Name :div Value :[object HTMLDivElement]
Name :w Value :300px
Name :h Value :250px
Name :pos Value :absolute
Name :top Value :100px
Name :left Value :100px
Name :pad Value :5px
Name :bord Value :1px solid #000
Name :bg Value :#00f
Name :display Value : function () { this.div.style.width = this.w; this.div.style.height = this.h; this.div.style.position = this.pos; this.div.style.top = this.top; this.div.style.left = this.left; this.div.style.padding = this.pad; this.div.style.border = this.bord; this.div.style.background = this.bg; document.getElementsByTagName("body")[0].appendChild(this.div); }

As you can appreciate, the output generated by the simple script shows the complete list of properties attached to the div object in the form “property name/property value.” Notice how the “display()” method is also listed, as part of the object’s properties. This reaffirms the concept that you learned in the first part of the series, where I demonstrated how properties can hold plain values, functions or even other objects.

To wrap up

At this stage, my journey exploring the creation and implementation of user-defined objects in JavaScript has almost finished. But, this isn’t a definitive goodbye. After showing some simple examples, which hopefully have demonstrated the nice capabilities of JavaScript for working with custom objects, there is still one step further to go. It’s precisely for that reason that over the last part of the series, I’ll write some constructor functions that can be used in real-word applications, in order to work with HTTP requester objects and pop-ups constructors. So, get ready for the next coding challenge!