Object‐oriented programming (POO) - toviddfrei/javascript GitHub Wiki

En este caso concepto global programación, realizar una tarea, orientada, encaminada, dirigida hacia objetos. Nos quedaría saber que son los objetos, a no que lo tenemos que recordar, todo, absolutamente todo en JavaScript son objetos, eso ya lo hemos visto. Entonces que ocurre aquí, vale, tenemos que la programación, el desarrollo que actualmente sé realiza, va enfocada a la creación y gestión de los objetos por donde camina el flujo de datos.

Tenemos que tener presente que durante años, las versiones antiguas de JavaScript no tenían los componentes de programación orientada a objetos de clases e instanciación, y eso estuvo bien durante un tiempo. Pero las versiones más modernas de JavaScript han implementado clases.

En el mundo de la programación, la POO es un paradigma que ha ganado una gran popularidad en los últimos años debido a su capacidad para crear aplicaciones más robustas, flexibles y fáciles de mantener. Esta metodología de desarrollo se basa en la idea de que los programas se pueden organizar como una colección de objetos interconectados, cada uno con su propio conjunto de datos y funcionalidades.

Esta es una cita que he encontrado en un post bastante interesante, el enlace está aquí, quiero subrayar "Esta metodología", rompamos de una vez el miedo a la POO que así se denomina la programación orientada a objetos, es un método, todo método tiene un procedimiento, conozcamos ese procedimiento, ya que nos dice que podemos desarrollar aplicaciones más robustas, flexibles y fáciles de mantener. También quiero concentrar en este párrafo dos conceptos que tenemos que tener claros para poder aplicar esta metodología de desarrollo, que son las clases, que es la instanciación.

Lo primero que tengo ganas de conocer es, ¿qué es una clase?, a simple oído me suena a tipo de algo, estamos desarrollando, tipo de script, tipo de estructura, ¿clase de qué?, pues bien. Una clase es una estructura sintáctica que nos permite envolver un montón de cosas, atributos, funciones, multitud de expresiones y opciones o comportamientos son posibles dentro de esta estructura, el hecho de tenerlo todo localizable dentro de la clase nos proporciona una interfaz de desarrollo mucho más agradable.

Teniendo esto en mente, hemos avanzado un poquito, la programación orientada a objetos, se basa en las clases, ya conocemos que son las clases, por lo tanto, tenemos un pasito más adentro, vale hasta ahora conocemos el método, y la herramienta o mejor una de las herramientas, las clases, un poquito más entonces.

Las clases nos proporcionan la herramienta para comenzar con el procedimiento que establece el método de desarrollo que es la programación orientada a objetos, disculpar si lo repito tantas veces, lo hago así y de distintas formas para que el concepto vaya entrando, redactar el mismo contexto con diferente prisma me permite visualizarlo completamente, o será cosa mía, pero me va bien.

Creo que aunque a primera leída resulte lioso, algo áspero incluso, poco a poco desmenuzando el tema entrara y se abrirá esa puerta, tras la puerta existe el mundo actual, si JavaScript actualmente tiene capacidad de realizar una programación orientada a objetos, ya que ahora ya tiene clases y no tenemos que buscar atajos, y sabemos y entendemos lo que es que en JavaScript son todo objetos, a mí me suena a redoble de tambor, te vienes y abrimos la puerta. Pues a ello. Veamos una primera imagen de lo que es una clase y la explicamos a continuación.

class greeting{
    constructor({ great }){
        this.great = great;
    }
}

const newuser = new greeting({ great: 'Hi, world'});
console.log(newuser.great);
console.log(greeting.great);

Vamos por partes, parte superior, declaramos la clase, sintácticamente se aprecia claramente, tenemos la palabra reservada class, luego un nombre que define la clase, abrimos llaves y entramos al parque de atracciones, ojo lo primero que nos encontramos y es fundamental aprender que la clase necesita una función constructora, tal como se ve, esta función es una función normal declarada tradicionalmente, pero que realiza una tarea fundamental, provee de la estructura base de la clase, incluso también es una palabra reservada, yo diría una función reservada.

Vemos que le pasamos a la función un objeto utilizando la deconstrucción que tenemos referenciada unos párrafos anteriormente y es buena ocasión para utilizarlo, le pasamos un objeto, qué raro, no clases y objetos, jejejej, es broma, podemos empezar a ver el porqué de este método, creamos una clase y lo primero que hacemos es crear un objeto obligatoriamente dentro, la función constructora, que a su vez recibe otro objeto, que rellenamos con atributos, programación orientada a objetos. ¿Es evidente, no?

