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.

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 😉

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.

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.

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.

🚨 Veo que mucha gente tiene comentarios a acerca de que no entienden los temas o que el profesor los está dando muy rápido. Este curso no es para aprenderse a profundidad cada uno de los cambios de ECMA, sino para hacerles saber que existe, y la funcionalidad básica de cada uno. Cosas como las clases, las explican en el curso de POO de JavaScript. No se frustren. Y si tienen dudas póngalas en las preguntas para ayudarnos entre todos.

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

Sinceramente algunas personas no saben ni lo que están haciendo. Pretenden que en un curso expliquen todo a profundad cuando existen otros específicos para ello. Se llama “Curso de ECMAScript: HISTORIA Y VERSIONES…”. No van a aprender POO en una introducción xD

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…

12/35 ES6: Clases

Las clases son una forma de crear objetos y definir como se comportan. Las clases son una característica introducida en ECMAScript 6 que permite a los desarrolladores escribir código más legible y estructurado.

En terminos simples, una clase es como un plano o un modelo que define cómo se crea un objeto y cómo funciona. Es una plantilla para crear objeto que tienen propiedades y métodos en común.

Por ejemplo, si quisiera crear varios objetos que representan diferentes tipos de automóviles, podría definir una clase llamada Automovil que tenga propiedades como marca, modelo, año, etc. y métodos como arrancar, y detener. Luego podría crear varios objetos basasdos en esa clase, como un automóvil deportivo, un camión, un sedán, etc. y cada uno tendría sus propias propiedades y métodos específicos.

La sintaxis de las clases en ES6 es similar a la de otros lenguajes de programación orientados a objetos, como Java o C#. Para definir una clase, se utiliza la palabra reservada class, seguida del nombre de la clase y un par de llaves que contienen los métodos y propiedades de la clase.

class Automovil {
	constructor(marca, modelo, year) {
		this.marca = marca;
		this.modelo = modelo;
		this.year = year;
	}
	
	arrancar() {
		console.log("El automovil ha arrancado.");
	}
	detener() {
		console.log("El automovil se ha detenido.");
	}
}
let miAuto = newAutomovil("Ford", "Mustang", 2021);
miAuto.arracnar(); // Output: "El automovil ha arrancado."

En este ejemplo, la clase “ Automovil “ tiene un constructor que se ejecuta cuando se crea un nuevo objeto de la clase, y define las propiedades “marca”, “modelo” y “year”. También tiene dos métodos, “arrancar” y “detener”, que imprimen un mensaje en la consola cuando se llaman. Finalmente, se crea un obejto “miAuto” basado en la clase “Automovil” y se llama al método “arrancar”.

Las clases son una forma de crear plantillas para objetos que tienen propiedades y métodos en común, lo que permite a los desarrolladores escribir código más legible y estrucutrado.

siento que el profesor se esta llevando muchas criticas de gratis, el solo esta comentando brevemente los cambios y actualizaciones en js. el mismo titulo lo dice

Es un curso de INTRODUCCIÓN. Entiendan.

Los cursos específicos siguen después de este.

No se ofendan, pero no entiendo porque se frustran tanto con esta clase. No me puedo imaginar un programador que a estas alturas del siglo XXI NUNCA haya escuchado/leído/estudiado los conceptos básicos de programación Orientada a Objetos. En serio, si quieren ser devs, estudien un poco de POO, antes de criticar.
Además, es claro que el curso se llama: “Historia y versiones de JavaScript”. No es un curso específico de POO en JS, ni de Asincronismo en JS.
Si no entienden lo más básico de POO, en serio, no sigan este curso, y busquen un curso de POO. Por cierto, el curso de POO en JS con JuanDC está muy bueno y súper digerible.
Sólo una recomendación.

Código de la clase resumido:

class User {

        constructor(userName, userAge) {
                this.userName = userName;
                this.userAge = userAge;
        }

        greeting() {
                return `Hello ${this.userName}!`;
        }

        get _userAge() {
                return this.userAge;
        }

        set _userAge(age) {
                this.userAge = age;
        }
}

const pepito = new User('Pepito', 20);
console.log(pepito.greeting());
console.log(pepito._userAge); // 20
console.log(pepito._userAge = 16); // 16

const mike = new User('Mike', 24);
console.log(mike.greeting());
console.log(mike._userAge); // 24
console.log(mike._userAge = 33); // 33

Es muy complicado intentar explicar un tema tan amplio en una clase de 18 min, para poder entenderlo a profundidad se necesita saber como funcionan los objetos, instancias y metodos en js, los que no logran entenderlo a la primera es normal, y si se frustran tanto no pasa nada, solo estan tratando de mostrar algo general que implementaron en el lenguaje, para entenderlo mejor es recomendable esperar y ver el curso de POO…

