Clases en JavaScript: Sintaxis y Uso Práctico

Curso Básico de Programación Orientada a Objetos con JavaScript

Contenido del curso

JavaScript Orientado a Objetos

Objetos, clases y prototipos

Pilares de la POO: abstracción y encapsulamiento

Pilares de la POO: herencia y polimorfismo

Próximos pasos

17
Examen Final de Programación Orientada a Objetos en JavaScript
01:40 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0012:51

Clases en JavaScript: Sintaxis y Uso Práctico

Curso Básico de Programación Orientada a Objetos con JavaScript

Clase 6 de 17

Clase 6 / 17

Comentarios (77)77 comentarios

Andrés Felipe Eslava Zuluaga

Hace 5 años

Juan Sebastian Espínola

Hace 5 años

Jajajajajaja es buenísimo

Julio Loarte Huerto

Hace 5 años

jajajajaj preciso

Obed Paz

Hace 5 años

Classes are only syntactical sugar for constructor functions. Everything still works the same way!

Fabian Gutierrez

Hace 5 años

best gift!!!

Reinaldo Mendoza

Hace 5 años

Tremendo resumen de la clase

Mario Barceló Sospedra

Hace 5 años

PATRÓN "RORO"

El patrón que menciona JuanDC se llama “RORO” del Inglés “Receive an object, return an object” (Recibe un objeto, devuelve un objeto).

Nos ayuda cuando tenemos muchos parámetros en nuestro constructor, ya que al instanciar la clase debemos acordarnos del orden de los parámetros y, además, no podemos tener parámetros por defecto.

No obstante, si recibimos un objeto, sí podemos poner parámetros por defecto y no recibir un parámetros si fuere el caso, sin que pase nada. A la hora de enviar los argumentos al instanciar la clase, también debe enviarse un objeto, y otra ventaja es que esos argumentos no hace falta que estén en el mismo orden que están los parámetros del constructor. ¡Prácticamente son todo ventajas! 😃

Me ha encantado aprender este patrón ¡Gracias, profe!

Os dejo un link con documentación sobre le patrón RORO (está en Inglés) -> https://www.freecodecamp.org/news/elegant-patterns-in-modern-javascript-roro-be01e7669cbd/

¡Ánimo y a seguir aprendiendo JavaScript! 😄

Ricardo Alfonso Chavez Vilcapoma

Hace 3 años

Observación: Si podemos tener parametros por defecto en una clase sin RORO.

Fredy Gutiérrez Vazquez

Hace 3 años

Gracias por la info

Sebastián Andrés Sanhueza Tapia

Hace 5 años

Quede asombradísimo en como escribía en 2 partes a la vez y como movía líneas, lo busque y encontré que era así

Escribir en varios lados a la vez alt + click

Mover una línea hacia arriba y abajo alt + flecha hacia arriba (o flecha hacia abajo)

Copiar una línea hacia arriba o abajo alt + shift + flecha hacia arriba (o flecha hacia abajo)

Borrar una línea completa a la vez shift + supr

Diego Ojeda Rivera

Hace 5 años

mesirve.jpg

Dario Paladines

Hace 4 años

Otro dato mas para poder alargar tu cursor las líneas que quieras ctrl + alt + flecha (arriba o abajo) pruébenlo antes que explicarles jeje

Victor Andres Castillo Zambrano

Hace 5 años

Habia escuchado la explicacion de que en javascript no hay clases sino prototipos mil veces y nunca lo entendi, hasta ahora.

Eliaz Bobadilla

Hace 5 años

Siempre se aprende algo nuevo en los cursos de Platzi! Incluso cuando crees que ya dominas un tema :)

Carlos Mazzaroli

Hace 5 años

Nadie: ...🦗 Javascript: Bueno los objetos, prototipos y clases son muy diferentes, acá tienen una foto donde lo pueden ver

Erik Emmanuel Navarrete Reyes

Hace 5 años

jajajaja

Beder Danilo Casa Condori

Hace 2 años

clase goku

José Gregorio Estrada Meneses

Hace 5 años

Clases

En ES2016, ahora podemos usar la palabra clave Class , así como los métodos mencionados anteriormente para manipular el prototype. Las clases de JavaScript son atractivas para los desarrolladores con experiencia en programación orientada a objetos, pero esencialmente hace lo mismo que el anterior.


