A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

Clases en JavaScript

6/17
Recursos

Aportes 38

Preguntas 8

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

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

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

PATR脫N 鈥淩ORO鈥

El patr贸n que menciona JuanDC se llama 鈥淩ORO鈥 del Ingl茅s 鈥淩eceive 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! 馃槃

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

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.

Nadie: 鈥︷煢
Javascript: Bueno los objetos, prototipos y clases son muy diferentes, ac谩 tienen una foto donde lo pueden ver

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

Las Clases son una forma mas bonita de crear prototipos. 馃槃

Entonces eso de usar clases es simplemente sintaxis diferente, interesante 馃槷

//* 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: '[email protected]'
});

Wow de verdad antes no entendia esto de que las clases no existen en JS hasta ahora 馃槂

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: "[email protected]",
});

GRACIAS JUAN!! Tus clases son las mejores 鉂わ笍

JavaScrip es tan potente que puede trabajar tanto con prototipos como clase

JavaScript por naturaleza trabaja con prototipos

Lo que entiendo es que esta implementaci贸n nueva con class viene para ser un poco mas amigable con las funciones constructoras pero todo sigue funcionando de la misma forma. 馃槷

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.

Juan es un capo explicando. Muy bien

Clases en JavaScript
Las clases son en realidad prototipos de JavaScript, az煤car sint谩ctica para hacer m谩s amigable para trabajar con prototipos.

class studentWithClass {
    constructor (name, age, approvedCourse) {
        this.name = name;
        this.age = age;
        this.approvedCourse = approvedCourse;
    }

    passCourse () {
        this.approvedCourse.push(newCourse);
    }
}
// Instanciar objeto a partir de una clase 
const arthur = new studentWithClass (
    'Arthur Licona',
    38,
    [
    'Introducci贸n a la POO', 'POO con JavaScript', 'JavaScript Practico', 'Manupulaci贸n de DOM'
    ],
)

Les dejo mi c贸digo de la clase:

class Student {
  constructor({ name, age, approvedCourses, email }) {
    this.name = name;
    this.age = age;
    this.email = email;
    this.approvedCourses = approvedCourses;
  }

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

const JUAN = new Student({
  name: 'Juan David Castro',
  age: 18,
  email: '[email protected]',
  approvedCourses: [
    'C贸mo Conseguir Trabajo en Programaci贸n',
    'Curso B谩sico de Programaci贸n Orientada a Objetos con JavaScript',
  ],
});

console.log(JUAN);

Tambien les dejo mi repositorio del curso: https://github.com/UltiRequiem/oop-js-platzi 馃槂

Hay una diferencia entre prototipos normales y clases. Si tu tratas de instanciar un objeto Student con una clase antes que es esta clase sea declarada, te saldr谩 el siguiente error:

ReferenceError: Cannot access 'Student' before initialization

Eso no pasa con prototipos. El hoisting se aplica diferente

Con ES6 + en vez de escribir

this.name = name;

se puede utilizar solo

name

Las clases son una sintaxis mas amigables para trabajar con prototipos, es decir las clases por dentro son prototipos en Javascript con una sintaxis muy parecida a los lenguajes basados en programacion orientada a objetos

Seg煤n la definici贸n de la tecnolog铆a, esta es utilizada para satisfacer las necesidades de las personas, incluyendo facilitar el trabajo.
Entonces si bien la sintaxis de clase es lo mismo que la sintaxis original, que es como trabaja JS, esta ayuda a facilitar la forma de trabajar con objetos.
Por lo que a mi punto de vista es mejor trabajar de esta manera, pero tambi茅n es necesario comprender c贸mo funciona realmente algo.
Sin embargo no importa la forma en que lo hagas, lo importante es que sepas c贸mo funciona y hacerlo bien.

馃摦 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.

class Materia{
    constructor({
        nombre,
        maxEstudiantes,
        listaEstudiantes=[],
        profesor = null,
    }){
        this.nombre= nombre;
        this.maxEstudiantes= maxEstudiantes;
        this.listaEstudiantes = listaEstudiantes
        this.profesor=profesor;
    }

    inscribirEstudiante(estudiante){
    
        if (this.listaEstudiantes.length<this.maxEstudiantes && this.listaEstudiantes.includes(estudiante)==false){
            this.listaEstudiantes.push(estudiante);
        }else{
            console.log("El estudiante ya esta inscrito");
        }
    }

    retirarEstudiante(estudiante){
        let posicion;
       for (const estudiante in this.listaEstudiantes) {
           if(estudiante==this.listaEstudiantes[estudiante]){
            posicion=parseInt(estudiante);
           }
           
        }

        this.listaEstudiantes.splice(posicion,1);
    }
}

Excelente clase, se aprende un mont贸n y m谩s con la forma en que Juan hace ver las cosas.

Aqui esta mi codigo de esta clase:

// Little Platzi
class AnotherStudent {
	constructor(namer, ager, coursesApproved, email = '@social') {
		this.name = namer;
		this.age = ager;
		this.coursesApproved = coursesApproved;
		this.email = email;
	}

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

class Student {
	constructor({namer, ager, coursesApproved, email = '@social'}) {
		this.name = namer;
		this.age = ager;
		this.coursesApproved = coursesApproved;
		this.email = email;
	}

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

const anotherWalker = new AnotherStudent('Walker', 24, ['Are you ok, Annie', 'Smooth Criminal']);
const walker = new Student({ email: "[email protected]", namer: 'Walker', ager: 33, coursesApproved: ['Are you ok, Annie', 'Smooth Criminal']});

ayuda mucho mandar en objeto como par谩metro a nuestra clase XD

incre铆ble lo c贸modo que me resulta JS, RORO, definitivamente 馃憣, marca la diferencia muy c贸modo al trabajar.

Esto es una caracter铆stica relativamente nueva de JS, 驴No?

Excelente profesor, muy esmerado en explicar al detalle!

Buen dia campeon鈥 excelente explicacion, gracias鈥

el patron de programacion, no se si lo escribi bien, si alguien sabe la correcta escritura por twitter.

que bonito conocer como funciona este lenguaje a fondo.

class Student2 {
    constructor({
        name,
        age,
        approvedCourses,
        email,
        facebook = "",
        twitter = "",
        instagram = "",
    }) {
        this.name = name
        this.age = age
        this.approvedCourses = approvedCourses,
        this.email =  email
        this.facebook = facebook
        this.twitter = twitter
        this.instagram = instagram
    }
    approveCourse(newCourse) {
        this.approvedCourses.push(newCourse)
    }
}

// Creando una nueva instancia de la clase Student2
const miguel = new Student2({
    name: "Miguel",
    age: 20, 
    email: "[email protected]",
    approvedCourses: [
        "Curso 1",
        "Curso 2",
        "Curso 3",
        "Curso 4",
    ],
})

miguel.approveCourse("Curso 5")

EXCELENTE explicaci贸n del profe鈥hora todo toma sentido鈥