Crear clases en Javascript

En este post veremos como crear clases en javascript de forma óptima para su posterior uso

Después de escribir sobre si javascript era el futuro se me ocurrió que sería buena idea ampliar los conocimientos de Javascript mediante algunos escritos.

Javascript el lenguaje prototipado

Antes de empezar me gustaría aclarar este punto que a muchos se les escapa y es tan importante conocer.

Javascript no es un lenguaje orientado a objetos, es un lenguaje orientado a prototipos(1).
¿Y eso que significa?
Bueno, un lenguaje orientado a objetos utiliza clases, las clases son objetos, cuando se utiliza esa clase se crea una instancia de ese objeto.

Sin embargo, un lenguaje prototipado como javascript no hace diferencias entre instancias y objetos.
En javascript una instancia de un objeto es un objeto en si mismo.

Este objeto tiene un item llamado prototype el cual contiene una referencia a su objeto padre o al esquema de su definición (un prototipo de lo que ahora es el nuevo objeto vamos..)

Si lo piensas unos segundos te das cuenta que un lenguaje prototipado como javascript tiene mucho más potencial que un lenguaje orientado a objetos.

Si la instancia es un objeto en si mismo esto significa que puede crear nuevos métodos que su clase no tenía en un principio y nuevas propiedades (algo impensable en un sistema OO).

¿Porqué es importante esta diferencia?

La diferencia es importante a la hora de asignar propiedades y métodos al objeto.
Si tenemos esta clase:

var Persona = function(nombre) {
    this.nombre = nombre;
}

Y queremos agregar un nuevo método al objeto, lo haremos así:

Persona.elmetodo = function() { console.log('nuevo metodo del objeto'); }

Sin embargo, si lo que queremos hacer es agregar el método también a las nuevas instancias lo haremos de la siguiente forma:

Persona.prototype.metodo = function() { console.log('metodo de instancia'); }

Nota: si esto no queda claro lo explicaré con un poco más de detalle más adelante.

Definir el constructor

Como ya sabreis, javascript puede almacenar objetos dentro de variables. Así que utilizaremos esa característica para crear y almacenar un objeto.

Existen varias formas de crear un objeto en javascript, pero esta es con la que me siento más cómodo a la hora de trabajar.

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

Con el código anterior hemos declarado el constructor de la clase, a este constructor se le deben pasar tres parámetros, el nombre, la edad y el sexo.

Al constructor lo llamamos de la siguiente forma

var Eve = new Persona('eve', 18, 'mujer');

Con la línea anterior hemos creado un nuevo objeto con el prototype de Persona.

Métodos del objeto prototype

Si quisiéramos agregar un método a Persona que se pudiera utilizar en todos los objetos generados a partir de este, usaríamos prototype de la siguiente forma

Persona.prototype.get = function(dato) {
	console.log( this[dato] );
}

Y lo llamaríamos así:

Eve.get('nombre'); // return 'eve'

Métodos sin prototype

Ahora supongamos que queremos tener un método que no se propague por las instancias.
Podríamos, por ejemplo, querer un contador para saber cuantos objetos se crearon a partir de Persona.
Este método no nos interesa que se propague a través de sus métodos.

Persona.getCount = function() {
	console.log( this.counter );
}

Note que en esta ocasión no hemos utilizado prototype.

Este es el resultado de las diferentes llamadas a getCount

Persona.getCount(); //return 1
Eve.get('counter'); // return undefined
Eve.getCount(); //return err

Lo mismo se aplica a las propiedades del objeto, así que modifiqué el código para que funcionase el contador de la siguiente forma

var Persona = function(nombre, edad, sexo) {
	this.nombre = nombre;
	this.edad = edad;
	this.sexo = sexo;
	Persona.counter++;
}
Persona.counter = 0;

Si queréis revisar el código con mayor atención lo subí a mi repositorio de github donde se aprecia con mayor claridad el código y su uso.

Notas

(1) Lectura recomendada Lenguajes basados en clases vs basados en prototipos


Así nos han encontrado!

  • clases en javascript
  • crear clases en javascript
  • crear una clase en javascript
  • clases javascript

One Response to Crear clases en Javascript

  1. seo 10 dice:

    Excelente articulo, pero estoy ver el contenido en github y no puedo.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" cssfile="">