class Rectangle {
  constructor(height, width) {
    this.height = height
    this.width = width
  }

  get area() {
    return this.calcArea()
  }

  calcArea() {
    return this.height * this.width
  }
}

const square = new Rectangle(10, 10)

console.log(square.area) // 100

Esto es básicamente lo mismo que:

function Rectangle(height, width) {
  this.height = height
  this.width = width
}

Rectangle.prototype.calcArea = function calcArea() {
  return this.height * this.width
}

Los métodos getter y setter en las clases vinculan una propiedad Object a una función que será llamada cuando se busque esa propiedad. Esto es solo azúcar sintáctico para ayudar a que sea más fácil buscar o establecer propiedades.

Anfernee Valera

Hace 5 años

Gracias por tu aporte. Es Importante acotar que la Introducción de las clases fue en ES6, o en ECMAScript 2015, que viene siendo lo mismo.

Hector Jimenez

Hace 5 años

Pense en saltarme este curso porque segun yo ya dominaba el tema…NOT. Gracias JDC, muy buena explicacion!

Eliaz Bobadilla

Hace 5 años

Sabia elección xD

Beder Danilo Casa Condori

Hace 2 años

siempre se aprende algo nuevo

Miguel Angel Reyes Moreno

Hace 5 años

Entonces eso de usar clases es simplemente sintaxis diferente, interesante :o

//* Prototipos con sintaxis de clases

class Alumno {
  constructor({
    name,
    age,
    cursosAprobados = [], //* Por defecto el parámetro tiene un valor vacío
    email,
  }) {
    this.name = name
    this.age = age
    this.cursosAprobados = cursosAprobados
    this.email = email
  }

  aprobarCurso(nuevoCursito) {
    this.cursosAprobados.push(nuevoCursito)
  }
};

const patricia = new Alumno({
  name: 'Patricia',
  age: 21,
  cursosAprobados: ['Cocina'],
  email: 'patricia@gmail.com'
});

Jesús Briceño

Hace 5 años

Si, son las cosas que llaman "sugar sintax", así como el async y await para las promesas, son lo mismo pero usando una sintaxis más amigable.

Fernando Quinteros Gutierrez

Hace 5 años

📮 Clases en JavaScript

Apuntes

Las clases en JavaScript son una sintaxis muy parecida las clases que utilizaríamos en otros lenguajes
Si bien recibíamos los parámetros por la función en la sintaxis de clases las recibimos mediante el método constructor

class Student2 {
  constructor(name, age, cursosAprobados) {
    this.name = name;
    this.age = age;
    this.cursosAprobados = cursosAprobados;
  }
}

En caso de querer agregar un nuevo método podemos agregarlo tanto como si fuera una propiedad y la otra forma es agregar los métodos entre las llaves de la clase

class Student2 {
  constructor(name, age, cursosAprobados) {
    this.name = name;
    this.age = age;
    this.cursosAprobados = cursosAprobados;
  }

  aprobarCurso(nuevoCursito) {
    this.cursosAprobados.push(nuevoCursito);
  }
}

Para crear una instancia se realiza de la misma manera que una instancia de un prototipo

const obj = new Clase();

📌 **RESUMEN:** Una clase en JavaScript no es más que una sintaxis en algunos casos más cómoda para crear prototipos. Está basada en otros lenguajes los cuales tienen programación orientada a objetos mediante clases.

Jeffer Steven Nuñez Aragon

Hace 5 años

Las Clases son una forma mas bonita de crear prototipos. :D

Gustavo Adolfo Perez Ramos

Hace 5 años

Wow de verdad antes no entendia esto de que las clases no existen en JS hasta ahora :)

Andres Alvarez Becerra

Hace 5 años

Hola, una pregunta, ¿Por buenas pracitcas es mejor usar la sintaxis de clase o la de prototipo?

Carlos Zabala Roqueme

Hace 5 años

Como se comento en los videos, la sintaxis de clase es mucho más amigable de implementar, así que es más utilizada, es una forma de "emular" por decirlo así, el manejo de las clases que se da en otros lenguajes de programación.

Juan Castro

Profesor

Hace 5 años

