Definiendo Clases en JavaScript

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

Si estás interesado en aprender JavaScript desde ahora debes saber que el concepto de clases no existía como tal hasta el nuevo estándar EcmaScript 6. El reto de encontrar sistemas construidos con este estándar es alto por esa razón te explicaré cuál fue por mucho tiempo su equivalente.

Los Prototipos fue la forma de crear clases en JavaScript y las representaremos partiendo de la declaración de una función.

Creemos nuestras clases:

Account
Car
Payment
Route

Para esto crearemos el siguiente sistema de archivos dentro de la carpeta JS de nuestro proyecto:

Account.js
Car.js
Payment.js
Route.js
index.js

El archivo index.js será el lugar equivalente al punto de entrada de la aplicación donde estaremos declarando nuestros objetos basado en las clases. Para esta clase lo dejaremos en blanco.

Ahora veamos el código archivo por archivo:

Account.js

Car.js

Payment.js

Route.js

Este es el enlace del código del proyecto: https://github.com/anncode1/Curso-POO-Platzi/tree/f5725787165b36cae579f94e428068039b554b0b/JS

En este código notarás el uso de la palabra reservada this. Normalmente cuando usamos la sintaxis punto siempre lo haremos a partir de un objeto instanciado, en este caso con this, se hace una simulación al objeto en cuestión, a pesar de que en ese momento visualmente sigue siendo una clase.

Digamos que se adelanta un poco al momento de ejecución y visualiza al objeto con sus atributos, más adelante verás la forma en que podemos asignar datos a un atributo del objeto en otros lenguajes y verás que es exactamente la misma sintaxis.

Si intentaramos poner this. en el momento de ejecución nos traería un listado de todos los componentes de la clase que en este caso son solo estos tres: id, init y end.

This hace referencia al objeto instanciado. Para comprender del todo esta última frase mira la siguiente clase donde hablamos de objetos.

Reto.

En la carpeta de nuestro proyecto PHP declara estas mismas clases: Puedes utilizar esta clase de apoyo: https://platzi.com/clases/1338-php/12929-programacion-orientada-a-objetos1172/ Inténtalo y compártenos tus resultados, compáralos con tus compañeros.

Jose Martin Pardo Morales

student•

Account.php
CODIGO

<?php class Account { public $id = integer; public $name = string; public $document = string; public $email = string; public $password = string; } Car.php CODIGO <?php class Car { public $id = integer; public $license = string; public $driver = string; public $passengers = integer; } Payment.php CODIGO <?php class Payment { public $id = integer; } Route.php CODIGO <?php public $id = integer; public $start = float; public $end = float; }

Álvaro Moscoso Muñoz

student•

Las variables $start y $end deben ser Arrays:

public $start = Array();
public $end = Array();

Nestor Anibal Lagos Guacaneme

student•

Gracias por el aporte Siempre se debe iniciar con "<?php"? Solo se coloca al inicio?

Jorge Ossa

student•

Hola esta es la estructura de archivos:

Y esta la forma como cree las clases en cada archivo respecticvamente:

Kevin Andrés Rincón Flórez

student•

Nice!

Sebastian Beltran Zapata

student•

gracias

Paul Cortes

student•

fidel angel ochoa

student•

gracias, me hacia falta <?php

Rubén Ernesto Aragón Gil

student•

gracias, master.

Aldo Miguel Ortiz Parodi

student•

17. Mis apuntes sobre: "Definiendo clases en JavaScript"

En este caso no estoy de acuerdo, hay manera de declarar clases en JavaScript, y lo comparto en código:

Account.js

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

' ' Car.js

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

' ' Payment.js

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

' ' Route.js

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

' ' Ahora respecto a PHP, comparto el código lo pude hacer: account.php

<?php
class Account{
    public $id;
    public $name;
    public $document;
    public $email;
    public $password;    
}

' ' car.php

<?php
class Car{
    public $id;
    public $license;
    public $driver;
    public $passenger;
}

' ' payment.php

<?php
class Payment {
    public $id;    
}

' ' }route.php

<?php
class Route {
    public $id;
    public $start;
    public $end;   
}

Vanesa Percy

student•

Gracias por el aporte, excelente.

