classical inheritance != prototypal inheritance

If you don’t understand prototypes, you don’t understand JavaScript.

Cuando utilicé por primera vez Javascript, creí que había entrado a la dimensión desconocida, un mundo de terror donde sólo los mejores científicos podrían entender la lógica detrás de las líneas de códigos que realizaban una sencilla tarea como la de abrir o cerrar un menú. Con la llegada de Jquery creía que no debería de preocuparme por entender el lío de javascript, ¿acaso sería importante aprender algo más allá de seleccionar DOM? Qué equivocado estaba.

Javascript es un lenguaje incomprendido, el cual muchas personas han atacado ferozmente y han decidido dejarlo por la paz. Hoy en día es uno de los lenguajes mas usado, y es que afrontémoslo, la web está dominando, cada vez son mas pocas las aplicaciones de escritorio que salen a la luz, la mayoría de ellas son clientes de escritorio de un sitio de internet, eso sin mencionar que ahora podemos crear aplicaciones de escritorio con javascript, incluso las móviles, programar robots y casi todo lo que nos podamos imaginar.

Javascript está devorando al mundo, y gran parte de su amor-odio se debe al desconocimiento de su núcleo. Javascript es un lenguaje de programación basada en prototipos, que a su vez es un estilo de programación orientada a objetos en los que la reutilización de comportamientos se realiza a través de un proceso de una delegación conocida como “prototype chain”.

En la clásica herencia de clases, las instancias heredan de una clase, creando una relación sub-clase. En la herencia de prototipos, las instancias heredan de otras instancias, usando delegación de prototipos se apunta el prototipo a otro objeto, algo que Kyle Simpson llama Objects Linking to Other Objects, o OLOO pa’ los cuates.

Wow, con ese texto pude ahorrarme unos años arduos de entender javascript.

Prototype chains

Todos los objetos en javascript tienen un prototype. Cuando un objeto hace una llamada a una propiedad, javascript busca hasta encontrar -o no- dicha propiedad en una secuencia finita de prototypes. El prototype de un objeto es referenciada por la propiedad interna `proto.

var person = {
  name: "Ryu",
  dob: "7-21-1964"
};

A basic object with a prototype A basic object with a prototype.

person prototype tiene las propiedades de Object, que es el último lugar al que el prototype chain llegará a buscar.

var woof = {
  sound: "woof",
  makeSound: function(){
    return this.name + " goes " + this.sound
  }
};

var dog = {
  name: "Hachiko",
  __proto__: woof
};

dog.makeSound(); // Hachiko goes woof

En éste ejemplo podemos ver que el objeto dog accede al método makeSound que está definido en el objeto woof. Esto se logra de la siguiente manera:

Prototype chain Prototype chain.

En ES5 tenemos Object.create para realizar lo mismo, pero hay que recordar que ES6 está a la vuelta de la esquina.

var dog = Object.create(woof, {name: {value: "Hachiko"} });

Constructor

Existe otra manera de realizar lo anterior y es conocida como constructor, quien automáticamente inicia el prototype para los objetos creados. Éste prototype es almacenado en la propiedad ConstructorFunction.prototype. Para ello, se requiere del operador new.

function Saiyajin(tail){
  this.tail = tail;
  this.ki = 0;
}

Saiyajin.prototype = {
  setKi: function(ki){
    this.ki = ki
  }
}

var goku = new Saiyajin(false);
// goku es un objeto con las propiedades "tail" y "ki".
// goku.[[Prototype]] es el valor de Saiyajin.prototype cuando "new Saiyajin()" se ejecuta.

goku.setKi("It's Over 9000!"); // Saiyajin {tail: false, ki: "It's Over 9000!"}

Constructor Representación de un Constructor y su OLOO.

Conclusión

Javascript es un estilo de programación orientada a objetos en el cual los objetos no son creados mediante la instanciación de clases sino mediante la clonación de otros objetos. Debemos respetar Javascript y conocerlo a fondo, muchos desarrolladores escapan este tipo de cosas y muchos otros prefieren explicarlo como otro lenguaje basado en clases. La mayoría de los tutoriales comienza con ese enfoque -incluso me fue un tanto difícil entender los tutoriales de mozilla sobre éste asunto-, pero no hay que ser como la mayoría, ya que Javascript está deborando al mundo… así que no dejes que te debore a ti también.

Nos leemos!