Solo son dos sintaxis diferentes a nuestra disposición. No es una buena ni mala práctica usar ninguna de las dos. Podemos seguir buenas o malas prácticas con cualquiera de las dos.

Stiven Andres Medina Lopez

Hace 4 años

Patron RORO:

edgar zambrano

Hace 4 años

gracias muy claro el ejemplo y de mucha utilidad

Rocio Salgado

Hace 5 años

GRACIAS JUAN!! Tus clases son las mejores <3

Javier Marin

Hace 4 años

Hay un patrón interesante en todo esto respecto a RORO. Si bien es bastante útil directamente recibir un objeto, el problema termina siendo el mismo a la larga porque imaginate que por cada nueva llave que introduzcas en el objeto tengas que además modificar tu constructor y sus propiedades. La verdad es que es mucho mas interesante si creas un atributo params que sea un Object Literal y lo iteras para hacer una asignación:

class Student2 {
  constructor({ name, age, approved = [] }, params) {
    this.name = name;
    this.age = age;
    this.approvedCourses = approved;

    if (params && Object.keys(params).length) {
      for (const param in params) {
        if (Object.hasOwnProperty.call(params, param)) {
          const item = params[param];
          this[param] = item;
        }
      }
    } 
  }

  approveCourse(course) {
    this.approvedCourses.push(course);
  }
}

const natalia = new Student2({
  name: 'Natalia',
  age: 20
}, {
  sexo: 'F',
  twitter: 'twitter.com/natalia',
  foo: 'bar'
});

Y listo, ahora tenemos una serie de parámetros básicos que podemos definir con algún default, y luego una serie de parámetros opcionales que podemos definir libremente dentro de un objeto que serán asignados a nuestra instancia.

Juan Castro

Profesor

Hace 4 años

Me gusta :clap:

Jesús Velázquez Jiménez

Hace 5 años

La clase recibe un solo parámetro, un objeto. En nuestro objeto declaramos un array vacío por defecto para la lista de cursos aprobados.

class Student {
    constructor({name, age, email, approved = []}){
        this.name = name;
        this.age = age;
        this.email = email;
        this.approved = approved;
    }
    addApproved(curso){
        this.approved.push(curso);
    } 
}
const alexander = new Student({
    name: "Alexander", 
    age: 21, 
    email: "alexander@mail.com",
});

Carlos Dugarte

Hace 5 años

Con ES6 + en vez de escribir

this.name = name;

se puede utilizar solo

name

Sebastián Olaya Escobar

Hace 4 años