ES6: clases

En ECMAScript 6, se introdujeron las clases, que son una forma más sencilla y estructurada de crear objetos y trabajar con la programación orientada a objetos en JavaScript.

Aquí tienes un resumen de cómo funcionan las clases en ES6:

1. Declaración de una clase:

   Puedes declarar una clase utilizando la sintaxis class. Aquí tienes un ejemplo básico:

   class Persona {
     constructor(nombre, edad) {
       this.nombre = nombre;
       this.edad = edad;
     }
   
     saludar() {
       console.log(`Hola, soy ${this.nombre} y tengo ${this.edad} años.`);
     }
   }
   

2. Constructor:

   El método constructor se utiliza para inicializar propiedades de la instancia cuando se crea un nuevo objeto a partir de la clase. Se llama automáticamente al crear un nuevo objeto con new.

3. Métodos:

   Puedes definir métodos dentro de la clase. Estos métodos son compartidos por todas las instancias creadas a partir de la clase.

4. Herencia:

   Las clases pueden heredar propiedades y métodos de otras clases utilizando la palabra clave extends. Aquí tienes un ejemplo:

   class Estudiante extends Persona {
     constructor(nombre, edad, grado) {
       super(nombre, edad);
       this.grado = grado;
     }
   
     estudiar() {
       console.log(`${this.nombre} está estudiando en el grado ${this.grado}.`);
     }
   }
   

   En este caso, la clase Estudiante hereda propiedades y métodos de la clase Persona.

5. Super:

   La palabra clave super se utiliza para llamar a los métodos del padre en la clase hija. En el ejemplo anterior, super(nombre, edad) llama al constructor de la clase padre Persona.

6. Getter y Setter:

   Puedes definir getters y setters utilizando las palabras clave get y set.

   class Rectangulo {
     constructor(ancho, altura) {
       this._ancho = ancho;
       this._altura = altura;
     }
   
     get area() {
       return this._ancho * this._altura;
     }
   
     set ancho(nuevoAncho) {
       if (nuevoAncho > 0) {
         this._ancho = nuevoAncho;
       }
     }
   }
   

   En este ejemplo, area es un getter y ancho es un setter.

7. Métodos estáticos:

   Los métodos estáticos son métodos que se llaman directamente en la clase, no en las instancias. Se definen utilizando la palabra clave static.

   class Utilidades {
     static sumar(a, b) {
       return a + b;
     }
   }
   
   const resultado = Utilidades.sumar(5, 3);
   

Estos son algunos conceptos básicos sobre cómo funcionan las clases en ECMAScript 6. Las clases proporcionan una forma más organizada y legible de trabajar con programación orientada a objetos en JavaScript.

Sigamos con el aprendizaje. 👨‍💻

no entendi para que es el Set y Get

Les dejo una descripcion para los que nunca hicieron el curso de programacion basica (el nuevo o el viejo), donde explican los conceptos.

//Hablaremos de los objetos, clases, metodos e instancias (para dudas o terminologia ve a one note)
/*
This= hace referencia al elemento padre que lo contiene
intancia = crear un nuevo objeto
metodo= funcion dentro del objeto
contructor= funcion qe se realiza inmediatamente al instanciar ( crear objeto)
clase= es el elemento padre
get= me trae el valor de un objeto, y set me reescribe el valor del objeto
*/


//Declarando una clase (osea el padre el molde de los objetos)
class User0 {};
// para instanciar una clase se usa:
const newUser01 = new User0();

//Ejemplo con 2 instancias y un metodo
class user {
    greetings(){
        return 'Metodo Saludar';
    }
};
const newUser = new user();
console.log(newUser.greetings());
const newUser1 = new user();
console.log(newUser1.greetings());


//
class user {
    //El constructor, costruye o ejecuta una funcion cuando estoy creando una instancia
    constructor(){
        console.log('Creando nuevo usuario');
    }
    greetings(){
        return 'Metodo saludar';
    }
}
const david = new user();
console.log(david.greetings());

//En este ejemplo con this, inicializamos una variable de una clase (de creacion), ademas usamos template literals


    class user {
        constructor(name){
            this.name = name;
        }
        //Añado metodos
        speak (){
            return 'Hoy saludamos a: ' ;
        }
        greeting(){
            //uso template literals
            return `${this.speak()} ${this.name}`;
        }
    }

    const jimena = new user('jimena');
    console.log(jimena.greeting());

    //Ejemplo con setter and getters, nos sive para llamar el valor de una variable dentro de un ubjeto creado

    class user {
        //constructor
        constructor(name, age){
            this.name = name;
            this.age = age;
        }
        //metods
        speak(){
            return 'Hola:' ;
        }
        greeting(){
            return `${this.speak()} ${this.name} su edad es : ${this.age}`;
        }
        //Añado los getters and setters
        get modifyAge() {
            return this.age;
        }
        set modifyAge(n){
            this.age = n;
        }
    }

    const maria = new user('Maria', 31.6);
    console.log(maria.greeting());
    //con get lo llamo para ver el valor
    console.log(maria.modifyAge);
    //con set lo 
    console.log(maria.modifyAge = 22);

