USANDO CLASES EN JAVASCRIPT

Usando Clases en JavaScript

Actualmente con las nuevas especificaciones EcmaScript 6 se introduce el manejo
de clases(class), estas brindan una mejora de sintaxis en la creación de objetos y
herencia basada en prototipos(Manera en la que JavaScript entiende POO), por lo
que el uso de clases en JavaScript(JS) no introducen nuevos conceptos solo
generan una sintaxis más clara en el manejo de prototipos.

Tomando lo anterior en cuenta podríamos decir que el manejo de prototipos dentro

de JS es un estilo de POO(Programación Orientada a Objetos), el objetivo de este
post no es profundizar en el manejo de POO dentro de JS por lo que si deseas
entender más sobre el tema te recomiendo revises el siguiente artículo.

Dicho lo anterior es importante mencionar que, si se mostraran algunas pequeñas

diferencias en el manejo de clases y prototipos, esto con la finalidad de tener un
punto de referencia.

Manos a la obra
Después de un poco de teoría empecemos con lo divertido, hablemos de código,
como se mencionó con anterioridad JS ya permite el manejo de clases lo que
conocemos como prototipos.

Declarando una clase

Al igual que otros lenguajes que usan POO en JS ya podemos utilizar la palabra
reservada class y esta también cuenta con un constructor, tal vez a primera vista no
podemos apreciar la mejora mencionada para tener un enfoque más claro
analicemos el siguiente ejemplo.
/**
* Declaracion de la clase.

1
 USANDO CLASES EN JAVASCRIPT

*/
class CalculadoraUsandoClass
{
/**
* Metodo principal para incializar nuestra clase.
*
* @return void.
*/
constructor()
{
//Variables que estaran disponibles en el scope global
//de la clase
this.valor_a = 0;
this.valor_b = 0;
console.log("Se genero la instancia de CalculadoraUsandoClass");
}//constructor

//=================================================//

/**
* Metodo para definir los valores de la clase
*
* @param Integer valor_a Primer valor.
* @param Integer valor_b Segundo valor.
*
* @return void.
*/
setValores(valor_a, valor_b)
{
this.valor_a = valor_a;
this.valor_b = valor_b;
console.log(`El valor de a es => ${this.valor_a}`);
console.log(`El valor de b es => ${this.valor_b}`);
}//setValores

}//CalculadoraUsandoClass

//========== Instanciando nuestro Objeto ==========//

/**
* Instancia de la clase CalculadoraUsandoClass.
*
* @type CalculadoraUsandoClass.
*/
const CALCULADORA_USANDO_CLASS = new CalculadoraUsandoClass();
//declaracion de los valores
CALCULADORA_USANDO_CLASS.setValores(50, 1000);

Como se muestra en ejemplo anterior se genera una clase utilizando las nuevas
especificaciones de EcmaScript 6, de entrada podemos apreciar.

1. Que nuestra clase se inicia utilizando class.

2. Se declara un método constructor.

3. Se declara el método setValores el cual ya está dentro de nuestra clase, dicho

método modifica las variables inicializadas en el constructor.

4. Se genera la instancia de nuestra clase usando new(Esto tambien es posible

usando prototipos).

5. Podemos ver que la nueva sintaxis es muy similar a la que presentan otros
lenguajes de programación que utilizan POO, por lo que puede ser entendida
con mayor facilidad por otros desarrolladores.

2
 USANDO CLASES EN JAVASCRIPT

Nota: Actualmente muchos FrameWork y Librerías de JS están utilizando las nuevas

características que ofrece EcmaScript6, una de las más populares por el momento
es ReactJS.

Todo suena muy bien, pero cual es punto de comparación para poder apreciar las
mejoras que ofrece el manejo de clases dentro de JS, analicemos el siguiente
ejemplo.

/**
* Declaracion de nuestro prototipo
* Esto tambien funcionara como un constructor
*/
function CalculadoraUsandoPrototype()
{
//Variables que estaran disponibles en el scope global
//del prototipo
this.valor_a = 0;
this.valor_b = 0;
console.log("Se genero la instancia de CalculadoraUsandoPrototype",);
}//CalculadoraUsandoPrototype

//=================================================//