No se porqué, pero no me funciona :(

Ricardo Alfonso Chavez Vilcapoma

Hace 3 años

Eso solo es en objetos literales, cuando una propiedad tiene el mismo nombre que su valor. Por ende no funciona en clases.

Pedro Alvarado Garcia

Hace 5 años

Personalmente me agrada mucho la sintaxis con clases, ya que se parece mucho a la de otros lenguajes como Java o Python. A pesar de que son solo sugar syntax de los prototipos.

Ariel Ezequiel Biazzo Genua

Hace 4 años

The feynman technique: Explicale a un nene de 5 años y crea metaforas para guardar la inforamcion a largo plazo.

Supongamos que queremos hacer 🍪, El molde es Circular pero sin la base.

constructor({}) El constructor es el molde circular sin la base nos permite ingresar las propiedades para hacer las galletitas(como la pasta)
this.name = name; Esta seccion es aun mas importante, esta es la base es decir, nos dimos cuenta que no podemos hacer las galletitas sin la base porque se nos cae la pasta****.**** Entonces la base = almacenamiento. Esto es el almacenamiento de las propiedades(pasta) de la instancia(galletitas).

Recursos

¿Qué son las clases en JavaScript?

JavaScript, a pesar de ser un lenguaje orientado a objetos, no utiliza clases como la mayoría de los lenguajes orientados al mismo paradigma. De hecho, está basado en prototipos. Las clases en JavaScript son una sintaxis más amigable para manejar prototipos, adaptándose así a las costumbres de otros lenguajes con clases tradicionales.

Funciones de las clases de JavaScript

Cuando creamos una clase en JavaScript, usamos la palabra reservada class. En su interior, utilizamos el método constructor para inicializar los atributos del objeto. Este método se ejecuta automáticamente cuando creamos una instancia de la clase. Las clases nos permiten definir métodos que podemos utilizar con nuestras instancias, lo que facilita el trabajo con objetos.

class Student2 {
    constructor(name, age, approvedCourses) {
        this.name = name;
        this.age = age;
        this.approvedCourses = approvedCourses || [];
    }

    aprobarCurso(nuevoCurso) {
        this.approvedCourses.push(nuevoCurso);
    }
}

Creación y manipulación de instancias

Para crear una instancia de una clase en JavaScript, utilizamos la palabra clave new, tal como lo haríamos en otros lenguajes de programación orientada a objetos. Esto nos permite instanciar y manipular objetos de manera intuitiva y estructurada.

const miguelito = new Student2("Miguel", 28, ["Curso de análisis de negocios", "Principios de visualización de datos"]);
miguelito.aprobarCurso("Tablón");

¿Cómo usar objetos en los parámetros de funciones?

En la programación en JavaScript, existe un patrón llamado "ROR" (recibir un objeto, retornar un objeto). Este enfoque facilita la manipulación y la expansión de parámetros en nuestras funciones, enviando un único objeto con diversas propiedades en vez de múltiples parámetros.

Parámetros como objetos

Al usar objetos como parámetros, se simplifica la extensión de las funcionalidades al no depender del orden de los argumentos. Esta técnica también permite establecer valores por defecto para ciertos atributos.

class Student2 {
    constructor({name, age, email, approvedCourses = []}) {
        this.name = name;
        this.age = age;
        this.email = email;
        this.approvedCourses = approvedCourses;
    }

    aprobarCurso(nuevoCurso) {
        this.approvedCourses.push(nuevoCurso);
    }
}

const miguelito = new Student2({
    name: "Miguel",
    age: 28,
    email: "miguelito@platico.com"
});

Al emplear esta estructura, se obtiene la flexibilidad de definir el orden de propiedades como se desee y añadir nuevas sin alterar el funcionamiento del código existente.

Ventajas del uso de clases en JavaScript

Compatibilidad visual y sintáctica: Las clases en JavaScript recuerdan a las de otros lenguajes, lo que facilita su comprensión para programadores acostumbrados a paradigmas orientados a clases.
Claridad en el código: Aunque internamente sigamos utilizando prototipos, la sintaxis clara de las clases mejora la legibilidad.
Facilidad para el manejo de objetos complejos: La capacidad de trabajar con objetos como parámetros facilita la modularidad del código, permitiendo estructuras más complejas sin perder organización.

El recorrido de JavaScript con respecto a las clases expande nuestra comprensión del lenguaje al proporcionar herramientas potentes y flexibles para trabajar con objetos. Explorando estas funcionalidades, se pueden crear aplicaciones más eficientes y adaptables a diversos entornos de programación. ¡Sigue explorando el mundo de JavaScript y descubre las infinitas posibilidades que te brinda este versátil lenguaje!

class Rectangle {
  constructor(height, width) {
    this.height = height
    this.width = width
  }

  get area() {
    return this.calcArea()
  }

  calcArea() {
    return this.height * this.width
  }
}

const square = new Rectangle(10, 10)

console.log(square.area) // 100

//* Prototipos con sintaxis de clases

class Alumno {
  constructor({
    name,
    age,
    cursosAprobados = [], //* Por defecto el parámetro tiene un valor vacío
    email,
  }) {
    this.name = name
    this.age = age
    this.cursosAprobados = cursosAprobados
    this.email = email
  }

  aprobarCurso(nuevoCursito) {
    this.cursosAprobados.push(nuevoCursito)
  }
};

const patricia = new Alumno({
  name: 'Patricia',
  age: 21,
  cursosAprobados: ['Cocina'],
  email: 'patricia@gmail.com'
});

class Student2 {
  constructor(name, age, cursosAprobados) {
    this.name = name;
    this.age = age;
    this.cursosAprobados = cursosAprobados;
  }

  aprobarCurso(nuevoCursito) {
    this.cursosAprobados.push(nuevoCursito);
  }
}

📌 **RESUMEN:** Una clase en JavaScript no es más que una sintaxis en algunos casos más cómoda para crear prototipos. Está basada en otros lenguajes los cuales tienen programación orientada a objetos mediante clases.

class Student2 {
  constructor({ name, age, approved = [] }, params) {
    this.name = name;
    this.age = age;
    this.approvedCourses = approved;

    if (params && Object.keys(params).length) {
      for (const param in params) {
        if (Object.hasOwnProperty.call(params, param)) {
          const item = params[param];
          this[param] = item;
        }
      }
    } 
  }

  approveCourse(course) {
    this.approvedCourses.push(course);
  }
}

const natalia = new Student2({
  name: 'Natalia',
  age: 20
}, {
  sexo: 'F',
  twitter: 'twitter.com/natalia',
  foo: 'bar'
});

class Student {
    constructor({name, age, email, approved = []}){
        this.name = name;
        this.age = age;
        this.email = email;
        this.approved = approved;
    }
    addApproved(curso){
        this.approved.push(curso);
    } 
}
const alexander = new Student({
    name: "Alexander", 
    age: 21, 
    email: "alexander@mail.com",
});

Resumen

¿Qué son las clases en JavaScript?

Funciones de las clases de JavaScript

class Student2 {
    constructor(name, age, approvedCourses) {
        this.name = name;
        this.age = age;
        this.approvedCourses = approvedCourses || [];
    }

    aprobarCurso(nuevoCurso) {
        this.approvedCourses.push(nuevoCurso);
    }
}

Creación y manipulación de instancias

const miguelito = new Student2("Miguel", 28, ["Curso de análisis de negocios", "Principios de visualización de datos"]);
miguelito.aprobarCurso("Tablón");

¿Cómo usar objetos en los parámetros de funciones?

Parámetros como objetos

class Student2 {
    constructor({name, age, email, approvedCourses = []}) {
        this.name = name;
        this.age = age;
        this.email = email;
        this.approvedCourses = approvedCourses;
    }

    aprobarCurso(nuevoCurso) {
        this.approvedCourses.push(nuevoCurso);
    }
}

const miguelito = new Student2({
    name: "Miguel",
    age: 28,
    email: "miguelito@platico.com"
});

Al emplear esta estructura, se obtiene la flexibilidad de definir el orden de propiedades como se desee y añadir nuevas sin alterar el funcionamiento del código existente.

Ventajas del uso de clases en JavaScript

Compatibilidad visual y sintáctica: Las clases en JavaScript recuerdan a las de otros lenguajes, lo que facilita su comprensión para programadores acostumbrados a paradigmas orientados a clases.
Claridad en el código: Aunque internamente sigamos utilizando prototipos, la sintaxis clara de las clases mejora la legibilidad.
Facilidad para el manejo de objetos complejos: La capacidad de trabajar con objetos como parámetros facilita la modularidad del código, permitiendo estructuras más complejas sin perder organización.

JavaScript Orientado a Objetos

Fundamentos de Programación Orientada a Objetos en JavaScript

Programación Orientada a Objetos con JavaScript: Fundamentos y Aplicaciones

Conceptos Básicos de Programación Orientada a Objetos

Objetos, clases y prototipos

Objetos y prototipos en JavaScript: diferencias y usos

Objetos Literales y Prototipos en JavaScript

Clases en JavaScript: Sintaxis y Uso Práctico

Comparativa de Objetos Literales y Clases en JavaScript

Pilares de la POO: abstracción y encapsulamiento

Abstracción en Programación Orientada a Objetos con JavaScript

Programación Orientada a Objetos con JavaScript: Clases y Prototipos

Encapsulamiento en JavaScript: Uso de Getters y Setters

Encapsulamiento con Getters y Setters en JavaScript

Módulos en JavaScript: Encapsulamiento y Uso Práctico

Pilares de la POO: herencia y polimorfismo

Herencia en Programación Orientada a Objetos: Tipos de Estudiantes

Implementación de Herencia en JavaScript con Clases

Polimorfismo en Programación Orientada a Objetos

Polimorfismo en JavaScript: Crear y Publicar Comentarios

Próximos pasos

Examen Final de Programación Orientada a Objetos en JavaScript

Clases en JavaScript: Sintaxis y Uso Práctico

Progreso del curso

JavaScript Orientado a Objetos

Objetos, clases y prototipos

Pilares de la POO: abstracción y encapsulamiento

Pilares de la POO: herencia y polimorfismo

Próximos pasos

Recursos

Recursos