ES6: clases

➡️ Pienso que es IMPORTANTE no frustrarse si no se comprenden bien estos conceptos de un inicio, compañeros.

• Al tener un sistema funcional y completo es donde se utilizan ya estas estructuras de código para poder manejar datos reales y pasarlos a bases de datos. Yo hasta ese entonces fue donde terminé de comprender y todo me hizo sentido 👀🤓✅
• Por supuesto, investiga más por tu cuenta sobre POO y busca ejemplos de aplicaciones en la vida real. También cuáles son sus 4 principios:

1. Abstracción
2. Encapsulamiento
3. Herencia
4. Polimorfismo

Relajate, todo va poco a poco, no te frustres y tampoco juzguemos a Óscar. A lo mejor en otro curso se puede hacer más énfasis en que consiste cada cosa. Recuerda, acá vemos que sucedió en cada versión de EcmaScript, es lo principal.

Voy a dejar aquí una breve explicación de como yo lo logre entender, mas sin embargo si me equivoco en algo pido de antemano disculpas.

• En palabras sencillas, una clase es un plantilla para crear objetos con sus mismos atributos y métodos(atributos se refieren en el código como las variables, y los métodos como las funciones; todo esto dentro del objeto).

Como ejemplo podemos visualizar las Clases, como moldes para hacer galletas y sus objetos como las galletas ya listas para su consumo. Aunque debido a su molde (clase) todas las galletas (objeto), tendrían la misma forma cada galleta puede tener gomitas, otras crema, entre muchas otras, esto de les podría llamar los atributos de nuestros objetos (galletas).

• Una INSTANCIA de una CLASE: se refiere al objeto creado a partir de la clase.

• La sintaxis que utiliza la clase es la siguiente :

//Se declara la clase:

class NombredelaClase {
    //atributos y metodos
}

//Se crea una instancia (objeto), de la clase:

const NuevoObjeto = new NombredelaClase();

El profe Oscar inicia desde los métodos(una función), para explicarnos como crear la instancia (objeto) de la clase User(molde), de la siguiente manera:

class User {
    //Metodos
    greeting(){
        return 'Hello';
    }
}; 

• El método greeting es una función, para métodos prácticos vamos a utilizar el nombre ‘Pepe’ en vez de llamar el objeto ‘gndx’.

• Se crea el objeto a partir de la clase User y se llama el método para mostrarla en consola de la siguiente manera:

const pepe = new User();
console.log(pepe.greeting()); // Hello

• Se declara el nuevo objeto ‘pepe’ a partir de la clase user, y se llama a la función greeting dentro de nuestro objeto ‘pepe’. En consola tenemos el ‘Hello’.

• Cuando se refiere a la herencia, en este caso de las clases, significa que la clase puede tener varios objetos de diferente nombre pero con los mismos atributos y métodos de la misma.

• La palabra reservada ‘new’, es un constructor, que sirve para crear objetos personalizados.

• El this, básicamente en palabras mas sencillas es decirle a tu código que cuando le escribes this, es en el contexto, llámese dentro de una función, dentro de un objeto, que de este mismo requieras. En las clases no es lo mismo traer la asignación de un atributo del padre (molde), que la asignación de atributo de un hijo (galletas), aunque tengan un mismo atributo.

En un ejemplo mas practico vamos a recrear un poco un juego (Mario Bros) y vamos a crear con una clase ‘Player’ a nuestros personajes como ‘player1’ a Mario y a ‘player2’ como a Luigi. Vamos tomar como atributos nombre y colorSombrero, por ahora, y el método de saludar.

class Player {
    constructor(nombre, colorSombrero){
        //atributos con su contexto
        this.nombre = nombre;
        this.colorSombrero = colorSombrero;
    }
    //Metodos
    saludar(){
        return `Hola soy ${this.nombre} y mi sombrero es ${this.colorSombrero}`;
    }
}
//Creacion de jugadores (Objetos)

let player1 = new Player('Mario','Rojo');
let player2 = new Player('Luigi', 'Verde');

console.log(player1);//Player {nombre: 'Mario', colorSombrero: 'Rojo'}
console.log(player1);////Player {nombre: 'Luigi', colorSombrero: 'Verde'}

//Llamar metodos de los jugadores (Objetos)

console.log(player1.saludar()); // Hola soy Mario y mi sombrero es Rojo

• Los metodos Get y Set nos permiten tener acceso a leer o modificar el atributo de un objeto. Siendo Get, para mostrar el nombre del atributo y Set, para modificar ese atributo.En el ejemplo del juego:

