JavaScript orientado a objetos, lo más nuevo

Les recomiendo hacer esta ligera modificación en el método de PrintDataCar :

printDataCar = () => {
        console.table(this.driver) //imprimirá una tabla con todos los datos
        console.log(this.driver.name)
        console.log(this.driver.document)
    }

Estp está genial, aunque so quieren hacer esto rápido, en VSCode, si notan, en los nombres de las clases en las que usamos function, aparecen 3 puntitos, puedes posicionar el cursor ahí y seleccionar “Quick fix” y VSCode solito hará todo el trabajo 😄!

Para la declaración de la función printDataCar, también pueden utilizar las arrow functions :

printDataCar = () => {
        console.log(this.driver);
        console.log(this.driver.name);
        console.log(this.driver.document);
    }

holap buenas tardes por aca les dejo este link para aquellos que deseen saber mas del ES6 (EcmaScript6) y descargarse el pdf:
https://blog.enriqueoriol.com/wp-content/uploads/2016/05/Aprende-ES6-Javascript-moderno-Guía-práctica.pdf

😃 EcmaScript 6 es un estándar, que determina cómo emplear el lenguaje JavaScript. Esto nos permite trabajar con clases de forma correcta.

Increíble, cuando ya me estaba rindiendo cambie todo y me di cuenta de que mi error estuvo en que no guardaba el contenido que tenía en cada clase y por eso no me cargaba mi index.html

Buenas.

Podemos aprovechar alguna otra cosilla de ES6, como los string literals.

printDataCar() {
	console.log(`Objeto: ${this.driver}`);
	console.log(`Name: ${this.driver.name}`);
	console.log(`Document: ${this.driver.document}`);
	console.log(`License: ${this.license}`);
}

Un saludo.

Car.js

class Car {
  constructor(license, driver){
    this.id;
    this.license = license;
    this.driver = driver;
    this.passanger;
  }
  printDataCar (){
    console.log(this.driver)
    console.log(this.driver.name)
    console.log(this.driver.document)
  }
}

Account.js

class Account {
  constructor(name, document){
    this.id;
    this.name = name;
    this.document = document;
    this.email;
    this.password;
  }
}

index.js

let car =
  new Car("AW456", new Account("Andres Herrera", "QWE234"))
car.passenger = 4;
car.printDataCar();

Route.js

class Route {
  constructor(){
    this.id;
    this.init;
    this.end;
  }
}

Me gusta más esta estructura dado que tiene una gran similitud a los demás lenguajes.

Porque en la clase Car, para imprimir ponen driver. document y driver.name?

Qué manera tan espectacular de entender el concepto de herencia, bueno para quienes quieran encontrar una pista de cómo saber en qué momento se aplica este concepto, puede hacer uso de las relaciones por ejemplo tiene sentido decir:
Un bus es un automóvil
Un uberpool es un automóvil
Un cliente es una persona
Un empleado en una persona
Un pasajero **en una **persona
Esta relación nos puede dar una mejor idea de cómo definir nuestra clase padres y nuestras clases hijas.

Es bueno que JS halla incluido estas palabras reservadas ya que hacen que sea más fácil de entender su enfoque a POO para los que están empezando o e venimos netamente de trabajar con programación estructurada.

JS

JAVA

Me gusta muchísimo más este estándar

Que bueno esta actualización, se asemeja mucho a los demás lenguajes de programación.

En este link encontraras un articulo sobre curiosidades de JavaScript

estupendo no olvides ir a Fundamentos de JS

es mas practico de esta forma y creo que me oriento un poco mejor estableciendo la clase con el metodo

gracias por la actualización, esto desde qué año se da?

Hay alguna forma de exportar las clases como módulos? que solo tenga que llamar el index.js?

Gracias.

Excelente, ahora es mucho más fácil asociarlos y compararlos a otros lenguajes

ya tenia miedo que en este curso no usaran las clases de JavaScript

No sabía que el tema de class de javascript era relativamente nuevo

