Prototypes in javascript

There are 2 types of inheritance.
  • Classical inheritance - Inheriting from other types (e.g. Java)
  • Prototypical inheritance - Inheriting from other objects (e.g. JavaScript)
Important things to note about prototypes are
  • Everything is object in JavaScript. (Even arrays and functions)
  • Property resolution happens via prototype chain.
  • At the the top of prototypical chain, there is a Base Object. It has methods like toString(), valueOf(). All objects in JS can access these methods via prototypical inheritance.
  • To find the prototype (Remember that prototype is just another object) of any object, just use this statement. Object.getPrototypeOf(o1) . This statement will return the object from which object o1 is inheriting it's properties. It is similar to __proto__.
  • Let us say there is object o1 and you want to create object o2 that should inherit from o1. In such case, best syntax is let o2 = Object.create(o1) Then this statement will be true - o1.isPrototypeOf(o2)
  • Other way to link prototype is using this statementObject.assign(User.prototype, o1) and then when you create object o2 = new User(), o2 will inherit from o1. Only constructor functions have special property - prototype. Objects have __proto__ which refers to prototype object. e.g.Array.prototype and String.prototype
  • In JavaScript, there are no classes. ES6 class is a syntactic sugar for constructor functions.
  • when we access a method or prop of object, it looks at the object. If object does not have the own prop, it will look up to prototype chain until null is found.

   for (let prop in o1)
   {
       //o1.hasOwnPropperty(prop) - check if object has owned prop
       console.log(prop)
   }

If you want something to be inherited, update prototype prop. If you want to add new properties and methods to existing object you can easily do that. But if you want to add new properties and methods to existing class, you can not do that dynamically. You will have to modify the constructor of that class to add new properties and methods. That's when prototypes come in to picture. You can add properties and methods to class dynamically and all objects created from that class will inherit those properties and methods. e.g. all array objects inherit from Array.prototype.

Prototype Example


//prototypes

let Car =  function(make,price,features){
    this.make=make;
    this.price = price;
    this.features = features;
}

let car4 = new Car("Honda", 20000, ['abs','alarm']);
console.log("car 4 " + JSON.stringify(car4));

//Below color property will not be inherited by car4 object
Car.color = "green";
console.log(car4.color);//undefined

Car.prototype.color = "green"
console.log(car4.color);//green

//conclusion - object will inherit properties from constructor or prototype only

Here is another example on prototype chain.

function User(name) {
  this.name = name;
  let salary = 9000;
  this.getUpperCase = function () {
    return this.name.toUpperCase() + salary;
  };
}

User.prototype.getLength = function () {
  return this.name.length;
};

let user1 = new User("sagar");

Here is one more example of prototype.


let Car = function (make){ 
  this.make = make
  this.getCarMake = function (){
      return this.make
  }
}

let c1 = new Car("Honda")
c1.getCarMake();
console.log(c1.constructor.prototype);

console.log(Object.getPrototypeOf(c1));

let childobj = {}
Object.setPrototypeOf(childobj,c1)
childobj.make = "Ferrari"
console.log( childobj.getCarMake());
Object.setPrototypeOf(childobj,new Array())
childobj.push(2)
console.log(childobj.__proto__);

//***************************** */
let childobj2 = Object.create(c1)


Composition vs inheritance

  • inheriting parent class props
  • composition - using smaller methods and binding to objects
  • tight coupling problem in inheritance. All classes will inherit any method in parent class and fragile base class problems
  • hirarchy issue - multiple levels can cause problems as well - how many levels of inheritance should be created?

Web development and Automation testing

solutions delivered!!