En ECMAScript 6 (también conocido como ES6 o ES2015), se introdujo el concepto de clases en JavaScript. Las clases son una forma más intuitiva y orientada a objetos de crear objetos y trabajar con herencia en JavaScript.

Antes de ES6, JavaScript utilizaba una sintaxis basada en prototipos para implementar la herencia y la creación de objetos. Con la introducción de las clases en ES6, ahora tenemos una sintaxis más familiar y similar a otros lenguajes de programación orientados a objetos, como Java o C++.

Una clase en JavaScript es una plantilla para crear objetos que comparten propiedades y comportamientos comunes. Para definir una clase, utilizamos la palabra clave class, seguida del nombre de la clase y un bloque de código que contiene los miembros de la clase (propiedades y métodos).

Aquí hay un ejemplo básico de cómo se ve la sintaxis de una clase en ES6:

class Persona {
  constructor(nombre, edad) {
    this.nombre = nombre;
    this.edad = edad;
  }

  saludar() {
    console.log(`Hola, mi nombre es ${this.nombre} y tengo ${this.edad} años.`);
  }
}
const juanito = new Persona(`Juan David`, 23);
  console.log(juanito.saludar()); //Hola, mi nombre es Juan David y tengo 23 años.

En este ejemplo, creamos una clase llamada Persona. La clase tiene un constructor que se ejecuta cuando se crea una nueva instancia de la clase. El constructor acepta los parámetros nombre y edad y los asigna a las propiedades correspondientes (this.nombre y this.edad).

La clase también tiene un método llamado saludar(), que imprime un mensaje de saludo en la consola, utilizando los valores de las propiedades nombre y edad.