Aldo Miguel Ortiz Parodi

student•

Vengo del futuro, y me refuto en parte. JavaScript no está diseñado para usar clases, es algo que agregaron luego, pero sí es posible usar esas palabras clave si así se requiere.

Jose Luis Barbosa Cepeda

student•

Para sacar las fotos asi descarguen la extension CodeSnap en Visual Studio code :)

Edwinsiño Joan Josue Castañeda Paz

student•

Excelente complemento, muchas gracias

Josue Israel Rojas Vilca

student•

Excelente extensión compañero para sacar capturas de pantalla en VSCode

Usuario anónimo

user•

💙 Definición de las clases en el lenguaje de programación Dart.

class Account {
  int id;
  String name;
  String document;
  String email;
  String password;
}

class Car {
    int id;
    String license;
    String driver;
    int passenger;
}

class Payment {
    int id;
}

class Route {
    int id;
    List<double> start;
    List<double> end;
}

Stanley Melgar

student•

Es muy similar a C# ~

Sebastián Arredondo Posada

student•

Thanks for sharing it.

Sergio Armando Medina Chaparro

student•

Listo. Me gusto mucho el ejercicio. Por cierto aprendí de los otros que a los atributos "init" y "end" tocaba iniciarlos como array(). ¡Gracias!

Xavier Sebastian Vaca Ordoñez

student•

Una aclaracion para todos PHP es un lenguaje de programación diseñado para la web que es de tipado dinamico. esto quiere decir que a la hora de declarar una variable no es necesario colocar el tipo de dato de esa variable como en java o C#. PHP hasta donde yo se es interpretado lo que quiere decir que se ejecuta linea por linea y no creando un byte code. Si quieren profundizar mas en PHP el framework Laravel es una buena opcion

José Antonio Contreras Arzate

student•

++Account.php++

<?php
    class Account {
        public $id;
        public $name;
        public $document;
        public $email;
        public $password;
    }
?>

++Car.php++

<?php
    class Car{
        public $id;
        public $license;
        public $driver;
        public $passenger;
    }
?>

++Payment.php++

<?php
    class Payment{
        public $id;
    }
?>

++Route.php++

<?php
    class Route{
        public $id;
        public $init;
        public $end;
    }
?>

Julian David Montoya Restrepo

student•

¿que tal se ve en c++?

Camilo Alfonso Suarez

student•

Lucas Abalos

student•

Me sirvio, gracias!

DANIEL TENOCH SANCHEZ GARCIA

student•

Esta cool nada mas que creo que te falto

public $name;

en Acount

Benito perez

student•

No deberían de actualizar este tema utilizando la palabra clave Class de Javascript a partir de ECS6?

Carlos Eduardo Gomez García

teacher•

No, porque esta es la forma real de definir clases en JavaScript, siempre ha sido y siempre será así. La palabra class de JavaScript (que de hecho se ve más adelante) es solo suggar syntax, pero internamente acaba siendo esto que aprendes aquí ;)

Te recomiendo el Curso de Programación Orientada a Objetos en JavaScript para que lo entiendas mejor :D

Mateo Alberto Ossa Barrios

student•

pues sí deberían explicar eso primero, y aunque lo que dice RetaxMaster es cierto, sin embargo la nueva forma es mucho mas limpia y facil de entender, y si al final es lo mismo escribir con una que con otra, lo mejor es hacerlo con la que sea mas facil de leer, ya despues de eso deberían explicar como realmente funciona por debajo para darte un entendimiento mayor que podría ser util a futuro tanto para problemas en concreto que puedan surgir como para entrevistas

María Raquel Martínez Urrutia

student•

Para los que no sabemos qué es ECMAScript, les dejo el siguiente artículo: https://openwebinars.net/blog/que-es-ecmascript/

Jorge Leonardo Cárdenas Montenegro

student•

A partir de ecmascript 6 se implemento el uso de clases eso sin dejar de lado los prototipos. Simplement se uso para mejor comprensión y uso de POO.

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

Por otra parte PHP en su versión 8 se puede dejara de instanciar los atributos como se ha venido haciendo y se pueden usar desde el constructor de manera muy parecida al ejemplo colocado con javascript. Esto permite ahorrar lineas de código.

