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 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