Programación para web: prototipos, módulos con import / export (7/8)

PROTOTIPOS

Para Svekis y van Putten[5] un prototipo es una propiedad creadora enganchada en los métodos de un objeto. "Cuando al crear una clase nada se ha especificado, la herencia se activa desde el prototipo object.prototype". El prototipo tiene la mayor jerarquía de herencia.

En el ejemplo de abajo se creó una clase y un método con una condicional de validación; y luego se crearon –se instanciaron– dos objetos, uno que cumpla la condición y otro que no la cumpla. En este ejemplo el prototipo no está evidente.

 // Se crea clase
class Encebollado {
// Se definen propiedades
constructor(pescado){
// Se definen valores de propiedades
this.pescado = pescado;
}
	// Método de la clase
	confirmar(){
	if (this.pescado == "albacora"){
	/* Sin este 'return' siempre se 
	mostrará un 'undefined' */
	return "Es Encebollado";
	} else {return "Eso NO es encebollado";}
	}
} // Cierra clase

// Genera objetos
var platoUno = new Encebollado("albacora");
console.log(platoUno.confirmar());
//-> Es Encebollado

// Genera objetos
var platoDos = new Encebollado("chochos");
console.log(platoDos.confirmar());
//-> Eso NO es encebollado

Así mismo, luego de haber definido la clase con iniciales propiedades y métodos, es posible usar prototype para luego agregar nuevas propiedades o métodos a la clase Encebollado. Y así finalmente invocar lo creado. En otras palabras, cada nuevo ingreso de propiedades o métodos desde prototype influenciará en todas y cada una de las futuras instancias de objetos desde esa clase:

/* Se usa 'prototype' para agregar nuevo método 
a la clase Encebollado */
Encebollado.prototype.nuevoMetodo = function(){
console.log("Rico encebollado de " + this.pescado);
};

/* Se usa 'prototype' para agregar nueva propiedad 
a la clase Encebollado */
//clase.prototype.nuevaPropiedad = nuevoValor;
Encebollado.prototype.bebida= "jugo de naranja";

/* Se invoca a la clase Encebollado, pero 
actualizada gracias al uso de 'prototype' */
var llamado = new Encebollado("albacora");
// Se invoca nueva propiedad
console.log("La bebida será de " + llamado.bebida);
//-> La bebida será de jugo de naranja

/* Se invoca al nuevo método agregado 
al usar 'prototype' */
llamado.nuevoMetodo();
//-> Rico encebollado de albacora

Para Svekis y van Putten[5] "los métodos y propiedades definidos vía prototype funcionarán como si hubieran sido definidos desde el inicio al crear la clase"

Sentencias import/export (con extensión nativa .mjs) para crear módulos en Javascript

Ejemplo de uso de sentencias import / export para creación de módulos en Javascript. Ojo con las extensiones [Module Js] .mjs de los archivos.

La extensión .mjs Esa es la forma nativa y directa de indicar que cada archivo es un módulo cargados asíncronamente. Los módulos con extensiones .mjs obligatoriamente usan las sentencias import, export. Mientras que la extensión .js usa require, module.exports

Las ventajas de usar módulos .mjs es que estos son evaluados una sola vez por el navegador (mientras que las extensiones .js se leen constantemente según aparezcan en el DOM).

También son cargados sin interrumpir el flujo de carga de los elementos del DOM, por eso decimos que los módulos .mjs se cargan asíncronamente. Finalmente, trabajar con módulos permite mantenerlos uno a uno sin afectar el resto de dependencias.