/**
* Metodo para definir los valores del prototipo
*
* @param Integer valor_a Primer valor.
* @param Integer valor_b Segundo valor.
*
* @return void.
*/
CalculadoraUsandoPrototype.prototype.setValores = function(valor_a, valor_b)
{
this.valor_a = valor_a;
this.valor_b = valor_b;
console.log(`El valor de a es => ${this.valor_a}`);
console.log(`El valor de b es => ${this.valor_b}`);
}//setValores

//========== Instanciando nuestro Objeto ==========//

const CALCULADORA_USANDO_PROTOTYPE = new CalculadoraUsandoPrototype();

//declaracion de los valores

CALCULADORA_USANDO_PROTOTYPE.setValores(50, 1000);

Como se muestra en el ejemplo anterior podemos ver que se genera una codificación
similar a la del ejemplo anterior solo que en este destacan.

1. Se declara una función común y corriente la cual tomará el papel de prototipo y

tambien será el constructor.

2. Se declara un método setValores el cual para pertenecer a nuestro prototipo

tiene que llevar como prefijo
“[nombre_protitipo].prototype.[nombre_del_metodo]”, este prefijo siempre
tendrá que colocarse cuando se requiera generar un nuevo método.

3. Al igual que el ejemplo de clases se utiliza new para generar una instancia del
prototipo.

3
 USANDO CLASES EN JAVASCRIPT

4. El código puede ser comprendido por los desarrolladores que están muy
acostumbrados a la magia de JS, pero talvez no por terceros ya que de primera
vista no parece POO.

Hasta este punto podemos ver claramente muchas mejoras que nos brinda el manejo
de clases en JS pero por eso no subestimemos el manejo de prototipos ya que son
muy potentes si quieres ver un poco más de prototype puedes ver.

Utilizando herencia
Una de las grandes ventajas que ofrece POO es la herencia, prácticamente es tomar
métodos de otra clase e implementarlos en una clase nueva, con las nuevas
especificaciones de EcmaScript 6, facilita el manejo de la herencia prácticamente
podemos utilizar el todo poderoso extends, modifiquemos nuestro ejemplo pasado
para agregarle un nuevo método heredado.

/**
* Declaramos la clase suma de la cual
* extendera la CalculadoraUsandoClass.
*/
class SumaUsandoClass
{
/**
* Metodo principal para incializar nuestra clase.
*
* @return void.
*/
constructor()
{
console.log("Soy el consturctor de la clase SumaUsandoClass");
}//constructor

//=================================================//

/**
* Permite la suma de los valores que tiene la clase padre.
*
* @return void.
*/
getSuma()
{
let resultado = this.valor_a + this.valor_b;
console.log(`La suma de ${this.valor_a} + ${this.valor_b} = ${resultado}`);
}//getSuma
}//SumaUsandoClass

//=================================================//

/**
* Declaramos la clase y generamos una herencia de la
* clase SumaUsandoClass.
*/
class CalculadoraUsandoClass extends SumaUsandoClass
{
/**
* Metodo principal para incializar nuestra clase.
*
* @return void.
*/
constructor()
{
console.log("Se genero la instancia de CalculadoraUsandoClass");

//invocamos el constructor de la calse Suma

super();

4
 USANDO CLASES EN JAVASCRIPT

//Variables que estaran disponibles en el scope global

//de la clase
this.valor_a = 0;
this.valor_b = 0;
}//constructor

//=================================================//

/**
* Metodo para definir los valores de la clase
*
* @param Integer valor_a Primer valor.
* @param Integer valor_b Segundo valor.
*
* @return void.
*/
setValores(valor_a, valor_b)
{
this.valor_a = valor_a;
this.valor_b = valor_b;
console.log(`El valor de a es => ${this.valor_a}`);
console.log(`El valor de b es => ${this.valor_b}`);
}//setValores

}//CalculadoraUsandoClass

//========== Instanciando nuestro Objeto ==========//

/**
* Instancia de la clase CalculadoraUsandoClass.
*
* @type CalculadoraUsandoClass.
*/
const CALCULADORA_USANDO_CLASS = new CalculadoraUsandoClass();
//declaracion de los valores
CALCULADORA_USANDO_CLASS.setValores(50, 1000);
//invocamos el metodo que proviene de la clase suma
CALCULADORA_USANDO_CLASS.getSuma();

Como podemos ver en el ejemplo anterior estamos realizando una herencia,

