Go to DotNetFunda.com
 Online : 78 |  Welcome, Guest!   Login
 Skip Navigation Links Home > Articles > JavaScript > Classes And Inheritance in javaScript
  Win at least 8 gifts every month now! >> Top Performers of this month.   


Notice: If page content has been copied from other sources without proper permission, kindly let us know with details from where it has been copied for further action.

All Articles | Submit Article |

Classes And Inheritance in javaScript

 Posted on: 10/30/2009 2:07:58 AM by SurajRane | Views: 416 | Category: JavaScript | Level: Beginner | Print Article
Many times we need a way to write object oriented code in javascript.
We can create classes,objects,properties and lot more using javascript. This article include some of the features about object oriented scripting which i found very useful during developement.

Webmaster says - If this article content has been copied from other websites without proper permission, kindly let us know with details from where it has been copied for further action.

 

      Introduction

     Classes in JavaScript

    1. Parameter and constructor

 

    2. Creating object and accessing members of class

 

    3.  Inheritance in javascript

 

       4.  Dynamically Adding Properties

 

          a) Adding property(es) to single object

 

   b) Adding Properties to class

 

    5.  Creating Flexible constructor

 

    6 . Passing parameters to parent class from child class constructor

         7.  Summary   

 

  • Classes In JavaScript

       Classes in JavaScript are nothing but functions. We can define classes using javaScript keyword function.

       e.g.

       Definition of class “MyClass”

 

1.    Parameter and constructor

 

     Using “this” keword we can define properties in a class. Parameters can be directly passed to function.

 

 

    

    Property1, property2 are nothing but the properties defined using “this” keword. When object of MyClass will be created

    Property1 will be initialized to 0, Property2 will be assigned value param1 and property3 will be assigned to

    value param1+param2.

     

    

2.  Creating object and accessing members of class:

 

 

    We saw how to create class and how to define properties in class.

   

    Now lets see how we can create object of class and aceess its memberes.

 

    We can create object using “new” keyword provided by Javascript.

    

    e.g.

    

   

      You can now access members of myClass using  object MyObj. An intellisense will also be available.

 

 

3.    Inheritance in javascript:

 

   We can inherit classes creted in javascript using prototype property.Lets suppose that we have to create following classess

    implement relationship as shown.

 

 

      It is very simple,lets first create class A and its child class B.

 

 

      Below is the whole structure

 

 

 

4.    Dynamically Adding Properties:

 

a)    Adding property(es) to single object

 

   We can add property/properties to single object. Such a property will only be available to single object and will not be added to

   class.

 

 

 

 

 

  b) Adding Properties to class

 

   There is nice solution for how we can add property to a class and make it available to all objects rather than single object.

 

   We can do this using prototype.

 

   e.g.

 

 

 

 

 5. Creating Flexible constructor :

 

   We can provide arguments to constructors to initialize properties of instance.

   And also define default values if an arguments is not provided.

 

   This is like default value we assign in c#,java.

 

   e.g.

 

 

   Javascript || operator evaluate first argument. If it returns true then first argument of || operator is assigned else second one.

 

   This will work fine for string values but for numeric and boolean values we should not use || operator instead we should go for

   ternery operator (?:)

 

   Because 0 or false evaluate || expression such that it will  always return second argument.

 

 

   e.g.

 

     6 .Passing parameteres to parent class from child class constructor:

 

   We use :base() in c# to invoke parent class constructor. We can do it in javascript also. Look at below code snippet. Its very

   easy..

 


 

    7. Summary :

 

   References :     https://developer.mozilla.org/en/Core_JavaScript_1.5_Guide

 


Interesting?   Share and Bookmark this kick it on DotNetKicks.com


About Suraj Rane

Experience:2 year(s)
Home page:http://www.dotnetfunda.com
Member since:Thursday, October 08, 2009
Biography:Developer
Suraj Bhaskar Rane
 Latest post(s) from SurajRane

   ◘ Classes And Inheritance in javaScript posted on 10/30/2009 2:07:58 AM


 Responses
Posted by: Virendradugar | Posted on: 02 Nov 2009 01:49:50 AM

Well done!!!

Submit Article

About Us | The Team | Contact Us | Privacy Policy | Terms of Use | Link Exchange | Members | Go Top
All rights reserved to DotNetFunda.Com. Logos, company names used here if any are only for reference purposes and they may be respective owner's right or trademarks.
(Best viewed in IE 6.0+ or Firefox 2.0+ at 1024 * 768 or higher)