Gracias, efectivamente me tenía muy preocupado que no se use la palabra reservada Class, aunque muchos digan que es un sintax sugar, sigue siendo válido, además se cuentan con varios sustentos que explican que no solo se trata de llamar “clase” en vez de “function” en JS, sino que por debajo, hay más de una diferencia.
Fuente: StackOverflow

Por si es de su interés…
Para las funciones también existen varias formas de declararlas, por ejemplo con las funciones de flecha que simplifican el código

printDataCar() {
console.log(“Imprimir datos con función común”);
console.log(this.driver);
console.log(this.driver.name);
console.log(this.driver.document);
}

prinDataCar2 = () => console.log(this.driver);

prinDataCar3 = () => {
    console.log("Imprimir datos con función de flecha con varias líneas de código");
    console.log(this.driver);
    console.log(this.driver.name);
    console.log(this.driver.document);
};

Y se mandan a llamar de la misma forma

var car = new Car(“AW5673”, new Account(“Wyatt Manuel”, “Ninguno”));

car.printDataCar();

console.log(“Imprimir datos con función de flecha con una línea de código”);
car.prinDataCar2();

car.prinDataCar3();

Así todo es más claro… 🙂

Excelente, definiticamente Ecma Script ha aportado mucho a JS como especificación, seguimos…

Mejor asi.

Se entiende mejor utilizando class y el constructor.

¿por qué en el constructor de la clase Car no se coloca como argumento un objeto Account?

Uff no me gusta andar haciendo cambios sobre lo que aprendí hace 10 minutos, pero parece que no queda otra. Hay que actualizarse.

Hola, les comparto mi codigo. Decidi crear en el directorio llamado ES6 en la raiz del proyecto “CursoPOOUber”, la razon es que me gustaria trabajar el proyecto de JavaScript pero con EcmaScript 6 😃

De pronto a alguien le sirve! (y si no hay un post de esto)…
Si se ha instalado node.js previamente, podes correr el “index.js” con la extensión "Code Runner"agregando al directorio un archivo “package.json” con las siguientes líneas:

{
  "main": "index.js",
  "type": "module"
}

en Account.js:

export default Account;

en Car.js:

export default Car;

en index.js:

import Account from "./Account.js";
import Car from "./Car.js";

listo queda de la siguiente forma

class Car {

    constructor(license, driver) {
        this.id;
        this.license = license;
        this.driver = driver;
        this.passenger;
    }

    printDataCar() 
    {
        console.log(this.driver)
        console.log(this.driver.name)
        console.log(this.driver.document)
    }
}

aun me cuesta trabajo entender lo de los constructores, quieren decir que puedo yo inicializar mi objeto con los atributos que yo quiera o mas bien como lo solicite el proyecto??

Hola 😃 Me encanta más la sintaxis de ES6

Aquí de nuevo mi clase Car.js

import { Account } from “./Account.js”;
Estoy declarando mis variables con los tipos de datos esperados para que sea más legible el código y saber que esperamos que contenga cada variable.
id = Number(); license = String(); driver = new Account(); passenger = Number();

export class Car {
  id = Number();
  license = String();
  driver = new Account();
  passenger = Number();
  constructor(
    license = String(),
    driver = new Account(),
    passenger = Number()
  ) {
    this.license = license;
    this.driver = driver;
    this.passenger = passenger;
  }

  printDataCar() {
    console.log(
      `License: ${this.license}. Driver: ${this.driver.name}. Document: ${this.driver.document}. Passengers: ${this.passenger}`
    );
  }
}

En el navegador me sale un error de que printDataCar no es una funcion.

index.js :

var car = new Car("AWD234", new Account("Andres Herrera", "JSJSJSJ"))
car.passenger = 4;
car.printDataCar();

Car.js :

class Car {
    constructor(license, driver) {
        this.license = license;
        this.driver = driver;
        this.id;
        this.passenger;
    }
}

function printDataCar() {
    console.log(this.driver)
    console.log(this.driver.name)
    console.log(this.driver.document)
}

Se me complica un poco mas en javascript

