Different ways to define a JavaScript class
Everything" in JavaScript is an Object: a String, a Number, an Array, a Function....
In addition, JavaScript allows you to define your own objects.
JavaScript is a very flexible object-oriented language when it comes to syntax
It's important to note that there are no classes in JavaScript.
Functions can be used to somewhat simulate classes, but in general JavaScript is a class-less language. Everything is an object.
And when it comes to inheritance, objects inherit from objects, not classes from classes
JavaScript is an object oriented language, but JavaScript does not use classes.
In JavaScript you don't define classes and create objects from these classes (as in most other object oriented languages).
JavaScript is prototype based, not class based.
Creating JavaScript Objects
There are 2 different ways to create a new object:
1. Use a function to define an object, then create new object instances.
2. Define and create a direct instance of an object.
1. Using a function
This is probably one of the most common ways. You define a normal JavaScript function and then create an object by using the new keyword. To define properties and methods for an object created using function(), you use the this keyword, as seen in the following example.
function Employee (empId,age,salary) {
this.empId = empId,
this.age = age,
this.salary = salary,
this.getInfo = getImpInfo;
}
function getImpInfo() {
return this.empId + ' ' + this.age + ' '+ this.salary;
}
Call this via
var emp = new Employee('EMP123','32','10000');
alert(emp.getInfo());
You can still call like this as well Employee('EMP123','32','10000');
1.1. Methods defined internally
In the example above you see that the method getInfo() of the Employee "class" was defined in a separate function getImpInfo(). While this works fine, it has one drawback – you may end up defining a lot of these functions and they are all in the "global namespece". This means you may have naming conflicts if you (or another library you are using) decide to create another function with the same name. The way to prevent pollution of the global namespace, you can define your methods within the constructor function, like this:
function Employee (empId,age,salary) {
this.empId = empId,
this.age = age,
this.salary = salary,
this.getInfo = function(){ return this.empId + ' ' + this.age + ' '+ this.salary;
};
}
Call this via
var emp = new Employee('EMP123','32','10000');
alert(emp.getInfo());
or call directly like
alert(new Employee('EMP123','32','10000').getImpInfo());
1.2. Methods added to the prototype
A drawback of 1.1. is that the method getInfo() is recreated every time you create a new object. Sometimes that may be what you want, but it's rare. A more inexpensive way is to add getInfo() to the prototype of the constructor function.
function Employee (empId,age,salary) {
this.empId = empId,
this.age = age,
this.salary = salary
}
Employee.prototype.getImpInfo = function() {
return this.empId + ' ' + this.age + ' '+ this.salary;
};
Call this using
var emp = new Employee('EMP123','32','10000');
alert(emp.getImpInfo());
or call directly like
alert(new Employee('EMP123','32','10000').getImpInfo());
2. Using object literals
Literals are shorter way to define objects and arrays in JavaScript. To create an empty object use the below:
var obj = {};
instead of the "normal" way:
var obj = new Object();
For arrays you can do:
var a = [];
instead of:
var a = new Array();
So you can skip the class-like stuff and create an instance (object) immediately. Here's the same functionality as described in the previous examples, but using object literal syntax this time:
var Employee = {
empId : "Emp123",
age : 32,
salary : 1000,
getInfo : function() {
return this.empId + ' ' + this.age + ' '+ this.salary;
}
}
OR Create an empty object and then add the properties
var Employee = new Object();
Employee.empId='Emp123';
etc...
Call this like
alert(Employee.getInfo() );
3. Singleton using a function
The third way presented in this article is a combination of the other two you already saw. You can use a function to define a singleton object. Here's the syntax:
The third way presented in this article is a combination of the other two you already saw. You can use a function to define a singleton object. Here's the syntax:
var Employee = new function (){
this.empId = "Emp123",
this.age = 32,
this.salary = 1000,
this.getInfo = function() {
return this.empId + ' ' + this.age + ' '+ this.salary;
};
}
call me like
alert(Employee.getInfo() );
new function(){...} does two things at the same time: define a function (an anonymous constructor function) and invoke it with new.
It might look a bit confusing if you're not used to it and it's not too common, but hey, it's an option, when you really want a constructor function that you'll use only once and there's no sense of giving it a name.
JavaScript for...in Loop
The JavaScript for...in statement loops through the properties of an object.
var Employee={fname:"John",lname:"Doe",age:25,salary:10000};
for (x in Employee)
{
alert(x+' : '+Employee[x]);
}
