Hi All,
Many developers still put their data at client side in multiple variables and some times it becomes very tough to manage them. If we store the data in object format then it becomes very easy to manage and control it. We can have similar model as we use at server side, it provides consistency of the data model in our application.
So today we’ll see various ways to store the data in Object format at Client side.
A Simple way:
We can create a normal object and can encapsulate related data in a single object. To create a simple object, you just need to assign a variable with new Object() and create the properties according to our requirement and assign the values as
var person = new Object(); person.FirstName = "Brij"; person.LastName = "Mishra"; person.Age = 27;
This is a simple object with few properties like FirstName, LastName and Age. You can read the object as
function displayObject() {
alert(person.FirstName + " " + person.LastName);
alert("Age: " + person.Age);
}
Here as you can see it is an object which contains the details of an person but here we didn’t define any class (as we do in C#) then we create an object assign some values in that. But we just created a object and created properties on the fly. Now obviously, while reading the object, you might not get any intellisense on some editor and we need to remember the name of the properties. And if we wrongly typed the property name then we’ll get an error at run time.
Because JavaScript is loosely coupled language. There is no way if we create similar object and check whether they are similar type of object. Also it is impossible to identify the object that you are using is actually of what type.
But there are more standard ways to Create a Type. We’ll discuss in coming section. First, we are going to discuss
Closure
Closure is function that encapsulate a class. Actually closure is not a normal function but it contains other functions and you can say it is a nested function. Inner functions actually constitutes its properties and methods. It provides an elegant way to create multiple instances of a type like person. It provides exactly similar behavior like class and object. Let’s create a closure
function Person(fisrtName, lastName, age) {
var _firstName = fisrtName;
var _lastName = lastName;
var _age = age;
this.set_FirstName = function (fisrtName) {
_firstName = fisrtName;
}
this.get_FirstName = function () {
return _firstName;
}
this.set_LastName = function (lastName) {
_lastName = lastName;
}
this.get_LastName = function () {
return _lastName;
}
this.set_Age = function (age) {
_age = age;
}
this.get_Age = function () {
return _age;
}
}
Now let’s use the person and person instantiate it. As you can see that it is taking three parameters, fisrtName, lastName and age. So you need pass the values while instantiating it. Using it, you can create an instance similar like C# as
function DisplayClosure() {
function DisplayClosure() {
var person = new NewPerson("Brij", "Mishra", 27);
alert(person.get_FirstName() + " " + person.get_LastName());
alert("Age: " + person.get_Age());
person.set_FirstName("Rahul");
person.set_LastName("Khanna");
person.set_Age("30");
alert(person.get_FirstName() + " " + person.get_LastName());
alert("Age: " + person.get_Age());
}
So you can see, How I created instance. I have created a setter and getter to set and get the properties.
Lets’s discuss another way.
Prototype:
Prototypes provides another way to create custom objects in JavaScript. Every JavaScript object has public prototype property . This actually exposes the public interface of the object. Using this feature, we can add some public properties and methods to a JavaScript object. Let’s see it with example
Person = function (firstName, lastName, age) {
this._firstName = firstName;
this._lastName = lastName;
this._age = age;
Person.prototype.set_FirstName = function (firstName) {
this._firstName = firstName;
}
Person.prototype.get_FirstName = function () {
return this._firstName;
}
Person.prototype.set_LastName = function (lastName) {
this._lastName = lastName;
}
Person.prototype.get_LastName = function () {
return this._lastName;
}
Person.prototype.set_Age = function (age) {
this._age = age;
}
Person.prototype.get_Age = function () {
return this._age;
}
}
So you can see that person is assigned to a function which is actually also a nested function but it is uses prototype property of an object. Lets instantiate it and check it.
function DisplayClosure() {
function DisplayClosure() {
var person = new NewPerson("Brij", "Mishra", 27);
alert(person.get_FirstName() + " " + person.get_LastName());
alert("Age: " + person.get_Age());
person.set_FirstName("Rahul");
person.set_LastName("Khanna");
person.set_Age("30");
alert(person.get_FirstName() + " " + person.get_LastName());
alert("Age: " + person.get_Age());
}
So you can see that this also is used in the similar way as Closure.
So what are the benefits of prototypes over closure. There are many..
- Prototypes provide better support for Intellisense and debugging.
- Prototypes also provide better performance in several browsers.
- Prototypes support reflection and that’s why used a lot in ASP.NET AJAX.
- Closure does not create an instance, it just specialized members to your object. instanceof does not work with Closure. While Prototype configured once then copied to every instance created using new.
Hope you all like it.
Cheers,
Brij
Code Wala 