Design Patterns In WinJS #5: Prototype

I've decided to write more OOP articles in WinJS library regarding the use of Design Patterns we all love! You can learn more in my previous parts:

Let's start with what this design pattern means.

What is Prototype Design Pattern?

Prototype helps you create prototype instances of the objects and lets you clone them. It's widely used in Javascript especially in jQuery library.

According to DoFactory,a prototype factory has three objects:

Client stage: The execution of the creation of objects.User creates the prototype object here.
Prototype: A class derived from another class with clone function in which you can use same object in another place.
Clones: The objects created from Prototype.

Now let's make an example Prototype diagram:

My Prototype example has the same amount of objects as DoFactory's.

Professional Object
ProfessionalPrototype Object
Clone Object

We shall create Professionals from Prototype and then create clones.

Let's see some code!

Implementation

Let's create our Professional object:

var Professional = WinJS.Class.define(
function(name, job, age) {
this.name = name;
this.job = job;
this.age = age;
this.say = WinJS.Class.define(
function () {
console.log(this.name + " is working as " + this.job +
" who is " + this.age + " years old");
});
});

Time to create Prototype object:

var ProfessionalPrototype = WinJS.Class.define(
function(proto) {
this.proto = proto;
this.clone = WinJS.Class.derive(Professional,function(){
var prof = new Professional();
prof.name = proto.name;
prof.job = proto.job;
prof.age = proto.age;
return prof;
});
});

Now, let's instantiate our objects and show the output:

var proto = new Professional("Ibrahim Ersoy", "Developer", "31");
var prototype = new ProfessionalPrototype(proto);

prof.say();

Finalize

Let's build and run the project:

We've created a single clone and shown how Prototype works. But Prototype's power comes from clones. Now let's extend the functionality a bit more.

Update Professional object:

var Professional = WinJS.Class.define(
function(name, job, age) {
this.name = name;
this.job = job;
this.age = age;
this.say = WinJS.Class.define(
function (gender,altertext) {
var gendertext;
if (altertext) {
this.name = altertext;
}
if (gender=="M") {
gendertext = "he";
}
else {
gendertext = "she";
}
console.log(this.name + " is working as " + this.job +
" & " + gendertext + " is " + this.age + " years old");
});
});

We shall create a few clones and change the cloned object's properties.These properties include the name and gender.

Let's create 3 more professionals from our clone:

var proto = new Professional("Ibrahim Ersoy", "Developer", "31");
var prototype = new ProfessionalPrototype(proto);
var prof1 = prototype.clone();
var prof2 = prototype.clone();
var prof3 = prototype.clone();
prof1.say("M","Dhanjay Kumar");
prof2.say("F","Sara SomeDeveloper");
prof3.say("F","Angelina Jolie");

Now let's build and run our example:

Why should you use it?

Quite simple. If you want to reuse cloned objects Prototype is the design pattern for you, not to mention its popularity in the JS World.

10 Comments

Join the conversation! Your thoughts help the community grow.

Bhuvanesh Mohankumar10y ago
Good one
- Ibrahim Ersoy10y ago
  Thank you
Vignesh Mani10y ago
Nice one
- Ibrahim Ersoy10y ago
  Thank you
Raja10y ago
Good One..
- Ibrahim Ersoy10y ago
  Thank you
Thiruppathi R10y ago
Nice ..
- Ibrahim Ersoy10y ago
  Thank you
Debasis Saha10y ago
Nice share..
- Ibrahim Ersoy10y ago
  Thank you