class Account {
    public $id;
    public $name;
    public $document;
    public $email;
    public $password;
}

Paula Scatarelli

student•

Hola, quienes estamos con Python nos salteamos esta clase? Ya que por el momento no le estoy prestando atención a Java para no hacerme lío

Mauricio Gonzalez Falcon

student•

Hola! No se sí afecte realmente saltarse la clase durante el examen, pero es posible.

Además lo importante es aprender como funcionan las clases dentro de cada lenguaje de programación, lo cual puede serte útil en caso de que quieras cambiar de lenguaje de programación en un futuro o entender mejor el POO.

Espero te sirva de algo, saludos!

Àlex Grau Roca

student•

"El saber no ocupa lugar". Aunque no termines usando esos lenguajes, al menos a corto plazo, siempre viene bien conocer distintos, ya que nunca se sabe lo que te depara el futuro. Además, cada uno tiene sus pros y contras, por lo que conocer varios lenguajes te permitirá poder seleccionar las mejores herramientas para resolver los problemas y, por ende, ser una mejor profesional.

Michelle Estefanía Arias López

student•

Account.php

&lt;?php
class Account {
    public $id;
    public $name;
    public $document;
    public $email;
    public $password;
}
&gt;?

Car.php

&lt;?php
class Car {
    public $id;
    public $license;
    public $driver;
    public $passenger;
}
?&gt;

index.php

&lt;?php
    echo 'Hola Mundo';
?&gt;

Payment.php

&lt;?php
class Payment {
    public $id;
}
?&gt;

Route.php

&lt;?php
class Route {
    public $id;
    public $init= [
        'longitude' =&gt; '',
        'latitude' =&gt; ''
    ];
    public $end= [
        'longitude' =&gt; '',
        'latitude' =&gt; ''
    ];
}
?&gt;

Daniel Jussef Zamorano Silva

student•

Gracias!

Usuario anónimo

user•

Hola, compañeros. Estoy tomando el curso para aplicarlo en JS y lo de las clases lo intenté aplicar con EcmaScript 6. Lo hice así, si es que en algo está mal o puede mejorar espero que me lo puedan comentar. Gracias <3

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

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

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

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

Juan Carlos Bonilla González

student•

Jeampierre Andres Tenesaca Fuentes

student•

<?php class Account { $public id; $public name; $public email; $public password; }

ANIBAL OZIEL ALVARADO CERVANTES

student•

Hola : Me podrían apoyar con lo siguiente :

1.- Como instalo PHP ??? 2.- Porqué en vscode no me salen las letras a color ???.

Nota : Ya instale los Plugins.

¡Saludos!

Atte.

Aníbal.

Carlos Eduardo Gomez García

teacher•

¡Hola! Para lo primero, ¿en qué sistema operativo estás? 🤔

Para lo segundo, ¿puedes poner una captura de pantalla por favor?

ANIBAL OZIEL ALVARADO CERVANTES

student•

Hola : Estoy en Windows.

Para lo segundo estoy tratando de poner la captura de pantalla, primero en paint, copiarlo y pegarlo aquí, pero no se despliega nada. favor de indicarme si hay otras formas de pegar la pantalla ?

¡Saludos!

Atte.

Aníbal

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

&lt;?php
class Route {
    public $id;
    public $init= [
        'longitude' =&gt; '',
        'latitude' =&gt; ''
    ];
    public $end= [
        'longitude' =&gt; '',
        'latitude' =&gt; ''
    ];
}
?&gt;

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

Definiendo Clases en JavaScript

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

JavaScript orientado a objetos, lo más nuevo

Declarando un método constructor en Python

Herencia

Aplicando herencia en lenguaje Java y PHP

Solución del reto de herencia en PHP

Aplicando herencia en lenguaje Python y JavaScript

Otros tipos de Herencia

Reto 4

Encapsulamiento

Encapsulamiento

Encapsulando atributos en Java

Polimorfismo

Generando polimorfismo en Java

Generando polimorfismo en PHP

Cierre del curso

El Diagrama UML de Uber

Conclusiones

Bonus: Qué es la Programación Orientada a Objetos