constamos con una nueva clase “SumaUsandoClass” la cual contiene un método
“getSuma” que genera la suma de 2 valores, los cuales provienen de la clase
“CalculadoraUsandoClass”, tambien del código anterior podemos destacar.

1. Estamos utilizando extends para poder generar la herencia.

2. La clase hija “CalculadoraUsandoClass” contiene una nueva sentencia

llamada super la cual permite invocar el constructor de la clase padre
“SumaUsandoClass” cabe mencionar que la sentencia super siempre se tiene
que declarar antes de utilizar un this, super tambien permite invocar métodos de
la clase padre.

super.[Nombre_del_metodo_de_la_clase_padre]();

3. Al generar la instancia de la clase hija podemos acceder a los métodos de la clase

padre, por lo que podremos ejecutar “getSuma” sin que exista en la clase hija, de
igual manera la clase padre puede acceder a elementos de la clase hija y viceversa.

4.- Seguimos conservando un código similar al de otros lenguajes de programación

que implementan POO.

5
 USANDO CLASES EN JAVASCRIPT

Nuevamente para poder ver las mejoras obtenidas utilicemos el siguiente punto de
comparación.
/**
* Declaracion de nuestro prototipo
* Esto tambien funcionara como un constructor
*/
function SumaUsandoPrototype()
{
console.log("Soy el consturctor de la clase SumaUsandoClass");
}//SumaUsandoPrototype

//=================================================//

SumaUsandoPrototype.prototype.getSuma = function()
{
let resultado = this.valor_a + this.valor_b;
console.log(`La suma de ${this.valor_a} + ${this.valor_b} = ${resultado}`);
};

//=================================================//

/**
* Declaracion de nuestro prototipo
* Esto tambien funcionara como un constructor
*/
function CalculadoraUsandoPrototype()
{
//Esto es el llamado al constructor del prototipo
//SumaUsandoPrototype
SumaUsandoPrototype.call(this);
//Variables que estaran disponibles en el scope global
//del prototipo
this.valor_a = 0;
this.valor_b = 0;
console.log("Se genero la instancia de CalculadoraUsandoPrototype",);
}//CalculadoraUsandoPrototype

//Esto el el equibalente ah utilizar el extends de EcmaScript 6

CalculadoraUsandoPrototype.prototype = Object.create(SumaUsandoPrototype.prototype);

//=================================================//

/**
* Metodo para definir los valores del prototipo
*
* @param Integer valor_a Primer valor.
* @param Integer valor_b Segundo valor.
*
* @return void.
*/
CalculadoraUsandoPrototype.prototype.setValores = function(valor_a, valor_b)
{
this.valor_a = valor_a;
this.valor_b = valor_b;
console.log(`El valor de a es => ${this.valor_a}`);
console.log(`El valor de b es => ${this.valor_b}`);
}//setValores

//========== Instanciando nuestro Objeto ==========//

const CALCULADORA_USANDO_PROTOTYPE = new CalculadoraUsandoPrototype();

//declaracion de los valores

CALCULADORA_USANDO_PROTOTYPE.setValores(50, 1000);

//invocamos el metodo que proviene de la clase suma

CALCULADORA_USANDO_CLASS.getSuma();

Como se puede apreciar el manejo de la herencia utilizando prototipos es un poco

más compleja, el código anterior realiza exactamente los mismo que el ejemplo
donde utilizamos class, pero el código anterior consta de ciertos puntos de los cuales
podemos destacar.

6
 USANDO CLASES EN JAVASCRIPT

1. Para poder invocar el constructor del prototipo padre “ SumaUsandoPrototype”

se utiliza la sentencia call la cual llama a una función con un valor this asignado
y argumentos provistos de forma individual, ya no se está utilizando super.

2. Para poder crear la herencia tenemos que generar un Objeto

“SumaUsandoPrototype” el cual será asignado al scope de nuestro prototipo hijo
“SumaUsandoPrototype”.

3. Al instanciar nuestro prototipo ya podemos tener acceso a los métodos del

prototipo padre y viceversa.

Hasta este punto podemos ver muchas mejoras en el uso de clases sobre
los prototipos en JS, pero las clases aún presentan otras mejoras de las cuales
destacan.

