What are prototypes in JavaScript and what are they for?

As an initial note, OOP isJavaScript based on prototypes and not classes. To see more information about prototype-based OOPvs. class-based OOPYou can visit the following link (in English).

Prototypes are a set of standards for integrating Object Oriented Programming in JavaScript. So, following these rules we should be able to create the different methodologies of Object Orientation:

• Inheritance
• encapsulation
• Abstraction
• Polymorphism

Of course, not all methodologies are available.

How can I use the prototypes?

ECMAScript 5

To create a class:

function Polygon(height, width){
  this.height = height;
  this.width = width;
}

To inherit from a base class:

function Square(side){
  this.prototype = Object.create(Polygon.prototype);
  Polygon.call(this, side, side);

  this.getArea = function(){
    return this.height * this.width;
  }
}

ECMAScript 6

To create a class:

class Polygon {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
}

To inherit from a base class:

class Square extends Polygon {
  constructor(side) {
    super(side, side);
  }
  getArea() {
    return this.height * this.width;
  }
}

With this we can create an instance with:

var square = new Square(5);
// debe imprimir 25
console.log(square.getArea());

Examples taken from Inheritance and the prototype chain .

Benefits

• Have high-level programming.
• Have different ways to create objects.
• Have inheritance in properties and methods.
• Basically the benefits of having prototypes JavaScriptis the possibility of using Object Oriented Programming as a Software methodology.

All objects in JavaScript have a special property called prototype, which is a reference to another object.

What is it useful for? Let's see an example:

var miObjeto = {
  foo: 5
}
console.log(miObjeto.foo); // 5

Here we create an object called miObjeto, define a property foowith the value of 5 and print the value of this variable. Clearly the result is 5, but what happens when the object doesn't have a variable foo? JavaScript will try to find it in prototypethis object's name, and so on until it finds it or reaches the end of the prototype chain.

This prototype chain allows us to simulate inheritance (remember that in JavaScript there is no class-based inheritance), if we want to add methods or properties to an object we can do it through the prototype.

Let us consider the following function Persona:

function Persona(nombre, edad) {
  this.nombre = nombre;
  this.edad = edad;
}

The prototype of this function is Persona.prototypeand we can add more methods or properties to it than it originally has:

Persona.prototype.toString = function() {
  return "[Persona: " + this.nombre + "]";
}

Persona.prototype.saludar = function() {
  console.log("Hola mi nombre es: " + this.nombre);
}

Now we are going to create an object pof type Personawith new, at this point the prototype of pis equal Persona.prototype:

var p = new Persona("John", 33);
console.log(p.nombre); // propiedad del objeto
console.log(p.toString()); // propiedad no encontrada directamente en el objeto

For this reason when calling the method toStringeven though it is not a direct method of p, JavaScript looks at the prototype of pand it does find it and everything works correctly.

At any time we can query the prototype of an object with Object.getPrototypeOf, for our particular case:

Object.getPrototypeOf(p) === Persona.prototype; // true

Lastly, it is important to note that there is a non-standard property for obtaining the prototype of an object called __proto__, however its use should be avoided.

Prototypes are objects that can have properties (functions and methods), they can also be used by other objects to inherit their properties, this is very useful to encapsulate and reuse the code, this gives you the possibility to adapt your codes to the user-oriented design. objects.

In JavaScript everything that isn't primitive types ( undefined, null, boolean, numberor string) are objects and can be used as prototypes to create other objects.