class Player {
    constructor(nombre, colorSombrero){
        this.nombre = nombre;
        this.colorSombrero = colorSombrero;
    }
    //Metodos
    saludar(){
        return `Hola soy ${this.nombre} y mi sombrero es ${this.colorSombrero}`;
    }
    get nombre(){
        return this.nombre;
    }
    set nombre(nuevoNombre){
        this.nombre = nuevoNombre;
    }
}

//GET
console.log(player1.nombre); // Mario
//SET 
player1.nombre = 'Alberto';
console.log(player1.nombre);// Alberto

Cabe destacar que parte de información aquí mencionada la obtuve de otras fuentes y que si desean les puedo dejar.

Algo interesante que noté - NO se requieren los paréntesis para ejecutar los métodos getters & setters de una clase. 🫣

Esta clase es difícil de entender si no se tienen unas bases teóricas sobre la Programación Orientada a Objetos y sobre aspectos de JavaScript como el this 😰 Intentaré definir estos elementos según lo que conozco para crear el concepto de lo que son las clases para quienes no lo pudieron entender bien:
ㅤ
Comencemos por el aspecto teórico:
ㅤ

• Clases: Es una plantilla. Una definición genérica de algo que tiene atributos (datos/variables) y métodos (acciones/funciones) y desde la cual se pueden crear objetos.
• Objetos: Un elemento real que fue creada con base en una clase (plantilla) y que hereda (contiene) sus atributos y métodos.
  ㅤ

¿Lo vemos con un ejemplo?:
Tenemos una clase Animal que tiene como atributos: especie, edad, patas y tiene como métodos: dormir, comer, caminar. A partir de esa clase genérica podemos instanciar objetos de ese tipo, como los siguientes:
ㅤ

• Objeto perro: especie: canino, edad: 3, patas: 4. Puede dormir, comer y caminar.
• Objeto paloma: especie: ave, edad: 1, patas: 2. Puede dormir, comer y caminar.
• Objeto gato: especie: felino, edad: 2, patas: 4. Puede dormir, comer y caminar.
  ㅤ
  Estos tres objetos fueron creados con base en la clase Animal (a esto se le llama instanciar un objeto a partir de una clase), y por ende, cada uno es un objeto de tipo Animal y cada uno tiene los atributos y métodos definidos en la clase.

ㅤ
Ahora, a nivel más técnico, utilizamos los siguientes conceptos:
ㅤ

• Constructor: Es un método que contiene una serie de instrucciones que se encargan de inicializar un objeto cuando es instanciado a partir de esa clase. Básicamente, asigna los valores de los atributos que le enviemos a ese objeto nuevo. Es una función que se ejecuta automáticamente.
• Getter y Setter: Son funciones sencillas de entender: obtener el valor de un atributo o establecerlo. Se crean de esta manera por un concepto de la POO denominado encapsulamiento, que consiste, entre otras cosas, en limitar el acceso a las clases para tener mayor control sobre ellas.
• This: Con este objeto de contexto hacemos referencia al propio objeto que se está instanciando y no a la clase.
  ㅤ
  Llevemos entonces el ejemplo de los animales a JavaScript para poder aterrizar todos estos conceptos teóricos de las clases:

// Declaración de la clase Animal
class Animal {

	// Constructor: le enviamos a la clase los valores para los atributos del nuevo objeto (como argumentos) y el constructor se encarga de asignarlos:
	// (Recordar: this hace referencia al objeto).
	constructor(especie, edad, patas) {
		this.especie = especie; // Asignar atributo especie al objeto
		this.edad = edad; // Asignar atributo edad al objeto
		this.patas = patas; // Asignar atributo patas al objeto
	}

	// Métodos de la clase: pueden contener cualquier lógica.
	dormir() {
		return 'Zzzz';
	}

	comer() {
		return 'Yummy!';
	}

	caminar() {
		return '¡Caminando!, la la la';
	}

	// Getter y Setter (solo para edad para no alargar)
	// (Recordar: this hace referencia al objeto)
	get getEdad() {
		return this.edad;
	}

	set setEdad(newEdad) {
		this.edad= newEdad;
	}
}

// Ahora instanciemos los objetos: tendremos perro, paloma y gato como objetos de tipo Animal. Al enviar el valor de los atributos como argumentos, el constructor automáticamente los asigna al nuevo objeto.
const perro = new Animal('canino', 3, 4);
const paloma = new Animal('ave', 1, 2);
const gato = new Animal('felino', 2, 4);

