No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Regálate acceso ilimitado a todos los cursos por 1 año a precio especial de Navidad 🎄

Antes: $199

Currency
$149/año
regístrate

termina en:

16D
13H
47M
18S

ES6: clases

17/38
Recursos

La palabra reservada class es una forma para crear clases y manejar la herencia en JavaScript, permitiendo resolver problemas con el paradigma de programación orientada a objetos (POO).

Estructura de las clases en JavaScript

La estructura de clases en JavaScript consiste en:

  • Definir la clase con la palabra reservada class, seguido del nombre (por convención se empieza con mayúscula).
  • La función constructora sirve para crear las variables necesarias en la instancia del objeto, a partir de los argumentos en la instancia.
  • Para definir atributos necesitas el contexto this, que representa la instancia del objeto.
  • Métodos para definir las acciones de la clase.
  • Para crear una instancia, deberás declarar una variable e invocar la clase con la palabra reservada new.
class Calculator {
    // Constructor
    constructor() {
        // Atributos
        this.valueA = 0
        this.valueB = 0
    }
    
    // Método
    suma(num1, num2){
        this.valueA = num1
        this.valueB = num2
        return this.valueA + this.valueB
    }
}

// Instancia
const calculadora = new Calculator()

calculadora.suma(2,2) //4

Profundiza la programación orientada a objetos

El tema de Programación Orientada a Objetos es un tema amplio, toma las siguientes cursos para entender mejor y aplicarlo de manera eficiente.

Contribución creada por Andrés Guano (Platzi Contributor).

Aportes 16

Preguntas 1

Ordenar por:

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

Esta clase me pareció super enredada. Me puse a buscar otras explicaciones por fuera y encontré esta que se me hizo clara, fácil de entender y sintetizada. La recomiendo MUCHO

Si tienes conocimiento previo será fácil, pero esto para un principiante es muy confuso.

Les quiero compartir un ejemplo que me ayudo

//las clases no reciben parametros
//el que recibe las propiedades es el objeto constructor

class Animal {
    //constructor: son las propiedades que tiene el objeto
    constructor(nombre, genero){
        this.nombre = nombre;
        this.genero = genero;
    }

    //metodos: son las funciones que puede tener el objeto
    sonar(){
        console.log("Hago sonidos por que estoy vivo");
    }

    saludar(){
        console.log(`Hola me llamo ${this.nombre}` );
    }
}

let scooby = new Animal("scooby", "macho");
console.log(scooby);
//podemos llamar al metodo que nececitamos con "." y el nombre del metodo
const margarita = new Animal("Margarita", "Hembra");
console.log(margarita.sonar);


Si se crea una clase, también se pueden crear metodos estaticos que no dependen de instanciar un nuevo objeto para poder utilizar el metodo:

class newClass {
	static otraClase (){
		console.log('Hello')
	}
}

// Se ejecuta

const response = newClass.otraCase()

//De esta manera no necesitamos crear o instanciar un nuevo obj para utilizar los métodos de esa clase. 

Siempre que se les complique un poco la clase con los profes de Platzi, recuerden que pueden complementar con esta página que es impresionante de buena y explica todo muy simple.

https://www.w3schools.com/js/tryit.asp?filename=tryjs_class_init

Les dejo el Curso de Programación Orientada a Objetos con JavaScript para una mejor explicación de las clases en JavaScript 😉

Por lo que entendí:

  • Una clase es como una plantilla que nos permite estructurar de cierta forma la información. Esta información no es almacenada en la clase sino que será guardada o usada en la sección correspondiente de la plantilla. (Objeto constructor)

Hagamos una clase con la palabra Persona:

class Persona{
} //Esto será nuestra plantilla en blanco

Ahora agregemos el objeto constructor que se encargará de guardar los datos:

class Persona{
    // Se coloca dentro de () los parámetros esperados
    constructor(firstName, lastName, age, height, nationality) {
    } 

El objeto constructor es justamente eso, un objeto, por lo que para guardar se asigna cada parámetro a una propiedad, esto lo hará con la ayuda de this.nombreDeLaPropiedad = nombreDelParametro:

class Persona{
    constructor(firstName, lastName, age, height, nationality) {
        this.firstName = firstName;
        this.lastName = lastName;
        this.age = age;
        this.height = height;
        this.nationality = nationality;
    }

Ajá y ¿Cómo le damos esa información?
Pues para eso creamos una instancia.

