CODEWITHSUNDEEP
javascript
user203687
user203687

Reputation: 7237

Why is prototype necessary for inheritance in javascript

I was trying to learn OO techniques in javascript. Most of the web sites use prototype inheritance.

But, I am trying to understand why the following is bad (and still can achieve what prototype inheritance can do):

        //create parent class
    var Person = function (vId, vName) {
        this.Id = vId;
        this.Name = vName;

        this.Display = function () {
            alert("Id=" + this.Id);
        }
    };

    //create new class
    var Emp = function (vId, vName, vOfficeMail) {
        Person.call(this, vId, vName)
        this.OfficeEmail = vOfficeMail;

        this.Display = function () {
            alert("Id=" + this.Id + ", OfficeMail=" + this.OfficeEmail);
        }
    };

    //create instance of child class
    var oEmp = new Emp(1001, "Scott", "[email protected]"); //using Child's constructor
    //call display method in child class
    oEmp.Display();

    //create instance of parent class
    var oPerson = new Person(1002, "Smith"); //using Parent's constructor
    //call display method in parent class
    oPerson.Display();

Upvotes: 1

Views: 331

Answers (2)

Simon Forsberg
Simon Forsberg

Reputation: 13331

This is what I think is the most important, and a simple explanation.

This code will create the function once for each object:

this.Display = function () {
    alert("Id=" + this.Id);
}

Using prototypes, the function is instead created only once and applied to all objects of that kind. Wastes less memory and less CPU-power.

This code will show what I'm talking about:

var Person = function (vId, vName) {
        this.Id = vId;
        this.Name = vName;

        this.Display = function () {
            alert("Id=" + this.Id);
        }
    };

    var a = new Person(1, 2);
    var b = new Person(3, 4);

    var instanceEqual = (a.Display == b.Display);// false
    alert("Instance functions equal: " + instanceEqual);

    Person.prototype.Display2 = function () {
            alert("Id=" + this.Id);
        }

    var prototypeEqual = (a.Display2 == b.Display2);// true
    alert("Prototype functions equal: " + prototypeEqual);

Jsfiddle: http://jsfiddle.net/nPnrk/

Upvotes: 4

Pointy
Pointy

Reputation: 413720

The prototype object allows you to keep behaviors shared by many object instances all in one place. From there, they can be changed or extended dynamically if need be, with the effect being to immediately alter the capabilities of all constructed objects inheriting from the prototype.

There are other nice things too, but to me that's the most significant thing.

Upvotes: 2

Related Questions