// Podemos acceder a los métodos desde cada objeto:
perro.dormir();	// Retorna 'Zzzz'
paloma.comer(); // Retorna 'Yummy!'
gato.caminar(); // Retorna '¡Caminando!, la la la'

// Usamos los getter para obtener los valores de los atributos y los setters para reasignarlos.
perro.getEdad; // Retorna 3
gato.setEdad = 3; // Cambia su atributo edad a 3

ㅤ
Sé que es largo y tedioso por tanto aspecto teórico, pero cuando lo entiendes se abre todo un mundo de posibilidades al momento de programar (no solo con JavaScript). Espero que sea de ayuda 😉

Les daré la explicación magistral:

Una clase es un molde para galletas, la masa son los datos que y la galleta es el resultado de unir un molde con la masa.

Por nada.

No es por defender al profesor, pero mi recomendación personal es si no comprenden este vídeo, miren el curso de POO. Y regresen, en ese punto se hace más fácil según yo. Saludos y no me funen jajaja.

He tomado el curso de programcion orientada a objetos y ahi todo buen entendi con claridad pero aqui no eniendo absolutamente nada, solo decidi con este curso porque le profe Diego lo sugirio en el de Estrutura de datos con JS pero realmente siento que este curso es para personas expertas en js y no para novatos como nosotros que apenas entramos a este mundo y no se si continuar o dejarlo…

Para reforzar bien estos temas dejo por acá una referencia, espero sea de ayuda:
Prototipos
Herencia Prototípica
Clases y Herencia
Métodos estáticos, getters y setters

tu voz en 2x suena como la de Eugenio Derbez jaja

Esto de las clases y los métodos, tanto constructor como setters y getters lo entendí en el curso de Java dictado por la genia de Anahí Salgado, que tomé previamente por otra ruta que estoy siguiendo. De no ser por eso, creo que esta explicación no la hubiese entendido en absoluto. Coincido con los compañeros que opinan que falta profundizar en los conceptos que se presentan es esta clase.
Les dejo el link a la clase del curso de Java donde se explica esto de las clases y los métodos contructor, setters y getters:
Método constructor
Métodos Getters y Setters

en un curso de UDEMY por 79 MXN lo comprendí mejor XD

//Clases 
class User { //declaramos una clase
    constructor(name, age) {
        this.name = name,
        this.age = age
    }

    //metodos de la clase
    speak() {
        return "Hello";
    }

    greeting() {
        return `${this.speak()} ${this.name}`;
    }

    //Getters y Setters
    get uAge() {
        return this.age; //Obtenemos el valor de "Age"
    }
    
    set uAge(n) {
        this.age = n; //Seteamos un nuevo valor en "Age"
    }
}

const ana = new User("Ana", 25); //Creamos un nuevo usuario (instancia) que hereda de la clase User
console.log(ana.greeting()); //Accedemos al usuario ana y a su metodo Greeting
console.log(ana.uAge); //Accedemos al usuario ana y a su Getter
console.log(ana.uAge = 30); //Accedemos al usuario ana y a su Setter

CONSTRUCTOR: Es un metodo que permite crear unas condiciones de estado inicial de un objeto o instancia de clase.

Hare mi aporte con el glosario para que puedan tener claro la definicion de algunos conceptos:

• Una Clase es un modelo donde se escriben los principales rasgos que caracterizan un conjunto de objetos, por ejemplo , la clase ARBOL. Podria ser una clase dado que hay muchas clases de arboles.Otro ejemplo pordria ser MAMIFERO, pues existen varios tipos de mamiferos.

• Un Objeto es un ejemplo de la clase.En el caso de la clase ARBOL, un objeto seria un tipo especifico de arbol (por ejemplo,Cedro) y en el caso de MAMIFERO, un objeto seria un tipo especifico de mamifero (por ejemplo : Perro).

• Un Metodo es una funcion que forma parte integral de un objeto.Describe uno de los usos que se le puede dar a dicho objeto.

• Una Instancia de clase es un ejemplar perteneciente a una clase especifica y que ya se ha definido.

No se si seré yo, pero menudo picatoste de clase. Creo que no me he enterado de nada.

Para los que se pregunten, a todo esto se le llama programación orientada a objetos, hay cursos enteros de este tema, ya que es medio largo y tiene mucho de donde aprender. Si no entienden se los recomiendo! Ya que en serio se utiliza mucho en el mundo laboral.

En esta clase aprendí a usar los getters y setters por intuición que por explicación del profe, espero en futuras calses profundicen mas en los conceptos

Increíble lo de clases. Bien con la programación orientada a objetos owo