  • Las instancias serán la encargadas de brindar la información necesaria para completar la plantilla.
    Se pueden generar las instancias que se deseen, cada una de ellas guardará su propia información:
const user1 = new Persona("Sara","Lopez",20, 150, "MX",);
const user2 = new Persona ("Luis", "Sánchez", 21, 175, "CO" );

Si hacemos un console.log() del user1 podremos ver que la instancia está guardando la infromación de la misma forma que un objeto lo haría:

console.log(user1);
//Mostrará:
Persona {
  firstName: 'Sara',
  lastName: 'Lopez',
  age: 20,
  height: 150,
  nationality: 'MX',
}

¡Continuemos con los métodos!

  • Los métodos son cual funciones, se les puede agregar la lógica necesaria para que te devuelvan lo que requieras, por ejemplo saludar según el género con el que te identifiques:
class Persona {
[...]
//Método:
saludar(gender){
        if (gender == "mujer"){
            console.log(`Hola ${this.firstName} bienvenida`);
        }else if (gender =="hombre"){
            console.log(`Hola ${this.firstName} bienvenido`);
        }else{
            console.log(`Hola ${this.firstName} bienvenide`);
        }
    }
}

Para mandar a llamar un método se hace de la siguiente manera:

//nombreInstancia . nombreMetodo ()
user1.saludar("mujer");  //<--Si el método necesita argumentos(como es el caso) se pueden agregar. 

Otro ejemplo, ésta vez utilizando las propiedades guardadas en el objeto constructor:

class Persona{
[...]
isUnderAge(){
        if (this.age >= 18){
            console.log(`Eres mayor de edad`)
        }else{
            console.log (`Eres menor de edad`)
        }
    }
}

user1.isUnderAge(); //Eres mayor de edad

Por último los métodos Get y Set

  • La sintaxis es distinta a los otros métodos para facilitar su uso y su llamado.
    ¿Cómo así?
    Pues habrá casos donde tendrá más sentido llamar a un método como si fuera una propiedad más, pongamos un ejemplo:
class Persona{
[...]
get fullName(){
        return `${this.firstName} ${this.lastName}`
    }
}

En este caso tendría sentido que fullName fuese una propiedad más, con get podemos mandarla a llamar así, sin paréntesis: user1.fullName
.
.

  • Set nos ayudará a modificar el valor o la información de alguna propiedad que queramos.

  • Imaginemos que nuestro usuario ha transicionado y se quiere cambiar el nombre:

class Persona{
[...]
	set changeName (newName){
	const parts = newName.split (' ');
	this.firstName = parts [0];
	this.lastName = parts [1];
}
user1.changeName = "Pedro Lopez"

Esta clase puede parecer confusa e incompleta porque es un tema extenso , aquí se busca repasar y avanzar de la forma más rápida.

El profe explica bien, bueno a su manera, pero como la mayoría venimos acostumbrados a Freddy o a juanDC, se nos hace complicado que el profe cuando termine de escribir código, no explique de donde sale cada cosa y ahí si lo ponga a ejecutar, seria un buen consejo para mejorar.

Para todos los que les cuesta un poco estas clases, les recomiendo hacer toda la serie de cursos de JS que esta en la ruta de Desarrollo Web, hasta manipulacion de Arrays. ya con eso solucionan todas las dudas

Esto es muy similar a otros lenguales de programación hasta aquí va sencillo.

Quedan cosas en el aire como encapsulación de datos, herencias pero es una buena clase si ya has visto POO

No sé si lo mencionó el profe, pero los nombres de clases generalmente empiezan con mayúscula, ojo con eso, para no confundirlos con otros objetos.

Termine integrando la programación basada en clases con esta clase, fue una explicación directa y de prestar mucha atención, muchos nombres, pero me parece una buena estructura para trabajar.

Para no olvidar la versión de ECMA según el año, les dejo este truco mental:

2015 = ECMA V6
2016 = ECMA V7

Cómo debes pensar: 2015 => 20 15 => 15 => 1+5 = 6

Sólo debes sumar los últimos 2 dígitos del año correspondiente

SALUDOS PLATZINAUTAS ❤️

Hola , quiero compartirles un recurso muy bueno para que se entienda más a fondo el tema de clases con JavaScript.
POO: Para principiantes
También esta el curso de programación Orientada a Objetos con el Profesor Juan David.
Aquí

Repositorio github del profe → Archivo manejado en la clase:

.
A hoy 02/11/22 la clase está cruzada con la 12 - ES6: modeule