get
Es una propiedad que nos permite ejecutar una función la cual se llamada cuando la
propiedad es requerida, otra de sus características es que no recibe parámetros,
prácticamente solo es para consulta.

set
Es una propiedad que permite ejecutar una función la cual se ejecutará para asignar
un valor, otra de sus características es que solo recibe un parámetro el cual es el
valor que será asignado.

static
Como en otros lenguajes de programación JS nos permite declarar un método
estático el cual puede ser accedido sin la necesidad de instanciar la clase.

Al parecer estos métodos son mágicos, pero la teoría no dice mucho por lo que
realizaremos un ejemplo básico para poder ver las propiedades explicada dichas en
acción.
/**
* Declaramos la clase y generamos una herencia de la
* clase SumaUsandoClass.
*/
class Calculadora
{
/**
* Metodo principal para incializar nuestra clase.
*
* @return void.
*/
constructor()
{
//Variables que estaran disponibles en el scope global
//de la clase
this.valor_a = 0;

7
 USANDO CLASES EN JAVASCRIPT

this.valor_b = 0;
}//constructor

//=================================================//

/**
* Permite asignar el valor para this.valor_a.
*
* @param Integer valor Valor a asignar.
*
* return void.
*/
set valorA(valor)
{
console.log(`Asignando el primer valor = ${valor}`);
this.valor_a = valor;
}//valorA

//=================================================//

/**
* Permite asignar el valor para this.valor_b.
*
* @param Integer valor Valor a asignar.
*
* return void.
*/
set valorB(valor)
{
console.log(`Asignando el primer valor = ${valor}`);
this.valor_b = valor;
}//valorB

//=================================================//

/**
* Permite conseguir la suma de unos valores datos.
*
* return integer.
*/
get suma()
{
let resultado = this.valor_a + this.valor_b;
return `La suma de ${this.valor_a} + ${this.valor_b} = ${resultado}`;
}//suma

//=================================================//

/**
* Realiza la multiplicacion de unos valores dados,
* Pra acceder ah este metodo no es necesario contar con una
* instancia de la clase.
*/
static multiplicacion(valor_a, valor_b)
{
let resultado = valor_a * valor_b;
return `La multiplicación de ${valor_a} * ${valor_b} = ${resultado}`;
}//multiplicacion

}//calcladora

//========== Ejecutando el metodo multiplicacion ==========//

//ejecutamos el metodo multiplicacion sin la necesidad de

//contar con una instancia de nuestra clase.
let multiplicacion = Calculadora.multiplicacion(9, 1000);
console.log(multiplicacion);

//========== Instanciando nuestro Objeto ==========//

const CALCULADORA = new Calculadora();

//Asignadmos el primer valor.

CALCULADORA.valorA = 98;

//Asignadmos el segundo valor.

CALCULADORA.valorB = 54;

//conseguimos la suma de los valores

let suma = CALCULADORA.suma;
console.log(suma);

8
 USANDO CLASES EN JAVASCRIPT

Como se puede ver en el ejemplo anterior, estamos haciendo usos de las

propiedades de las clases en JS, pero en el código existen algunas cosas curiosas.

1. Estamos utilizando get, set y static.

2. Para poder utilizar las propiedades comentadas dentro de nuestra clase

tendremos que seguir la siguiente sintaxis.

//Usando get
get [nombre_del_metodo](){}

//Usando set
set [nombre_del_metodo]([valor_a_asignar]){}

//Usando static
static [nombre_del_metodo](parametros){}

3. Para poder ejecutar los métodos que cuenten con las propiedades
mencionadas se utiliza la siguiente sintaxis.

//ejecutando un metodo con el prefijo static

[nombre_de_la_clase].[metodo]([parametros]);

//ejecutando un metodo con el prefijo set

//como se puede ver es similar ah la inicializacion de una variable
[nombre_de_la_instancia].[metodo] = [valor];

//Ejecutand un metodo con prefijo get

//como se puede ver es como si consultaramos una variable
[nombe_de_la_instancia].[metodo];

Extra: Podemos combinar las propiedades static con get o set.

Conclusión
Como podemos ver el manejo de clases en JS nos brinda muchas ventajas, pero
esto no quiere decir que los prototipos no cuenten con las propias, hay que recordar
que los prototipos es la manera con la se inicia el manejo de POO en JS.