Home arrow JavaScript arrow Page 4 - Object-Oriented JavaScript: Using the `Prototype` Property
JAVASCRIPT

Object-Oriented JavaScript: Using the `Prototype` Property


In this second part of this series, Alejandro Gervasio shows the correct implementation of the "Prototype" property, and how to use it to apply inheritance to many objects of the same family type.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 50
December 05, 2005
TABLE OF CONTENTS:
  1. · Object-Oriented JavaScript: Using the `Prototype` Property
  2. · Prototyping objects: looking at the “prototype” property
  3. · Object interaction in JavaScript: applying Inheritance through the “prototype” property
  4. · Traversing object properties: using the “for in” loop structure

print this article
SEARCH DEVARTICLES

Object-Oriented JavaScript: Using the `Prototype` Property - Traversing object properties: using the “for in” loop structure
(Page 4 of 4 )

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!


DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

blog comments powered by Disqus
JAVASCRIPT ARTICLES

- Project Nashorn to Make Java, JavaScript Wor...
- JavaScript Virus Attacks Tumblr Blogs
- Google Releases Stable Dart Version, JavaScr...
- Khan Academy Unveils New JavaScript Learning...
- Accessing Nitro? There`s an App for That
- JQuery 2.0 Leaving Older IE Versions Behind
- Fastest JavaScript Engine Might Surprise You
- Microsoft Adjusting Chakra for IE 10
- Brendan Eich: We Don`t Need Google Native Cl...
- An Overview of JavaScript Statements
- An Overview of JavaScript Operators
- Overview of JavaScript Variables
- More of the Top jQuery Social Plugins
- The Top jQuery Social Plugins
- More of the Top jQuery Slider Plugins

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials