Even though JavaScript is a loosely typed scripting language ,it supports object oriented features.
Even though it supports OO concepts it doesn’t have classes. The only thing java script supports is object. Before going to this concept let me briefly explain about the data types supported by JavaScript .
JavaScript basically supports
1. Primitive Data types
2. User defined data types(objects)
Primitive data types: they will be similar to the data types(integer,float,string,boolean) in other programming languages.
JavaScript provides only one keyword var to declare variables of all (primitive)data types.
The data type of the variable will be decided on the value which is assigned to it first.
Example:
Var xint=5;
Then the data type of xint will be considered as integer.
Similarly if you say var xbool=false. Then x bool will be treated as Boolean variable.
Typeof operator
This operator will be useful to identify the data type of the variable .If you say typeof(xbool) then it will return Boolean
Object
An Object in JavaScript is nothing but collection of properties. These properties can be primitive data types or other objects and functions.
JavaScript provides three different categories of objects:
1. Host objects
2. Native Objects
3. User-Defined objects.
Host-objects:
Host Objects are provided by browser environment examples of Host objects are Window, document and forms.
Native Objects:
Native objects are provided by JavaScript library. String, Array and Image is examples of Native Objects.
To create Native objects we need to user new operator. EX
Var img1=new Image();
var pimitiveString1 = "This is a primitive string";
var pimitiveString2 = String("This is a primitive string");
var stringObject = new String("This is a String object");
// pimitiveString1.prop = "This is a property";
// pimitiveString2.prop = "This is a property";
//stringObject.prop = "This is a property";
alert(pimitiveString1 .prop) // displays "undefined"
alert(pimitiveString2 .prop) // displays "undefined"
alert(stringObject.length) // displays "This is a property"
var pimitiveString2 = String("This is a primitive string");
var stringObject = new String("This is a String object");
// pimitiveString1.prop = "This is a property";
// pimitiveString2.prop = "This is a property";
//stringObject.prop = "This is a property";
alert(pimitiveString1 .prop) // displays "undefined"
alert(pimitiveString2 .prop) // displays "undefined"
alert(stringObject.length) // displays "This is a property"
Note: all other constructors must be called with the new keyword, or they simply return a value, instead of a new object
Ex 1:
function myFunc(){
return 5;
}
var myObject = myFunc();
alert(typeof myObject); //number
return 5;
}
var myObject = myFunc();
alert(typeof myObject); //number
Can you guess what the alert box will return? May be you are right the alert will be display as number. Because here we have not used new operator so it will just invoke it is a normal method.
Now let us see how to create object of myFunc .(User defined objects)
EX:2
function myFunc(){
}
var myObject = new myFunc();
alert(typeof myObject); //myFunc
}
var myObject = new myFunc();
alert(typeof myObject); //myFunc
Now alert box will return as myFunc . I.e. if you use new operator the object of myFunc will be created. If you carefully observe the above statement here we have created an object of myFunc i.e. here myFunc is similar to Class in a any other Object oriented languages.
i.e. There is no separate syntax for creating classes in JavaScript . Creating classes is simple as writing as normal functions. Based on the way they are invoked they will be treated either as a function or class (As explained by examples)
Great.we have learnt how to create classes now let us see
How to add properties to the class.
Example:
function myFunc(){
this.var1;
this.var2;
}
Var object=new myFunc()
Object.var1=5;
Object.var2=5;
In the above example var1 and var2 are properties of the class myFunc. If you observe the difference here we haven’t used var keyword which is used to declare normal variables.
i.e. There is no need to use var keyword while declaring member variables but we need to prefix them with this. Here this refers to the current class/object
So We have learnt
How to create classes
How to declare member variables and how to aces them.
Now let us see
how to added member functions in JavaScript classes
There are three different ways in which we can add member functions to a JavaScript class . I will try to explain the method which is used most often.
function myFunc()
{
this.var1;//member variable 1
this.var2; //member variable 2
this.getVar1=function() //member method1
{
return this.var1;
}
this.getVar2=function() //member method w
{
return this.var2;
}
}
In the above example
myFunc is a class
var1,var2 are member variables of the class
getVar1 and getVar2 are member functions.
to declare object we need to use the syntax mentioned below
var object1=new myFunc();
object1.var1=5;
alert(object1.getVar1());//returns 5.
So finally we have learnt how to create classes and objects in JavaScript .JavaScript also provides Inheritance You can go through below links for more detailed understating of Object Oriented Concepts in JavaScript.
Thanks,
Vijay
