No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

ES6: clases

12/35
Recursos

Aportes 19

Preguntas 2

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Reg铆strate o inicia sesi贸n para participar.

鉃★笍 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.

Me parece un crimen que ya no est茅n profes como el excelent铆simo profesor del bigote del curso de "introducci贸n al pensamiento computacional con Python" ese man se rifaba unas explicaciones tan pero tan claras. A estas explicaciones les hace falta profundizar en absolutamente todo.

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 鈥楶epe鈥 en vez de llamar el objeto 鈥榞ndx鈥.

  • 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 鈥榩epe鈥 a partir de la clase user, y se llama a la funci贸n greeting dentro de nuestro objeto 鈥榩epe鈥. En consola tenemos el 鈥楬ello鈥.

  • 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 鈥榥ew鈥, 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 鈥楶layer鈥 a nuestros personajes como 鈥榩layer1鈥 a Mario y a 鈥榩layer2鈥 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