Inheritance in javascript with prototypes


I wanted to know what are the differences between prototype and __proto__ , in which cases each one is used, how inheritance works and what good practices would be by creating and using objects in javascript.

asked by MatiEzelQ 10.10.2016 в 02:02

2 answers


First of all we must understand the difference between one and another thing. The prototype is only present in functions, while the __proto__ is present in all the objects including the functions. Additionally, it must be understood that the __proto__ works as a reference and not as an instance, that is to say that for purposes of working in some object orientation all the objects that you add the object __proto__ will be linked to it. To show a button:

// Implementacion con __proto__
let Humano = {
  edad: 0,
  tipo_cabello: 'rizado'
let persona1 = {
  nombre: 'Juan'
// Delegando objeto, esto no es una instanciacion
Object.setPrototypeOf(persona1, Humano);
// Ahora puedes hacer
-> 0
// Pero lo que obtienes es esto a cambio
Humano.edad = 1;
-> 1
// Porque persona1 solo tiene como __proto__ (objeto base) a Humano
-> Object {edad: 0, tipo_cabello: "rizado"}

Different to how the prototype works:

// Crea una clase por medio de una funcion
function Perro() {}
Dog.prototype.ladrido = 'ruff';
Dog.prototype.ladrar = function() { console.log(this.ladrido) };
// Instancia esta clase
let doggie = new Perro();
let duke = new Perro();
// Ahora puedes hacer uso de la clase
-> 'ruff'
// Y si obtienes una instancia
doggie.ladrido = 'atchu';
-> 'atchu'
-> 'ruff'

The correct implementation of classes and instances would be through functions and the use of new to create the new instances. I recommend you see the following:

answered by 11.10.2016 в 19:47

__proto__ is the reference to the prototype of the object.

prototype is the reference to the prototype that any object created with that function will have.

var Animal = function () {};
var perro = new Animal();

// Modifica el prototipo de perro.
perro.__proto__.sonido = 'guau'; 

// Modifica el prototipo de los objetos creados con Animal.
Animal.prototype.hablar = function () { console.log(this.sonido); };

perro.hablar(); // Muestra 'guau' en la consola.
answered by 11.10.2016 в 20:19