Bienvenida e Introducci贸n

1

驴Por qu茅 aprender Programaci贸n Orientada a Objetos?

2

驴Qu茅 resuelve la Programaci贸n Orientada a Objetos?

3

Paradigma Orientado a Objetos

4

Lenguajes Orientados a Objetos

5

Instalando Visual Studio Code

6

Diagramas de Modelado

7

Qu茅 es UML

Orientaci贸n a Objetos

8

Objetos

9

Abstracci贸n y Clases

10

Modularidad

11

Analizando Uber en Objetos

12

Reto 1: identificando objetos

Programaci贸n Orientada a Objetos. An谩lisis

13

Clases en UML y su sintaxis en c贸digo

14

Modelando nuestros objetos Uber

15

驴Qu茅 es la herencia?

16

Aplicando Herencia a nuestro proyecto Uber

17

Reto 2: analicemos un problema

Clases, Objetos y M茅todo Constructor

18

Creando nuestras carpetas iniciales para el curso

19

Definiendo clases en Java y Python

20

Definiendo Clases en JavaScript

21

Objetos, m茅todo constructor y su sintaxis en c贸digo

22

Objetos. Dando vida a nuestras clases en Java y Python

23

Declarando un M茅todo Constructor en Java y JavaScript

24

JavaScript orientado a objetos, lo m谩s nuevo

25

Declarando un m茅todo constructor en Python

Herencia

26

Aplicando herencia en lenguaje Java y PHP

27

Soluci贸n del reto de herencia en PHP

28

Aplicando herencia en lenguaje Python y JavaScript

29

Otros tipos de Herencia

30

Reto 4

Encapsulamiento

31

Encapsulamiento

32

Encapsulando atributos en Java

Polimorfismo

33

Generando polimorfismo en Java

34

Generando polimorfismo en PHP

Cierre del curso

35

El Diagrama UML de Uber

36

Conclusiones

37

Bonus: Qu茅 es la Programaci贸n Orientada a Objetos

Curso de Programaci贸n Orientada a Objetos: POO

Curso de Programaci贸n Orientada a Objetos: POO

Anah铆 Salgado D铆az de la Vega

Anah铆 Salgado D铆az de la Vega

JavaScript orientado a objetos, lo m谩s nuevo

24/37

Lectura

A partir de las nuevas especificaciones del EcmaScript 6 ya podemos declarar una clase con la palabra reservada class, aunque es importante aclarar que estos no dejan de ser prototipos, sino todo lo contrario.

...

Reg铆strate o inicia sesi贸n para leer el resto del contenido.

Aportes 259

Preguntas 9

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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 鈥淨uick 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 鈥渃lase鈥 en vez de 鈥渇unction鈥 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(鈥淚mprimir 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(鈥淎W5673鈥, new Account(鈥淲yatt Manuel鈥, 鈥淣inguno鈥));

car.printDataCar();

console.log(鈥淚mprimir 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?

Hola, les comparto mi codigo. Decidi crear en el directorio llamado ES6 en la raiz del proyecto 鈥淐ursoPOOUber鈥, 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 鈥渋ndex.js鈥 con la extensi贸n "Code Runner"agregando al directorio un archivo 鈥減ackage.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

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

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:

He transcrito tal cual todos los archivos y me arroja un mensaje de error en la consola del navegador. 鈥淭ypeError: 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(鈥淐AR001鈥,鈥淟ICE-001鈥,new Account(鈥淎CC-002鈥, 鈥淒RIVER 1",鈥1001001鈥,"[email protected]鈥,鈥1234鈥),鈥4鈥 );
car.printDataCar();

var account = new Account(鈥淎CC-001鈥,鈥淯SER 1",鈥淒OC100鈥,"[email protected]鈥,鈥淧ASS鈥 );
account.printDataAccout();

var route = new Route (鈥淩OUTE-001鈥,鈥100.100鈥, 鈥330.200鈥,鈥250鈥);
route.printDataRoute();

var payment = new Payment(鈥淧AY-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 鈥淥bjetos鈥 basado en 鈥淧ROTOTIPOS 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

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 鈥渄river鈥 se crea una nueva instancia heredando a Account, es decir ahora 鈥渄river鈥 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 鈥渄river鈥 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.

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
};