Mientras mas pasa el tiempo mas sencillo se vuelven los procesos, thanks!.

Pinta muy bien EcmaScript 6

me pregunte que no declaraste los atributos globales antes de ser cargados en el método constructor, veo que se simplifico eso, así como la palabra reservada funtion como bien lo indicas en la lectura!

Excelente, muchisimo mejor y más asociado a los otros lenguajes.

jejej 6 meses viendo java y no lo habia entendido perfectamente hasta que llegue a este curso! 😄

Es mucho mas practico usar este tipo de estructura para javascript 😄 !!!

se ve mucho mejor, antes era confuso decirle funcion a lo que iba a ser una clase

Muy buenas actualizaciones, la verdad si se comprende mejor!! muchas gracias ❤️

Lo entendí mejor (:

Aquí información para usar clases en JavaScript:

• https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Classes

He transcrito tal cual todos los archivos y me arroja un mensaje de error en la consola del navegador. “TypeError: This.driver is undefined”

Lo había echo de esta manera desde un principio ya que sabía que se podía usar class en JS

Genial 🙌

Easy peasy.

Genial

costo implementarlo, pero lo logre

vientos de luejo

Me paso que cuando escribía el nombre de la Clase, me di cuenta que le ponía unos puntitos amarillos debajo y jugando con eso decubri el constructor, pero como no le quitaba la palabra function no funcionaba, muy buenas las clases, gracias, Anahí

Es mucho más fácil así!

Esta nueva actualizacion esta mucho mejor, hace mas simple e intuitiva la sintaxis de la POO en JavaScript.

Es tan satisfactorioo ❤️

var car = new Car(“CAR001”,“LICE-001”,new Account(“ACC-002”, “DRIVER 1",“1001001”,"[email protected]”,“1234”),“4” );
car.printDataCar();

var account = new Account(“ACC-001”,“USER 1",“DOC100”,"[email protected]”,“PASS” );
account.printDataAccout();

var route = new Route (“ROUTE-001”,“100.100”, “330.200”,“250”);
route.printDataRoute();

var payment = new Payment(“PAY-001”);
payment.printPaymentData();

class Account {
constructor (id, name, document, email, password){
this.id= id;
this.name=name;
this.document=document;
this.email=email;
this.password= password;
}

printDataAccout (){
    console.log("THE ACCOUNT ID IS ",this.id);
    console.log("THE ACCOUNT NAME IS ",this.name);
    console.log("THE ACCOUNT DOCUMENT IS",this.document);
    console.log("THE ACCOUNT EMAIL IS",this.email);
}

}

Lo que mas me gusta de Platzi, es que siempre complementa con tips y formas nuevas de como se deben y se usan las diferentes herramientas de tecnología, en este caso el nuevo estándar ECMAScript 6

Se parece mas a java con esa nueva actualización

DATA para aquellos como yo que no nos gusta mucho esto del index.html y ver la consola en el navegador. Pueden usar nodeJS y ejecutar en consola.

realizado el cambio

Es simplemente hermoso…

Gracias por compartir con nosotros el cambio que se ha realizado en EMCSJS6, ahora la sintaxis es muy clara.

parece que es mucho mas facil de entender de esta manera

Es mejor esta actualizacion

De esta manera se entiende mejor el código.

Genial!

Que chulada!

JS esta trabajando para no quedarse a trás.

Mucho mejor!

Es redundante que ES6 soporte algunas características de OOP mediante “Objetos” basado en “PROTOTIPOS Y PSEUDOCLASES”

![](

JS es de los primeros en implementar los cambios aprobados por el grupo de los 9 😄

no sé por qué pero me tocó cambiar el nombre del atributo document ya que el entornno de desarrollo lo detectaba como algo especial. quiza por el uso de HTML.
al final solo cambié el nombre y sirvió

Que nota ese VsCode

Lo nuevo de Javascript

ECMAScript es el estándar en el que se basa JavaScript, y su última versión, ES6 o ECMAScript 2015, trajo muchas mejoras al lenguaje, incluyendo nuevas características orientadas a objetos. A continuación, te presentaré algunas de las novedades que trajo esta versión.

Clases

ES6 introdujo la sintaxis de clase en JavaScript, lo que permitió que la programación orientada a objetos se sintiera más natural en este lenguaje. La sintaxis es muy similar a la que se utiliza en otros lenguajes como Java o C++.

class Car {
  constructor(brand, model, year) {
    this.brand = brand;
    this.model = model;
    this.year = year;
  }

  drive() {
    console.log(`Driving a ${this.brand} ${this.model} from ${this.year}`);
  }
}

const myCar = new Car("Toyota", "Corolla", 2020);
myCar.drive(); // Output: "Driving a Toyota Corolla from 2020"

En este ejemplo, creamos una clase Car con un método constructor que recibe tres parámetros: brand, model y year. Dentro del constructor, creamos las propiedades brand, model y year en el objeto que se está creando (this). Además, definimos un método drive() que simplemente imprime un mensaje en la consola con las propiedades de la instancia.

Después, creamos una instancia de la clase Car utilizando la sintaxis new Car(...), y guardamos esta instancia en la variable myCar. Finalmente, llamamos al método drive() de la instancia myCar.

Herencia

La herencia es una característica fundamental de la programación orientada a objetos, y ES6 también trajo mejoras en este aspecto. Ahora es posible definir una clase que herede de otra, utilizando la sintaxis extends.

class ElectricCar extends Car {
  constructor(brand, model, year, batteryCapacity) {
    super(brand, model, year);
    this.batteryCapacity = batteryCapacity;
  }

  drive() {
    console.log(`Driving a ${this.brand} ${this.model} from ${this.year} using electric power`);
  }
}

const myElectricCar = new ElectricCar("Tesla", "Model S", 2022, "100 kWh");
myElectricCar.drive(); // Output: "Driving a Tesla Model S from 2022 using electric power"

En este ejemplo, creamos una nueva clase ElectricCar que extiende de la clase Car. Para hacer esto, utilizamos la sintaxis class ElectricCar extends Car, indicando que ElectricCar hereda de Car.

Dentro del método constructor de ElectricCar, utilizamos la palabra clave super para llamar al constructor de la clase padre (en este caso, Car). De esta manera, podemos inicializar las propiedades brand, model y year en la instancia de ElectricCar.

Además, agregamos una nueva propiedad batteryCapacity al objeto this de ElectricCar.

También sobrescribimos el método drive() de la clase Car, para imprimir un mensaje específico para los autos eléctricos.

Finalmente, creamos una instancia de ElectricCar y llamamos al método drive().

🍃 Por alguna razon si asignaba solo el nombre y la licencia, este me lanzaba error, al preguntarle a Chat GPT me respondió que debo asignar todos los valores a los this inicializados. Entonces mi index.js quedó así:

const car = new Car(
	1,
	"AW456",
	new Account(1, "Eduado Reyes", "AW456", "[email protected]", "d-0=dda"),
	"Soy un pasajero"
);
car.passenger = 4;
car.printDataCar();

Aquí mis apuntes 😉

Ahora si tiene un poco mas de logica para mi, porque fue asi como lo aprendi originalmente

RESUMEN CLASE 24:
JAVASCRIPT ORIENTADO
A OBJETOS LO MAS NUEVO

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>POO</title>
</head>
<body>
    <h1>Porgramacion Orientada a Objetos en JavaScript</h1>
</body>
<script src="Account.js"></script>
<script src="Car.js"></script>
<script src="index.js"></script>
</html>

JAVASCRIPT

ACCOUNT

class Account {
    constructor(name, document) {
        this.id;
        this.name = name;
        this.document = document;
        this.email;
        this.password;
    }
}

CAR

class Car {
    constructor(license, driver) {
        this.id;
        this.license = license;
        this.driver = driver;
        this.passenger;
    }
    
    printDataCar = function () {
        console.log(this.driver)
        console.log(this.driver.name)
        console.log(this.driver.document)
    }
}

INDEX

function newFunction() {
    var car = new Car("AW456", new Account("Andres Herrera", "QWE234"));
    car.passenger = 4;
    car.printDataCar();
}

PAYMENT

class Payment {
    constructor() {
        this.id;
    }
}

ROUTE

class Route {
    constructor() {
        this.id;
        this.init;
        this.end;
    }
}

Veo que esto es una actualización del curso, me alegro saber que lo están haciendo y espero que sigan haciendolo, es algo que llevamos pidiendo muchos durante un tiempo. Sigan así 😃

Información resumida de esta clase
#EstudiantesDePlatzi

• En JavaScript a partir de las nuevas especificaciones del Ecmascript 6, podemos declarar una clase con la palabra reservada Class

• Cambiamos el código que anteriormente teníamos escrito definiendo una función para ahora definir una clase con sus constructores

Mi resumen #24

Ver más información sobre la sintáxis class en JS (en inglés)

Utilizando template literals para el método printDataCar()

printDataCar = () => {
        console.log(`Driver: ${this.driver.name} \nDriver document: ${this.driver.document} \nCar license: ${this.license}`);
}

\n se utiliza para dar saltos de línea en strings. Funciona también en Java y Python (no lo he probado en otros lenguajes)

Veo 2 ventajas de usar la palabra reservada class.

1. Esta Hecho para específicamente para clases
2. Simplificamos las funciones dentro de la clase y no usamos .prototype

done

super sata nueva forma, es muy fácil y los cambios son muy pocos y siempre he preferido el método class

**Con ECMAScript 6 se han incorporado al lenguaje varias novedades como nuevas palabras reservadas para definir variables y constantes, símbolos, interpolación de variables en cadenas, desestructuración, forma abreviada para declarar funciones, nueva sintaxis más sencilla para definir clases, objetos de tipo Map y Set, Promises como alternativa a callbacks, el protocolo Iterator y generadores, además de algunas otras cosas que si como yo no habías dedicado tiempo a aprender mejor JavaScript aún te resulten novedosas.

**

Mucho más fácil con EcmaScript 6

Voy a tratar de resumirlo en la forma que yo entendí usando palabras de fácil comprensión, cualquier corrección me la hacen saber 😊
Creamos la clase Car la cual tiene dos atributos (license, driver), posteriormente se crea la clase Account igualmente con dos atributos (name, document), posterior a ello se crea la instancia de Car donde se tienen que pasar los dos atributos inicialmente (license, driver), pero si lo notas en el atributo “driver” se crea una nueva instancia heredando a Account, es decir ahora “driver” contiene los dos atributos de la clase account por ello se colocan los dos datos. Y finalmente cuando se imprime el resultado con console.log --> .this.driver.name y this.driver.document estamos llamando al parametro “driver” que contiene esos dos argumentos heredados de account
Espero les sirva, y cualquier corrección en caso de estar equivocado o en el uso de términos los estaré leyendo 😃

Practicando se aprende

Les dejo este dataso:

console.group()
		console.log(`driver: ${this.driver}`)
		console.log(`car plate: ${this.carPlate}`)
		console.log(`brand: ${this.brand}`)
		console.log(`model: ${this.model}`)
		console.log(`passengers: ${this.passengers}`)
console.groupEnd()

De nada! 😃

Good tutorial !

Asi está mas sencillo, se asemeja cada vez mas a java

Es verdad la sintaxis de las clases en JavaScript E6 es mas fácil por que usa la azúcar sintáctica y es cómodo de entender, pero debemos recordar que tras bambalinas hace la conversión a prototipos por eso es importante entender como funciona realmente.

https://blog.enriqueoriol.com/wp-content/uploads/2016/05/Aprende-ES6-Javascript-moderno-Guía-práctica.pdf

dos formas de realizar lo mismo una por clase y otra por prototipo

Si quieren ver los datos generales de la instancia car pueden utilizar:

printDataCar = () => {
ㅤconsole.log(this);
ㅤ// Regresaría el objeto con todos los datos
};