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:

• Design Patterns in WinJS #1: Introduction to Series
• Design Patterns in WinJS #2: Abstract Factory
• Design Patterns in WinJS #3: Builder
• Design Patterns in WinJS #4: Factory Method

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.