Object Oriented Javascript - 2 : Prototype

Diode
,

continuing Object Oriented Javascript - 1 : Object

Prototype

Running the code below gives an alert showing undefined

var car = {
 name:”i20”,
 manf:”hyundai”,
 exprice:650000,
 tax:100000,
 getOnRoadPrice:function(){
     // this refers to instance car
     return this.format(this.exprice + this.tax);
 },
 format: function(amount){
     return amount.fixed(0);
 }
};
alert(car.prototype);

jsbin

Now let us explore car using Javascript console. See the screenshots attached below.

car in javascript console

Here we can see there is no property prototype for car. But you can see the property __proto__ for car. So questions are?

  1. What is Prototype ?
  2. Why there is a property prototype for Object ?
  3. Why there is no property prototype for car ?
  4. What is car.__poto__ ?

To find answer to these questions, let us explore Object and car once again. See the screenshot attached below.

js_oop_Objectjpg

From this we can understand that

  1. Object.prototype has the definition of some functions
  2. car is like the instance of Object (When compared to Class based OO Concepts)
  3. When Object is instantiated in car, all the functions in Object.prototype is added to car
  4. So car has the behavior defined in Object.prototype
  5. Any function Object.prototype.func can be invoked on car by calling car.func

Now we have answer to our questions

  1. What is Prototype ?
    Prototype is the definition of a behavior. A Prototype is thus a set of functions which results in defining a behavior.

  2. Why there is a property prototype for Object ?
    Object is the type in Javascript which can be instantiated. A Prototype is needed to define the behavior of the instance. Object.prototype defines this behavior.

  3. Why there is no property prototype for car ?
    car is an instance of Object here. It just re-uses the prototype of Object and does not own any re-usable prototype.

  4. What is car.__proto__ ?
    __proto__ is what connects an instance to its original Prototype. So here car.__proto__ refers to Object.prototype

Re-using behvaior

Obviously there comes a question about “Re-using?”. In Javascript almost everything is a dynamic object (yes, “almost” because there are exceptions). Even a prototype is a dynamic object. We can change it at any time and the changes will reflect in all the instances those were created before making the change. Let us try this out

var car = {
 name: “i20”,
 manf: “hyundai”,
 showManufacturer:function(){
     alert(this.manf);
 }
};
car.showManufacturer();

jsbin

An alert will show hyundai

We know that car was instantiated using Object.prototype. Let us try modifying it.

var car = {
 name: “i20”,
 manf: “hyundai”,
 showManufacturer:function(){
     alert(this.manf);
 }
}
Object.prototype.showName = function(){
 var msg = this.name || “name not set”;
 alert(msg);
}


var car2 = {
 name: “i10”,
 manf: “hyundai”,
 showManufacturer:function(){
     alert(this.manf);
 }
}


car.showName();
car2.showName();

jsbin
First it shows i20, and then i10

So we modified Object.prototype after creating the instance car. Then we created one more instance car2. Then we invoked showName for both the instances and it worked for both. So the point is when an instance gets created it is not cloning a prototype, but the prototype gets linked to that instance. or the instance sets that prototype as its behavior and starts using it. All the instances re-use the same prototype. So whatever changes we make to the prototype will be visible to all instances. Did you ask how it is possible ? Yes it is possible in Javascript because the instance of a function can be dynamically set. Next
diode.codes/object-oriented-javascript-3/)

Share