Prototypal Inheritance

Javascript is using inheritance, but unlike other languages, the inheritance is prototype-based. This is the case because in Javascript there are no classes — instead an object inherits from another object.

Every object has a prototype, which is an object. All objects inherit their properties and methods from their prototype.

The basic parts of this article are:

• Use of __proto__
• Use Object.create with a the __proto__ of a given object
• Create Objects than inherit from another Object
• Prototype VS __proto__
• Where does the property belong
• Crossbrowser Support

Use of __proto__

Let’s say that we have a vehicle and a car to which we want to give all properties of vehicle.

Var vehicle = {hasWheels: true} ;
var car = {numOfWheels: 4};
car.__proto__ = vehicle;

The object car has the property hasWheels of type boolean true, from the vehicle.

console.log(car.hasWheels); // true

This code looks in car in order to find the property hasWheels, and because it is not found there, if looks for it at vehicle.

Use Object.create with a the __proto__ of a given object

Another way of working with prototypes:

var vehicle = {hasWheels:true};
var car = Object.create(vehicle);
car.numOfWheels = 4;
console.log(car.numOfWheels);

Once the car object is created we can add properties to it

car.maxSpeed = 200;

We can also check if a car has a prototype of vehicle.

console.log(Object.getPrototypeOf(car) === vehicle); // true

Read only access to the prototype is achieved through getPropertytypeOf.

Create objects that inherit from another object

I want to create different models of cars that inherit from the vehicle.

var vehicle = {hasWheels: true} ;
function Car(model){
   this.model = model;
   this.numOfWheels = 4;
}
Car.prototype = vehicle;
var hondaCivic = new Car('honda');
console.log(hondaCivic.hasWheels);

A constructor function is used for my purpose. Every object created from the function Car using the word new, will have all the properties of vehicle.

Prototype VS __proto__

• __proto__ is the object that is used when looking to resolve methods. It is a property of the object pointing to its prototype.
• prototype is the object that is used in order to build __proto__ when an object is created with the word new. Prototype is available only on the constructor functions. It is a property of a Function object and it is the prototype of the objects created by that Function.

In other words, prototype is the blueprint for __proto__ to be created.

Where does the property belong

If we want to check if a property belongs to the vehicle(prototype) or the hondaCivic we can use the hasOwnProperty

console.log(vehicle.hasOwnProperty('hasWheels')); // true
console.log(vehicle.hasOwnProperty('model')); // false
console.log(vehicle.hasOwnProperty('numOfWheels')); // false

console.log(hondaCivic.hasOwnProperty('hasWheels')); // false
console.log(hondaCivic.hasOwnProperty('model')); // true
console.log(hondaCivic.hasOwnProperty('numOfWheels')); // true

It is important to menthion that hasOwnProperty is checking where the property was declared, not where we can access it. For example hasWheels belongs to vehicle but can be accessed from hondaCivic.

Crossbrowser Support

Older browsers do not support Object.create, but if you want your code to run on those browsers, then you can use polyfills. It is code that provides additional functionalities not supported by older browsers. In other words it is a browser fallback, made in JavaScript.

Let’s see a way of using Object.create in older browsers using polyfills:

if (!Object.create) { // check if the Object.create is supported
   Object.create = function (o) { // add this function to the global    object — with parameter o object
   if (arguments.length > 1) {
      throw new Error(‘Object.create implementation’
 + ‘ only accepts the first parameter.’);
   }
   function F() {} // create empty function
   F.prototype = o; // set the prototype
   return new F();
   };
}