Home arrow JavaScript arrow Page 5 - Object-Oriented JavaScript: An Introduction to Core Concepts
JAVASCRIPT

Object-Oriented JavaScript: An Introduction to Core Concepts


JavaScript is a powerful object-oriented language whose capability has frequently been underestimated when compared with other OO languages. This article, the first of several parts, should help you gain a better understanding of JavaScript's true value. It will show you the basics of creating custom objects and defining their methods and properties. You will also learn some advanced concepts such as Inheritance. Plenty of real-world examples will be included.

Author Info:
By: Alejandro Gervasio
Rating: 4 stars4 stars4 stars4 stars4 stars / 42
November 28, 2005
TABLE OF CONTENTS:
  1. · Object-Oriented JavaScript: An Introduction to Core Concepts
  2. · Working with objects in JavaScript : introducing the key concepts
  3. · Coupling methods to objects: defining self-contained constructors
  4. · Functions and objects: a closer look at the “Function” object
  5. · Getting information about objects: looking at the “constructor” property

print this article
SEARCH DEVARTICLES

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.

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-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials