Object-Oriented JavaScript: An Introduction to Core Concepts - Getting information about objects: looking at the “constructor” property
(Page 5 of 5 )
As I mentioned before, each time an object is instantiated, the function that defines the object itself is automatically called. In object-oriented parlance, this function is widely known as a “constructor”. In particular, JavaScript exposes a built-in “constructor” property, so when used in conjunction with a given object, it returns the complete definition for its constructor method. Sounds confusing? It’s not. Please study the example listed below to clarify any problem:
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);
}
}
var div=new Div(300,250,100,100,5,'00f');
div.display();
alert(div.constructor);
As you can appreciate, the above example defines the same “Div” function I’ve used across this tutorial for spawning some DIV objects. According to the concepts previously explained, after instantiating a new “Div” object with the corresponding input parameters, it’s possible to use its “constructor” property, which comes in handy for returning the complete definition of the constructor method. The above “alert()” method returns the following output:
As depicted above, the “constructor” property nicely returns the full definition for the object’s constructor, including its distinct properties, in conjunction with the list for each method. Give it a try using different objects, and watch the returning value of this property either when using built-in or user-defined objects. The experience is really instructive. Trust me.
At this point, I’ve conveniently illustrated some of the core concepts of how to create and utilize user-defined objects in JavaScript. Of course, there are a number of topics worth reviewing yet, including the “prototype” property and how to apply Inheritance to multiple objects. But, as you may have guessed, these points will be properly addressed in the next tutorial.
To wrap up
Throughout this first article, I’ve explored in detail the basics for working with user-defined objects in JavaScript. Hopefully, this tutorial has provided you with the general guidelines that will allow you to start quickly spawning and utilizing your own objects in client-side applications. As I said previously, over the next part of the series, I’ll explain the correct implementation for the “prototype” property, as well as how to inherit properties from base objects. Sounds really interesting, right? So, don’t miss the next tutorial!
| 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. |
/ 19 