Vamos a la parte final, y vemos que podemos llamar a la clase tal cual podríamos llamar a una función. La segunda salida por consola es llamativa, vemos que dentro de la clase no reside los valores o datos, están en el nuevo objeto creado más abajo, y como se llama a esto de crear nuevos objetos y cargarlos con datos, pues instanciación, seguimos el procedimiento, creamos la clase e instancia mos los objetos, que no es más que utilizar el mismo mapa o formulario o plantilla que nos ofrece la clase y convertirlo en un objeto utilizable, no puedo decir físico porque no lo es, pero es como trasladar del plano encima la mesa a ver el objeto creado a través de la ventana. Espero que me haya expresado con claridad, la instanciación es la fase de construcción, diría yo. Y esta instancia se la denominaría instancia de greeting.

Jugamos un poco y pasamos a cosas más interesantes como los métodos de instancia, métodos estáticos, las herramientas, implementos y usar que son palabras también reservadas que nos permiten compartir funcionalidad entre clases. Vienen cositas divertidas.

class useradm{
    constructor({user}){
        this.user = user;
        this.user = this.user.toUpperCase();
    }
}

class userguest{
    constructor({user}){
        this.user = user;
    }
}

function userselect(name, type){
    if(name){
        if(type === 'adm'){
            const newadmin = new useradm({user: name});
            console.log('Add new administrator user : ' + newadmin.user);
            return this.newadmin;
        }else{
            const newguest = new userguest({user: name});
            console.log('Add new guest user : ' + newguest.user);
            return this.newguest;
        }
    }
}

userselect('Daniel');
userselect('Dani');
userselect('danielmm', 'adm');

Para un rato creo que muestra lo que quiero expresar, un par de clases, una función, un par de condicionales, y a ponernos a prueba, podemos sacar alguna conclusión, las clases son como las máquinas de hacer réplicas, he creado instancias de tres objetos nuevos, dos invitados y un administrador, dirigiendo el flujo tal como deseaba, en este sentido lo único que debo recordar los ámbitos, contexto de funcionamiento son fundamentales tenerlos claros, clarísimos,

Seguimos un poco más, entonces hemos comentado que dentro de la clase podemos incluir, funciones, variables, y algo con lo que trabajaremos a menudo son los metodos de instancia que si recordamos un metodo es una funcion dentro de otro funcion, podriamos resumir rapidamente, entonces. Si construimos un metodo de una clase y realizamos la instanciacion del metodo que estamos haciendo, veamoslo.

class usertype{
    constructor({user, type = 'guest'}){
        this.user = user;
        this.type = type;
    }

    formateduser(){
        console.log(`${this.user}, ${this.type.toUpperCase()}`);
    }
}

const newadmin = new usertype({user: 'Daniel', type: 'adm'});
const newguest = new usertype({user: 'Dani'});

console.log('Add new administrator user : ' + newadmin.user + newadmin.type);
console.log('Add new guest user : ' + newguest.user + newguest.type);
newadmin.formateduser();
newguest.formateduser();
console.log(newadmin);
console.log(newguest);

Hemos cambiado un poco el ejemplo, podemos apreciar que hemos quitado la función que creaba o instancia ba los nuevos objetos y los llamamos a nivel global del nodo, recordemos, a su vez hemos eliminado una de nuestras clases, y hemos pasado un parámetro predefinido a la función constructor, hemos creado una segunda variable en la clase, dentro de la función constructora, por lo tanto, toda la instancia de la clase usertype tendrán dos parámetros a pasar, un obligatorio, el user y otro opcional, el type de no pasarlo se aplica el predeterminado en este caso guest, tal como apreciamos en el retorno.

Aparte y es por lo que hemos llegado hasta aquí, hemos creado justo debajo un método de instancia, lo comentamos una función, dentro de una función se denomina método el método formateduser(), lo podemos llamar junto a los nuevos objetos y realizara el comportamiento definido dentro del método, creo que es apreciable, el método de instancia maneja las variables user y type, o vienen dadas por la instanciacion del objeto o aplica la predeterminada, una vez tiene las dos variables aplica el método llamado.

