Classes And Inheritance in javaScript

SurajRane
Posted by in JavaScript category on for Beginner level | Views : 4822 red flag
Rating: 1 out of 5  
 1 vote(s)

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.

 

      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

 

Page copy protected against web site content infringement by Copyscape

About the Author

SurajRane
Full Name: Suraj Rane
Member Level: Starter
Member Status: Member
Member Since: 10/8/2009 10:53:40 PM
Country: India

http://www.dotnetfunda.com
System Analyst Suraj Bhaskar Rane

Login to vote for this post.

Comments or Responses

Posted by: Virendradugar on: 11/2/2009
Well done!!!

Login to post response

Comment using Facebook(Author doesn't get notification)