Para crear un objeto a partir de una clase, utilizamos la palabra clave new, seguida del nombre de la clase y los argumentos necesarios para el constructor. Aquí hay un ejemplo de cómo se crea un objeto `persona.

Me hizo recoradar lo que se hacia con las clases en java, constructor, getters , setter , y el toString , lo bueno que el ide lo genraba mediante unas opciones, el constructor que se se llama cuando se crea un obj de la clase, en php existe el metodo destruct se llama cuando el obj es eliminado , no se si existira en javascript.

Amigos veo que hay gente que se queja por que el docente no “explica adecuadamente”, no es que este explicando muy rapido o omita cosas, sucede que este curso solo es para mostrarnos un antes y un despues entre la versiones, sigan la ruta de cursos que plantea Platzi y no tomen cursos solo por tomarlos, veran que con bunas bases este curso es mas una especie de clase de historia de js.

Cree una clase que hace consultas de APIs con el método de fetch.
![](

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

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

aimedueleelcebrebro

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

hola vengo del futuro muchachos si quieren entender a bien esta clase les recomiendo ver el curso de Curso Básico de Programación Orientada a Objetos con JavaScript asi entenderan mucho mejor 😈😈😈😈😈😈😈😈😈
https://platzi.com/cursos/javascript-poo/
![](

)

Para esta clase creo que era mas recomendable poner como requisito ver el curso de POO para los que están perdidos

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

Changos, esto si no es tan básico jeje esto lo ví cuándo aprendí POO y protocolos en Swift.

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.

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

Una vez dominamos las bases de la programación y nuestro código va creciendo cada vez más, comprobaremos que las variables y funciones no suelen ser suficiente como para que nuestro código esté bien organizado y los mecanismos que tenemos a nuestro alcance quizás no resultan todo lo prácticos que deberían ser.

Tradicionalmente, Javascript no soportaba clases de forma nativa, pero en ES2015 (ECMAScript 6) se introdujo la posibilidad de usar clases simulando como se utilizan en otros lenguajes de programación. Internamente, Javascript traduce estas clases al sistema basado en prototipos que usa en realidad, sin embargo, los programadores no necesitarán saber como funcionan los prototipos, sino que les bastará con utilizar las clases a modo de azúcar sintáctico, es decir, un sistema que «endulza» la forma de trabajar para que sea más agradable y familiar.

✨🦄

Amigos a continuación les dejo un tutorial donde hablo acerca de las clases, los objetos que las mismas pueden formar y también sobre la diferencia con los objetos literales :3, pueden echarle un vistazo si la clase les pareció confusa:
Objeto Literal y Objeto de Clase en Javascript

En el siguiente ejemplo quise imitar el funcionamiento de una clase en caso tal de que sea una agencia de renta de carros y se tenga que tener metodos para mostrar cuando un carro estan rentandolo o cuando esta andando o se detiene.

class car {

    // constructor de el carro 

    constructor(marca, color, anio, kilometraje){
        this.marca = marca;
        this.color = color;
        this.anio = anio;
        this.kilometraje = kilometraje;
    }

    //Metodos getter and setter para las propiedades de la clase 
    get getMarca(){
        return this.marca
    }

    set setMarca(newMarca){
        this.marca = newMarca
    }

    get getColor(){
        return this.color
    }
    set setColor(newColor){
        this.color = newColor
    }


    get getAnio(){
        return this.anio
    }

    set setAnio(newAnio){
        this.anio = newAnio
    }


    get getKilometraje(){
        return this.kilometraje
    }


    set setKilometraje(newKIlometraje){
        this.kilometraje = newKIlometraje
    }


    // Metodos de la clase o funciones 

    rentar(){
        return console.log(`Usted esta rentando el carro ${this.marca} del año ${this.anio} de color ${this.color} con el kilometraje ${this.kilometraje} `)
    };

    andar(){
        return console.log(`El carro ${this.marca} esta andando`)
    };
    detenerse(){
        return console.log(`El carro ${this.marca} se detuvo`)
    };
    bloquearAlarma(){
        return console.log(`El carro ${this.marca} se bloqueo`)
    };
}


const carro1 = new car('Kia', 'Azul', 2023, 500);
const carro2 = new car('BMW', 'Blanco', 2005, 10000);
const carro3 = new car('Chevrolet', 'Negro', 2020, 2000);


carro1.rentar();
carro1.andar();



carro2.detenerse();

carro3.bloquearAlarma();

Con esta imagen es que yo logre entender las clases y como funcionaban en su momento.

Esta clase deja más dudas que conceptos. Por cada minuto de video estoy 10min leyendo cosas en internet 😁

Si la clase es una cadena de hamburguesas la instancia es preparar esa hamburguesa que sigue las especificaciones de la clase

En los cursos basicos de javascript, Estaba el tema de Funcion Constructora.

Funcio constructora (similares) Class.

class tiene mas alcane en cuestiones de almacenaje.

If a class only has a constructor, it is not much different from a createX factory function which just creates plain objects. However, the power of classes is that they can be used as “templates” which automatically assign methods to instances.

¿Como es posible en el video que declare 2 clases de user llamandose exactamente igual y no le de error?

En el minuto 7:30 veo
class user {

//metodos
greeting(){
    return "Hello";
}

};

y despues :

class user {
constructor() {

    console.log("Nuevo usuario");
}

  //metodos
greeting(){
    return "Hello";
}

}

No me lo explico

Recomiendo este video explica gráficamente conceptos de esta clase
https://www.youtube.com/watch?v=I848HdWjLMo&pp=ygUPYWJzb2x1dGUgY2xhc2Vz

Compañeritos, antes de tomar este curso es importante tomar los cursos anteriores en las rutas , por ejemplo los dos de POO, la ruta de JS es la más efectiva con respecto al orden…

comprendi la opcion de setters getters pero de igual manera todas las opciones son correctas

Excelente, he entendido varios conceptos que he trabajado por mucho tiempo y he dado por sentada su funcionalidad y comportamiento, pero sin entender el porqué. Esto se debe al aprendizaje apresurado por la marcha que he tenido y en el que no me he detenido a ver que es lo que estoy haciendo y porque así xD

Investigue un poco un Metodo se pude entender que es una Funcion.
.

Cumple como función por que ya esta definido como una función por medio de Class.
.

Te daras cuenta que tambien es necesario inicializar el method como una funcion.
.

El constructor es publico y los metodos son privados.
.

Conclucion el metodo de una clase es una funcion definida por la misma clase pero es privada .

Me parece que el profe oscar es muy bueno explicando, sin embargo no todos entienden de la misma manera.
No esta mal buscar en otra parte un tema que no entiendas, por eso les traigo este vídeo con el que yo entendí mucho mejor que son las clases.

https://www.youtube.com/watch?v=9LH_1NDn2RU&t=106s

class user{
    //constructor
    constructor(name,age){
        this.name = name;
        this.age = age;
    }
    //metodos
    speak(){
        return 'Hello';
    }
    greeting(){
        return`${this.speak()} ${this.name}`;
    }
    get uAge(){
        return this.age;
    }
    set uAge(n){
        this.age = n;
    }
}

const bebeloper1 = new user('David',15)
console.log(bebeloper1.uAge);
console.log(bebeloper1.uAge =20);

El código define una clase llamada user que representa un usuario con propiedades y métodos. Veamos cómo funciona paso a paso:

1. Se define la clase user utilizando la palabra clave class.

2. Dentro de la clase, se define el constructor utilizando el método especial constructor. El constructor recibe dos parámetros: name y age. Dentro del constructor, se asignan estos valores a las propiedades this.name y this.age, respectivamente.

3. Se definen dos métodos dentro de la clase user:

   • speak(): Es un método que devuelve la cadena de texto 'Hello'.
   • greeting(): Es un método que utiliza el método speak() para obtener el saludo y luego lo combina con el nombre del usuario para formar una cadena de texto. Utiliza la propiedad this.name para acceder al nombre del usuario.

4. Se definen dos “accessors” (accesores) utilizando las palabras clave get y set:

   • uAge (get): Es un “accessor” de solo lectura que devuelve el valor de la propiedad this.age.
   • uAge (set): Es un “accessor” de escritura que permite asignar un nuevo valor a la propiedad this.age.

5. Se crea una instancia de la clase user llamada bebeloper1 utilizando el constructor y se le pasan los valores 'David' y 15 como argumentos.

6. Se utiliza console.log para imprimir el valor de bebeloper1.uAge, lo cual invoca el “accessor” get y devuelve el valor actual de this.age, que es 15.

7. Se utiliza console.log para imprimir el resultado de asignar 20 a bebeloper1.uAge. Esto invoca el “accessor” set y actualiza el valor de this.age a 20. Luego, se imprime el valor asignado, que es 20.

En resumen, el código crea una clase user con propiedades name y age, métodos speak() y greeting(), y los “accessors” uAge (get y set). Luego, crea una instancia de la clase y muestra el valor actual de age, seguido de la asignación de un nuevo valor a age y muestra el valor asignado.

es tema sobre programacion orientada a objetos,

📕 Archivos del Proyecto 📕

Pasos 📌

• • Dentro de la carpeta es6, crear el archivo llamado: 07-clases.js
  • • ◦ El código de los ejercicios queda:

//Compilar: seleccionar el código + click derecho + Run Code

//Ejercicio #1

/*
//declarando
class User{};

//instancia de una clase
const newUser = new User();

*/

//Ejercicio #2

class user {
	// metodos
	greeting() {
		return 'Hello';
	}
};

const gndx = new user();
console.log(gndx.greeting());
const bebeloper = new user();
console.log(bebeloper.greeting());

/*output:
Hello
Hello
*/

//Ejercicio #3
// constructor
class user2 {
	//Constructor
	constructor(){
		console.log('Nuevo Usuario');
	}
	greeting() {
		return 'Hello';
	}
}

const david = new user2();

/*output:
Nuevo Usuario
*/

//Ejercicio #4
// this
class user3 {
	constructor(name){
		this.name = name;
	}
	// metodos
	speak() {
		return 'Hello';
	}
	greeting() {
		return `${this.speak()} ${this.name}`;
	}
}

const ana = new user3('Ana');
console.log(ana.greeting());

/*output:
Hello Ana
*/

//Ejercicio #5
// setter getters
class user4{
//constructor
	constructor(name,age){
		this.name = name;
		this.age = age;
	}
	//metodos
	speak(){
		return 'Hello';
	}
	greeting(){
		return `${this.speak()} ${this.name}`;
	}
	get uAge(){
		return this.age;
	}
	set uAge(n){
		this.age = n;
	}
}
const bebeloper2 = new user4('David', 15);
console.log(bebeloper2.uAge);
console.log(bebeloper2.uAge = 20);

/*output:
15
20
*/

JavaScript utilizaba principalmente una sintaxis basada en prototipos para implementar la herencia y la programación orientada a objetos. Con la introducción de ES6, se agregó una sintaxis de clase más familiar y orientada a objetos. Permíteme explicarte las características clave de las clases en ES6:

Declaración de clases:
La declaración de una clase en ES6 se realiza utilizando la palabra clave class, seguida del nombre de la clase. Por ejemplo:

class Persona {
  constructor(nombre, edad) {
    this.nombre = nombre;
    this.edad = edad;
  }

  saludar() {
    console.log(`Hola, soy ${this.nombre}`);
  
}
}

En este ejemplo, se declara una clase llamada Persona con un constructor y un método saludar(). El constructor se utiliza para inicializar las propiedades de la clase, y los métodos se definen dentro del cuerpo de la clase.

• Constructor:
  El constructor es un método especial dentro de una clase que se llama automáticamente cuando se crea una instancia de la clase. Puedes utilizar el constructor para asignar valores iniciales a las propiedades de la clase. En el ejemplo anterior, el constructor de la clase Persona acepta los parámetros nombre y edad y los asigna a las propiedades correspondientes.

• Métodos de instancia:
  Los métodos de instancia son funciones definidas dentro de la clase que se asocian con cada instancia creada. Puedes acceder a las propiedades y otros métodos de la instancia utilizando la referencia this. En el ejemplo anterior, el método saludar() es un método de instancia que muestra un saludo utilizando el nombre de la persona.

• Herencia de clases:
  ES6 permite la herencia de clases utilizando la palabra clave extends. Puedes crear una clase hija que herede propiedades y métodos de una clase padre. Aquí hay un ejemplo:

class Estudiante extends Persona {
  constructor(nombre, edad, grado) {
    super(nombre, edad);
    this.grado = grado;
  }

  estudiar() {
    console.log(`${this.nombre} está estudiando`);
  }
}

En este ejemplo, la clase Estudiante hereda de la clase Persona utilizando extends. El constructor de la clase Estudiante utiliza super() para llamar al constructor de la clase padre y asignar los valores a las propiedades heredadas. Además, se define un nuevo método estudiar() específico de la clase Estudiante.

Estas son las características básicas de las clases introducidas en ES6. Proporcionan una sintaxis más clara y orientada a objetos para trabajar con la programación orientada a objetos en JavaScript. Desde ES6 en adelante, las clases se han convertido en una forma común de definir estructuras de objetos y trabajar con herencia en JavaScript.

La verdad es nefasto que expliquen esto a las carreras sin tener cursos de programación orientada a objetos en las rutas.
Menos mal yo ya he programado en Java y Python y domino ese concepto, pero me imagino la tremenda confusión que esto le causa a alguien que no sepa esos conceptos tan importantes.
Encima dicen en este video que la herencia es instanciar objetos de una clase cuando no tiene nada que ver, terrible el fallo en este video.

¿En serio bebeloper? 😄

Chat GPT explica mucho mejor las clases, lo siento, pero en la ruta no han explicado muchos términos, y el profesor Oscar da por hecho que los entendemos, he repetido la clase, pero hay cosas que explica muy rápido. Tuve que acudir a chat GPT y lo entendí, díganle a open AI que les ponga ejercicios, y eso les ayudara a practicar.

Mi resumen:

Una pagina que me sirvio un monton para comprender mejor el tema de las clases es esta: https://www.digitalocean.com/community/tutorials/informacion-sobre-clases-de-javascript-es

Entiendo que es preferible usar una clase a una función para generar elementos, cuando tanto la clase como sus procesos asociados al elemento instanciado se van a utilizar numerosas veces.
La función está más asociada a un proceso, mientras que la clase estaría asociada a un elemento (variable, array, objeto) y sus procesos.

Una clase que ise en el curso de POO que tiene platzi

class Chapter {
    constructor({name, time, documents = []}) {
        this._name = name;
        this._time = time;
        this._documents = documents;
    }


    get name() {
        return this._name;
    }

    set name(value) {
        this._name = value;
    }

    get time() {
        return this._time;
    }

    set time(value) {
        this._time = value;
    }

    get documents() {
        return this._documents;
    }

    set documents(value) {
        this._documents = value;
    }
}

class Lesson {
    constructor({name, time, chapters = []}) {
        this.name = name;
        this.time = time;
        this.chapters = chapters;

    }
}

class Course {
    constructor({name, hours, lessons = []}) {
        this._name = name;
        this._hours = hours;
        this._lessons = lessons;
    }


    get name() {
        return this._name;
    }

    set name(value) {
        this._name = value;
    }

    get hours() {
        return this._hours;
    }

    set hours(value) {
        this._hours = value;
    }

    get lessons() {
        return this._lessons;
    }

    set lessons(value) {
        this._lessons = value;
    }
}

class LearningPath {
    constructor({name, courses = []}) {
        this._name = name;
        this._courses = courses;
    }

    get name() {
        return this._name;
    }

    set name(value) {
        this._name = value;
    }

    get courses() {
        return this._courses;
    }

    set courses(value) {
        this._courses = value;
    }
}

class Student {
    constructor({
                    firstName,
                    lastName,
                    username,
                    email,
                    twitter = undefined,
                    instagram = undefined,
                    facebook = undefined,
                    approvedCourses = [],
                    learningPath = []
                }) {
        this._firstName = firstName;
        this._lastName = lastName;
        this._username = username;
        this._email = email;
        this._twitter = twitter;
        this._instagram = instagram;
        this._facebook = facebook;
        this._approvedCourses = approvedCourses;
        this._learningPath = learningPath;
    }

    get firstName() {
        return this._firstName;
    }

    set firstName(value) {
        this._firstName = value;
    }

    get lastName() {
        return this._lastName;
    }

    set lastName(value) {
        this._lastName = value;
    }

    get username() {
        return this._username;
    }

    set username(value) {
        this._username = value;
    }

    get email() {
        return this._email;
    }

    set email(value) {
        this._email = value;
    }

    get twitter() {
        return this._twitter;
    }

    set twitter(value) {
        this._twitter = value;
    }

    get instagram() {
        return this._instagram;
    }

    set instagram(value) {
        this._instagram = value;
    }

    get facebook() {
        return this._facebook;
    }

    set facebook(value) {
        this._facebook = value;
    }

    get approvedCourses() {
        return this._approvedCourses;
    }

    set approvedCourses(value) {
        this._approvedCourses = value;
    }

    get learningPath() {
        return this._learningPath;
    }

    set learningPath(value) {
        this._learningPath = value;
    }
}

let basica = new Course({name: 'Curso de programación Basica', hours: 3});
let htmlAndCss = new Course({name: 'Curso Definitivo de HMTL Y CSS', hours: 2});
let practiceHtmlAndCss = new Course({name: 'Curso Practico de HTML Y CSS', hours: 3});
let unity = new Course({name: 'Curso de Unity 3D', hours: 6});
let unrealEngine = new Course({name: 'Curso de Unreal Engine', hours: 5});

let escuelaWeb = new LearningPath({
    name: 'Escuale de Desarrollo Web',
    courses: [
        basica,
        htmlAndCss,
        practiceHtmlAndCss
    ]
});

let escuelaVideoJuegos = new LearningPath({
    name: 'Escuela de Videos Juegos',
    courses: [
        basica,
        unity,
        unrealEngine
    ]
});


let sergio = new Student(
    {
        firstName: 'Sergio',
        lastName: 'ochoa',
        username: 'gnujavasergio',
        email: '[email protected]',
        learningPath: [
            escuelaWeb,
            escuelaVideoJuegos
        ]
    });
console.log(sergio);

Un ejemplo que ise con clases

class Person {
    constructor(firstName, lastName, height) {
        this.firstName = firstName;
        this.lastName = lastName;
        this.height = height;
    }

    greet() {
        console.log(`Hola, me llamo ${this.firstName} ${this.lastName}`);
    }

    imTall() {
        return this.height > 1.80;
    }
}

class Developer extends Person {
    constructor(firstName, lastName, height, favoriteLanguage) {
        super(firstName, lastName, height);
        this.favoriteLanguage = favoriteLanguage;
    }

    greet() {
        console.log(`Hola, me llamo ${this.firstName} ${this.lastName} y soy un Desarrollador`);
    }
}

let sergio = new Person('Sergio Antonio', 'Ochoa Martinez', 1.175);
sergio.greet();
console.log(sergio.imTall());

let angel = new Person('Angel', 'Martinez', 1.92);
angel.greet();
console.log(angel.imTall());

en realidad no comprendi muy bien si es mejor usar class o const

este es un ejemplo que hago con todo lo que explican en la clase.

class Pet {
    constructor({
        name,
        typeAnimal,
        age,
    }){
        this.name = name;
        this.typeAnimal = typeAnimal;
        this.age = age;
        this.owner = owner;
    }
    //metodos
    owner(proprietor){
        this.owner.push(proprietor)
    }
    // getters and setters
    get age() {
        return this.age;
    }
    set age(num) {
       this.age = num;
    }
}

const ragnar = {
    name: 'Ragnar',
    age: 3,
    typeAnimal: 'Perro Criollo',
    
}
console.log(ragnar);
console.log(ragnar.owner = 'Laura');
console.log(ragnar);
console.log(ragnar.age = 6);
console.log(ragnar);

la verdad la clase explica todo muy rapido, ya habia visto el tema de otro curso que repeti dos veces durante una semana para entender, aqui son solo 15 min, te vuela la cabeza.
se que es de introduccion, pero le falta pedagogia o deberia referenciar otro curso para entender

Bastante distorsionada la explicación 😦

🤯🤯🤯

Me voy a buscar info sobre los conceptos de esta clase, esta un poco enredada, un comercial y regreso.😄

El curso está mal ubicado dentro de la ruta que escogí. Deberían ponerlo donde ya te hayan explicado varios conceptos (Ya vi un curso Básico y uno práctico de JS y en ninguno explican la diferencia entre una clase y un objeto, y el profesor sale hablando de “un objeto como una instancia de una clase” como un conocimiento que ya te han compartido). En fin, aquí yo siento que el profesor salta de un concepto a otro como si uno ya los dominara, cosa que no es cierta. Esto hace muy pesado el curso al tener que parar e ir a buscar que te lo expliquen en otra parte.

/*
    ES6: clases

Declaracion de una clase 
        declarando
class User {    

}
        Instancia de una clase
Hora vamos a crear una instancia de esta misma clase
                aca el newUser utiliza la clase User como funcion
const newUser = new User ();
--------------------------------------

Hora vamos a crear la clase con los metodos que le vamos a agregar 

class user {
    //metodo funcion
    saludo(){
        return 'Hola';
    }
}

Hora vamos ha crar una instancia para poder aceder al metodo y realizar un llamado del mismo 

const instancia = new user(); // instancia 

// usu del metodo que esta dentro 
console.log(instancia.saludo());

//tambien podemos tener varias instancia llamando diferente metodos o uno solo 

        Constructor : donde podemos inicializar elementos de las clase

class user {
    // constructor
    constructor(){
        console.log('nuevo usuario');
    }
    saludo(){
        return 'Hola';
    }
}
    Cueando se cree una instancia de esta clase va a ejecutar o inicializar los elementos dentro del constructor

const jose = new user();

al ejecutar el codigo nos va llamar el constructor y nos arrojara el 
 nuevo usuario

 -------------------------------------------------
        this
this hace referencia al elemento padre que lo contiene 

class user {
    constructor(name){
        this.name = name;
    }
    //metodo
    hablar(){
        return 'hola'
    }
    saludo(){
        return `${this.hablar()} ${this.name}`;
    }
}
const ana = new user ('Ana');
console.log(ana.saludo());
-------------------------------------------------------
    obtener y guardar elementos
setters getters

class user {
    //constructor
    constructor(name, age){
        this.name = name;
        this.age = age;
    }
    //metodos
    hablar(){
        return 'hola'
    }
    saludo(){
        return `${this.hablar()} ${this.name}`;
    }
     //ahora vamos a crear palabras reservadas que van a contener el get

get uAge(){
    return this.age; //para leer un valor tenerlo dentro de la clase 
}
set uAge(n){
    this.age = n; // ahora que se el valor de no
}
}


const carlos = new user('SEba', 12);
console.log(carlos.uAge);// solo quiero mostrar el valor que esta contenido que se le agrego al constructor "nos debe mostrae 12"
console.log(carlos.uAge = 200);// aca le estamos asignamos un valor al age "nos tiene que mostra el 200"
*/

Los getters no reciben parámetros y retornan algo,
los setters reciben 1 argumento y no retornan nada… 😃

Me ayuda a pensar en las clases como planos del objeto que queremos construir, y cada objeto puede ser o no diferente como en: color, nombre y tamaño, pero las bases o el plano(clases) será el mismo. Entonces tomamos el plano y creamos nuevos objetos(instancias).
Podría ser una clase coche, con atributos como: color, marca puertas y sus métodos (funciones dentro de una clase que engloban comportamientos o funcionalidades relacionadas con la clase) encender(), acelerar(), fuerza().
De la clase (plano) coche creamos varios objetos pero con los mismos atributos y métodos.

Muchas veces estos cursos va a un ritmo acelerado, que los temas no se ven con profundidad para aprender las bases. A mi me ha servido mucho ver el temario del curso y ver videos en youtube donde expliquen a profunidad cada tema. Yo vengo de experiencia en desarrollo móvil y al estar aprendiendo JS siento que los videos podrían no ser los correctos para las personas que están iniciando por lo que les sugiero no quedarse con la información de aquí, vayan a otros recursos.

Totalmente innecesario crear la misma clase User tantas veces. Se podía hacer todo en la misma y el código era más limpio y ordenado.

Esta clase es especial. Leyendo el historial de comentarios puedo ver las dificultad que compartimos al entender esta parte de la programación.

Mi aporte es decirles que esta clase de menos de 20 minutos condesa dos semestres de programación de computadoras en la universidad estatal. Es increíble la diferencia para compartir conocimiento aquí en Platzi.

Todos los que empiezan y todos los que continuán. Platzi is the way

https://www.youtube.com/watch?v=aSUvGPB6oE8

Esto lo vimos en el curso nuevo basico de programacion, no es tan dificil muchachos es cuestion de verlo y verlo para ir comprendiendo, pero tambien creo que gndx no es buen profesor para explicar esto, hay detalles tan raros como llamarle simbolo de interrogacion a los signos de dolar…

menos mal me había saltado este curso, y vi los que venían después, primero. Me hubieses desanimado totalmente la falta de ganas de explicar del profe 😦

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

//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.

EXPLICACIÓN FÁCIL
Tenemos la clase MOLDE, esta clase trae la información de:

1. Forma del Helado (esto se refiere a la forma que tiene el molde que le dará al helado)

2. Punta de Chocalate (Los helados resultantes tendran una rica punta de chocolate)

De esta clase MOLDE se generarán dos Objetos que ya tendrán la información previa de la clase, o sea, solo faltaría agregar el sabor Base y palillo al helado.

TE RETO A QUE PASES ESTO A CÓDIGO !