JavaScript orientado a objetos, lo más nuevo

Clase 24 de 37 • Curso de Programación Orientada a Objetos: POO

Contenido del curso

Bienvenida e Introducción

Orientación a Objetos

Programación Orientada a Objetos. Análisis

Clases, Objetos y Método Constructor

Herencia

Encapsulamiento

Polimorfismo

Cierre del curso

Tomar examen

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.

Además tendremos una palabra clave para definir un constructor, y dentro de este estarán las propiedades de nuestra clase definidas listas para inicializarse.

Transcribamos el código JavaScript que generamos en la clase anterior a este nuevo estándar.

La clase Car quedaría así:

Si quisiéramos declarar un método, en esta nueva sintaxis dejaremos de utilizar la palabra clave function.

Ahora veamos a la clase Account:

Y para finalizar aquí puedes ver las clases Route y Payment:

Notarás que para instanciar un objeto seguiremos usando la palabra clave new.

Y los resultados serán los mismos:

Aquí encuentras el código de este ejercicio: https://github.com/anncode1/Curso-POO-Platzi/tree/3.1.POOJS

Comentarios

Miguel Angel Reyes Moreno

student•

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

Estuardo Leonel Lopez Par

student•

una forma para mostrarlo mejor

Kenyi Julberht Hancco Quispe

student•

Interesante!

Carlos Eduardo Gomez García

teacher•

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 :D!

Sebastián Pineda Ospina

student•

¿Por qué leo esto después de hacer todo a mano? jajajajaj, ¡gracias!

NEXU QUISPE HUAMAN

student•

BUEND DATO¡

Samuel Antonio Rojas Dugarte

student•

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

Miguel Angel Reyes Moreno

student•

Parece que alguien tomó el curso con Sacha jajaja

Moisés Manuel Morín Hevia

student•

Muy buen aporte !

Alejandro Robleto

student•

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%C3%ADa-pr%C3%A1ctica.pdf

Juan Agustin Di Pasquo

student•

Gracias 😄

Nestor Rios Garcia

student•

Muy concreto y fácil de leer, gracias.

Usuario anónimo

user•

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

DARWIN JUAN CARLOS CATUNTA GARCIA

student•

Concuerdo con usted estimado :)

Alin Cristel Sánchez Flores

student•

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

Javi Felices

student•

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.

Jenny Katherine Aguilera Morales

student•

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

Quevin Santiago Martinez Botina

student•

I love you <3

Aderson Rangel Parada

student•

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

Luis Martín

student•

Jaja, a cualquiera. Es más de alto nivel.

Luis Alfredo Valenzuela Dávila

student•

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

Facundo Vergara

student•

porque si mirás la clase car, el campo/atributo driver hereda de account. por eso cuando utiliza driver puede acceder a los atributos y métodos de account. driver.name driver.document

Julio Cesar de la Lima López

student•

Porque driver pasa de ser un objeto con un tipo de dato primitivo a una instancia de la clase Account.

Carlos Eduardo Lozano Miranda

student•

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.

Manuel Mosquera

student•

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.

JAVA

Víctor Rueda

student•

No recordaba muy bien por qué motivo driver accedía hasta name, pero con tu aporte recordé que es porque driver es del tipo de clase Account. Buen aporte y muchas gracias.

Obed Paz

student•

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

Kevin Andrés Rincón Flórez

student•

Mauricio Gonzalez Falcon

student•

Johan Andrey Chala Sanchez

student•

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

Xavier Sebastian Vaca Ordoñez

student•

En este link encontraras un articulo sobre curiosidades de JavaScript

Jhonatan David Ibarra Lavado

student•

estupendo no olvides ir a Fundamentos de JS

Jose Martin Sanabria Flores

student•

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

jorge pavez retamal

student•

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

Luis Ernesto Ochoa Ramírez

student•

Principios de 2019

Jorge Ossa

student•

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

Gracias.

Diego Forero

Team Platzi•

Si es posible, te un link con información que te va a ser útil https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export

Alexis Alberto Texis Auza

student•

SI,ejemplo : utils/classExample/index.js -> ruta class ejemploClass{ constructor(){ //variables,binds... }

ejemploFuncion(){

//codigo } }

*exportar :

module.exports = ejemploClass

Con Es6 export default ejemploClass

*Importando desde otro archivo :

const miClase = require('../utils/classExample') const instanciaDeMiClase = new miClase()

Con Es6 import miClase from '../utils/classExample' const instanciaDeMiClase = new miClase()

Silvana Rolón

student•

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

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

JavaScript orientado a objetos, lo más nuevo

Bienvenida e Introducción

¿Por qué aprender Programación Orientada a Objetos?

¿Qué resuelve la Programación Orientada a Objetos?

Paradigma Orientado a Objetos

Lenguajes Orientados a Objetos

Instalando Visual Studio Code

Diagramas de Modelado

Qué es UML

Orientación a Objetos

Objetos

Abstracción y Clases

Modularidad

Analizando Uber en Objetos

Reto 1: identificando objetos

Programación Orientada a Objetos. Análisis

Clases en UML y su sintaxis en código

Modelando nuestros objetos Uber

¿Qué es la herencia?

Aplicando Herencia a nuestro proyecto Uber

Reto 2: analicemos un problema

Clases, Objetos y Método Constructor

Creando nuestras carpetas iniciales para el curso

Definiendo clases en Java y Python

Definiendo Clases en JavaScript

Objetos, método constructor y su sintaxis en código

Objetos. Dando vida a nuestras clases en Java y Python

Declarando un Método Constructor en Java y JavaScript