Un detalle muy importante y pasamos a la parte final que es cuando queremos hacer nuestros métodos estáticos. El detalle que quiero que aparecemos en el retorno de las últimas dos consolas, llamamos a los nuevos objetos, la clase los vuelve a crear, digamos apretamos un botón, marcamos unas opciones y la máquina nos devuelve un objeto completo, tal cual una máquina de vending, elijo el producto, marco la clave, introduzco el valor, espero, la máquina me devuelve el objeto, en este caso elegimos nueva variable, denominamos la variable, introducimos los pares clave-valor, llamamos al nuevo objeto y la máquina lo devuelve, lo que quiero decir no sé si ha quedado claro, que tenemos dos partes fundamentales, los nuevos objetos que queremos instancia con los datos, clave pares valores necesarios y por otra la clase que es la máquina, los ponemos a funcionar juntos y los retornan nuevos objetos utilizables.

Ahora sí, seguimos.

class usertype{
    constructor({user, type = 'guest'}){
        this.user = user;
        this.type = type;
    }

    formateduser(){
        console.log(`${this.user}, ${this.type.toUpperCase()}`);
    }
    
    static formateduserstatic(){
        console.log(`${this.type}, ${this.user.toUpperCase()}`);
    }
}

const newadmin = new usertype({user: 'Daniel', type: 'adm'});
const newguest = new usertype({user: 'Dani'});

console.log('Add new administrator user : ' + newadmin.user + newadmin.type);
console.log('Add new guest user : ' + newguest.user + newguest.type);
newadmin.formateduser();
newguest.formateduser();
console.log(newadmin);
console.log(newguest);
//newadmin.formateduserstatic(); // TypeError: newadmin.formateduserstatic is not a function
//newguest.formateduserstatic(); // TypeError: newadmin.formateduserstatic is not a function

UFF me retorna un TypeError. Vale hay que grabárselo en la memoria porque los métodos estáticos difieren bastante de los métodos de instancia de clases, lo primero un método estático, no interactúa con la clase, mapea el objeto ya instancia do o creado. Tenemos que tener claro cuando creamos un método estático que sea necesario para el uso aunque sea a nivel global de la clase, si no es recomendable y es una buena práctica dejarlo fuera de la clase, incluso hacer un módulo auxiliar aparte, hay una máxima con las clases y es que solo debe tener una única tarea que realizar, por lo tanto, métodos estáticos que no necesitan o no son necesarios dentro de la clase, hay que dejarlos fuera y respetar la máxima. Veamos como retornar esos métodos estáticos.

class usertype{
    constructor({user, type = 'guest'}){
        this.user = user;
        this.type = type;
    }

    formateduser(){
        console.log(`${this.user}, ${this.type.toUpperCase()}`);
    }
    
    static formateduserstatic(usertype){
        console.log(usertype.type.toUpperCase() + ', ' + usertype.user);
    }
}

const newadmin = new usertype({user: 'Daniel', type: 'adm'});
const newguest = new usertype({user: 'Dani'});

console.log('Add new administrator user : ' + newadmin.user + newadmin.type);
console.log('Add new guest user : ' + newguest.user + newguest.type);
newadmin.formateduser();
newguest.formateduser();
console.log(newadmin);
console.log(newguest);
usertype.formateduserstatic(newadmin);
usertype.formateduserstatic(newguest);

/*output
Add new administrator user : Danieladm
Add new guest user : Daniguest
Daniel, ADM
Dani, GUEST
usertype { user: 'Daniel', type: 'adm' }
usertype { user: 'Dani', type: 'guest' }
ADM, Daniel
GUEST, Dani
*/

Creo que está visto, le decimos a la clase que utilizamos su método estático pasándole el objeto ya creado, si nos percatamos cuando creamos el método estático y queremos tomar valores del objeto, tenemos que pasarle la clase completa como parámetro para poder disponer de este flujo de datos. Estos conceptos son importantísimos, ya que lo que viene los veremos mucho, estamos llegando a zonas ya de comenzar a sentar una base potente para comenzar con el desarrollo de nuestras aplicaciones y en breve tomaremos contacto con macros que utilizan el JavaScript moderno, combinando un montón de programación orientada a objetos, y ahora mismo tenemos la base en nuestras manos, a practicar, a practicar, a practicar. Ánimo.