Introducción a JavaScript

1

¿Por qué aprender JavaScript?

2

¡Hola Mundo! en Mac

3

¡Hola Mundo! en Windows

4

Anatomía de una variable

5

Tipos de datos en JavaScript

6

Creación de strings

7

Operadores aritméticos

8

Conversión de tipos: Type Casting y Coerción

9

Conversión de tipos explícita e implícita

Estructuras de Control y Lógica

10

Operadores de comparación

11

Operadores lógicos

12

Ejecución condicional: if

13

Ejercicio: Adivina el número

14

Ejecución condicional: switch

15

Loop: for

16

Loop: for of

17

Loop: for in

18

Loop: while

19

Loop: do while

Funciones y This

20

Anatomía de una función

21

Funciones vs Métodos

22

Funciones puras e impuras

23

Arrow function y enlace léxico

24

Contextos de ejecución y scope chain

25

¿Qué es Closure?

26

Preguntas a Desarrolladores Senior: ¿Por qué aprender Desarrollo Web?

Manipulación de Arrays

27

Introducción a Arrays

28

Mutabilidad e inmutabilidad de Arrays

29

Modificación básica del final con push( ), pop( )

30

Iteración con map( ) y forEach( )

31

Filtrado y reducción con filter( ) y reduce( )

32

Búsqueda de elementos con find( ) y findIndex( )

33

Crear copias con slice( )

34

Spread operator: casos de uso

Programación Orientada a Objetos

35

Anatomía de un Objeto

36

Trabajando con objetos en JavaScript

37

Función constructora

38

¿Qué es una clase?

39

Prototipos y herencias

40

Herencia en la práctica

41

Prototipos en la práctica

42

this en JavaScript

43

Proyecto: Crea una red social

44

Proyecto: Crea una red social parte 2

Asincronía en JavaScript

45

¿Cómo funciona el JavaScript Engine?

46

Promesas en JavaScript

47

Usando Async y await en JavaScript

48

For await of

49

¿Cómo funciona la web?

50

¿Cómo funciona HTTP?

51

Método GET en JavaScript

52

Método POST en JavaScript

53

Método DELETE en JavaScript

54

Importancia del id en el método DELETE

55

ECMAScript 6 y tus siguientes pasos

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Herencia en la práctica

40/55
Recursos

Aportes 14

Preguntas 3

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Importante! * Las sub-clases heredan todos los métodos de la clase padre. * Para heredar las propiedades, nosotros debemos usar la keyword super(). Sin esta no podemos acceder al contexto this. * En caso no heredemos una propiedad (argumento), este asumirá un valor de undefined. * Al heredad propiedades con super(), debemos mantener el orden de los argumentos declarados y caso quisiéramos ignorar alguno, le asignamos undefined. ```js class Animal { constructor(nombre, edad, color = 'desconocido', tamaño = 'desconocido', peso = 0) { this.nombre = nombre; this.edad = edad; this.color = color; this.tamaño = tamaño; this.peso = peso; } mostrarInfo() { console.log(`Nombre: ${this.nombre}, Edad: ${this.edad}, Peso: ${this.peso}`); } } class Perro extends Animal { constructor(nombre, edad, peso, raza) { super(nombre, edad, undefined, undefined, peso); // O puedes omitir color y tamaño this.raza = raza; } } const miPerro = new Perro('Rex', 3, 25, 'Labrador'); miPerro.mostrarInfo(); // "Nombre: Rex, Edad: 3, Peso: 25" ```
La **herencia** en JavaScript es un mecanismo que permite a una clase "heredar" propiedades y métodos de otra clase. Esto facilita la reutilización de código y la organización de clases de forma más eficiente. Cuando una clase hereda de otra, la clase hija (o subclase) tiene acceso a las propiedades y métodos de la clase padre (o superclase). La palabra clave `super` se utiliza para llamar al constructor de la clase padre desde el constructor de la clase hija. Es fundamental cuando necesitas inicializar las propiedades que se definen en la clase padre. Solo existe en objetos o funciones constructoras **¿Cómo se utiliza?** La herencia se utiliza cuando tienes una clase con una estructura general y necesitas crear otras clases que sean una versión especializada de la clase base. Para ello, usas la palabra clave `extends` para crear la relación entre las clases, y dentro del constructor de la clase hija, llamas a `super()` para heredar las propiedades y métodos del constructor de la clase padre. **Ejemplo:** ```js // Clase padre estudiante class estudiante { constructor (nombre, edad, grado){ this.nombre = nombre; this.edad = edad; this.grado = grado; } // Método que comparten todos los estudiantes saludar() { console.log(`Hola mi nombre es ${this.nombre} y tengo ${this.edad} años`); } } // Clase hija estudianteUniversitario que hereda de Estudiante class estudianteUniversitario extends estudiante{ constructor (nombre, edad, grado,materiaFavorita){ // Llamamos al constructor de la clase padre con 'super' super (nombre, edad, grado); this.materiaFavorita = materiaFavorita; // Nueva propiedad específica de estudianteUniversitario } mostrarClaseFavorita (){ console.log(`Mi clase favorita es ${this.materiaFavorita}`) } } // Crear una instancia de estudianteUniversitario const estudianteUni = new estudianteUniversitario ("Miguel", 23,"11°", "Matematicas"); // Usamos los métodos heredados y los específicos estudianteUni.saludar(); estudianteUni.mostrarClaseFavorita(); ``` * **Clase padre** `Estudiante`**:** Esta clase tiene las propiedades generales (`nombre`, `edad`, `grado`) y un método `saludar()` que todos los estudiantes pueden usar. * **Clase hija** `EstudianteUniversidad`**:** Esta clase **hereda** de `Estudiante` usando `extends`, lo que significa que también tendrá las propiedades `nombre`, `edad` y `grado`, así como el método `saludar()`. * Dentro del constructor de la clase hija, usamos `super()` para llamar al constructor de la clase padre y pasarle las propiedades que necesita. Luego, agregamos una propiedad nueva (`claseFavorita`) y definimos un método adicional (`mostrarClaseFavorita()`). * **Instancia de** `EstudianteUniversidad`**:** Creamos un nuevo objeto `estudianteUni` usando la clase hija, que hereda de `Estudiante`. Este objeto puede usar tanto los métodos heredados como los propios.
Hola! Les comparto mi práctica de herencias. ```js class Person { constructor(name, age, numberPhone){ this.name = name this.age = age this.numberPhone = numberPhone } showInfo(){ console.log(`Hi, my name is ${this.name}, i´m ${this.age} and my number Phone is ${this.numberPhone} \n` ); } run(){ console.log(`${this.name} is running\n`); } } class Engineer extends Person{ constructor(name, age, degree, salary){ super(name, age); this.degree = degree this.salary = salary } showInfo(){ console.log(`Hi, my name is ${this.name}, i´m ${this.degree} and i earn $${this.salary} a mount \n` ); } work(){ console.log(`${this.name} is programing \n`); } } class Carpenter extends Person{ constructor(name, age, tool){ super(name, age) this.tool = tool } build(){ console.log(`Hi, i´m ${this.name} and i´m building a closet whit a ${this.tool} \n by the way i´m ${this.age} \n`); } } class Assistant extends Carpenter{ constructor(name, age, tool ){ super(name, age, tool) } help(){ console.log(`Hi, i´m ${this.name} and i have a ${this.tool} for work \n`); } } const persona1 = new Person('Jony', 28, 5527384951) const engineer1 = new Engineer('Lucas', 35, 'System Engineer', 1000) const carpenter1 = new Carpenter('Morgan', 40, 'chainsaw') const assistant1 = new Assistant('jordi', 18, 'saw') console.log(persona1); console.log(engineer1); console.log(carpenter1); console.log(assistant1); persona1.showInfo() persona1.run() engineer1.showInfo() engineer1.run() engineer1.work() carpenter1.showInfo() carpenter1.run() carpenter1.build() assistant1.showInfo() assistant1.run() assistant1.build() assistant1.help() ```
Mini Resumen: para heredar metodos se requiere que la clase a heredar utilice la palabra clave extends apuntando a la clase padre, y para heredar atributos(propiedades) se utiliza la palabra clave super(atr1, atr2), las propiedades no heredadas creadas en la clase hija requieren la palabra clave this. en ellas.
![](https://static.platzi.com/media/user_upload/image-6e7ef058-ea18-4e29-9ad3-3fb86d788c31.jpg)
La palabra `super` en JavaScript se usa en el contexto de la herencia. Permite acceder a métodos y propiedades de la clase padre desde la clase hija. Al usar `super()`, llamas al constructor de la clase padre, permitiéndote inicializar el estado heredado. Por ejemplo, en la clase `Perro` que extiende de `Animal`, al usar `super(nombre, tipo)`, estás pasando los parámetros necesarios al constructor de `Animal`. Esto evita duplicar código y facilita la reutilización de funciones. Este concepto es esencial en la programación orientada a objetos.
![](https://static.platzi.com/media/user_upload/Captura%20de%20pantalla%202025-01-03%20a%20la%28s%29%2011.27.09p.m.-8102a1ed-2c0d-4183-b41e-218add8bcc7d.jpg)
**Prototipos:** Son objetos de los cuales otros objetos pueden heredar propiedades y métodos. Proporcionan un mecanismo para compartir funcionalidades entre objetos. **Herencia:** Es el mecanismo que permite que un objeto (subclase) herede propiedades y métodos de otro objeto (superclase). Esto se puede lograr a través de la herencia prototípica o utilizando la sintaxis de clases en ES6. **Tipos de Herencia** 1. **<u>Herencia Prototípica: </u>**Es la forma más común de herencia en JavaScript. Se basa en la relación de prototipos entre objetos. Un objeto puede heredar de otro objeto a través de su prototipo. 2. **<u>Herencia de Clases:</u>** Con la introducción de la sintaxis de clases en ES6, JavaScript permite una forma más estructurada de implementar la herencia. Las clases utilizan la palabra clave extends para heredar de otras clases.
## Prototipos y Herencia en JavaScript * Los prototipos en JavaScript existen únicamente en clases y funciones constructoras. * Las funciones constructoras se utilizan como moldes para crear objetos. * Tanto las clases como las funciones constructoras generan una propiedad llamada `prototype`, que contiene métodos y propiedades compartidos por las instancias creadas a partir de ellas. ## Prototipos en la práctica * Los prototipos permiten que las instancias compartan métodos y propiedades sin necesidad de replicar código. * Es importante entender que la propiedad `prototype` no se programa manualmente; se genera automáticamente cuando se define una clase o función constructora. ## Ejemplo de clase y herencia class Animal { constructor(nombre, tipo) { this.nombre = nombre; this.tipo = tipo; } emitirSonido() { console.log('El animal emite un sonido.'); } } * En este ejemplo, se define una clase `Animal` con un constructor que recibe dos parámetros: `nombre` y `tipo`. * Se define un método `emitirSonido` en la clase `Animal`. ## Extender clases en JavaScript * Para crear una subclase que herede de otra clase, se utiliza la palabra clave `extends`. class Perro extends Animal { constructor(nombre, tipo, raza) { super(nombre, tipo); this.raza = raza; } emitirSonido() { console.log('El perro ladra.'); } correr() { console.log(`${this.nombre} corre alegremente.`); } } * En este ejemplo, se define una clase `Perro` que extiende de `Animal`. * El constructor de `Perro` llama al constructor de `Animal` usando `super`, permitiendo el uso de propiedades heredadas (`nombre` y `tipo`). * Se sobrescribe el método `emitirSonido` y se define un nuevo método `correr`. ## Crear instancias y utilizar métodos heredados const bobby = new Perro('Bobby', 'perro', 'Pug'); bobby.emitirSonido(); // El perro ladra. bobby.correr(); // Bobby corre alegremente. * En este ejemplo, se crea una instancia de la clase `Perro` llamada `bobby`. * La instancia `bobby` puede utilizar métodos definidos en `Perro` y heredar métodos de `Animal`. ## Propiedades y métodos del prototipo * Los prototipos de las clases contienen métodos y propiedades que se pueden compartir y heredar. console.log(Animal.prototype); // { emitirSonido: \[Function (anonymous)] } console.log(Perro.prototype); // { emitirSonido: \[Function (anonymous)], correr: \[Function (anonymous)] } * `Animal.prototype` contiene el método `emitirSonido`. * `Perro.prototype` contiene los métodos `emitirSonido` y `correr`. ## Próximos pasos * Practicar creando y extendiendo clases en JavaScript para familiarizarse con la sintaxis y el comportamiento de los prototipos. * Explorar la documentación oficial de JavaScript sobre clases y herencia para profundizar en conceptos avanzados. * Aplicar estos conceptos en proyectos reales para aprovechar las ventajas de la programación orientada a objetos.
La herencia en JavaScript permite extender propiedades y métodos de una única clase padre a la vez utilizando `extends`. No se puede heredar de múltiples clases directamente. Sin embargo, puedes usar mixins o combinaciones de objetos para simular este comportamiento. Esto es común en la Programación Orientada a Objetos con JavaScript.
En JavaScript, el prototipo es un concepto fundamental que permite la reutilización de código y la implementación de herencia. Aquí están los puntos clave: 1. **Definición**: Cada objeto en JavaScript tiene una propiedad interna llamada `[[Prototype]]`. 2. **Cadena de Prototipos**: Cuando buscas una propiedad en un objeto, JavaScript: * Primero busca en el objeto mismo. * Si no la encuentra, busca en el prototipo del objeto. * Continúa buscando en la cadena de prototipos hasta llegar al final (generalmente `Object.prototype`). 3. **Acceso al Prototipo**: Puedes acceder al prototipo de un objeto usando `Object.getPrototypeOf(obj)` o la propiedad `__proto__` (aunque esta última no se recomienda para uso en producción). ```js let animal = { estaVivo: true }; let perro = Object.create(animal); perro.ladrar = function() { console.log("Guau!"); }; console.log(perro.estaVivo); // true (heredado de animal) perro.ladrar(); // "Guau!" ``` ## Herencia: Construyendo sobre los Prototipos La herencia en JavaScript se basa en el sistema de prototipos: 1. **Definición**: Es el mecanismo por el cual un objeto puede adquirir propiedades y métodos de otro objeto. 2. **Implementación**: Se logra estableciendo el prototipo de un objeto como otro objeto. 3. **Ventajas**: Permite crear jerarquías de objetos y reutilizar código eficientemente. Ejemplo usando clases (que internamente usan prototipos): ```js class Animal { constructor(nombre) { this.nombre = nombre; } hablar() { console.log(this.nombre + " hace un ruido."); } } class Perro extends Animal { hablar() { console.log(this.nombre + " ladra."); } } let perro = new Perro("Rex"); perro.hablar(); // "Rex ladra." ``` En este ejemplo, `Perro` hereda de `Animal`, pero sobrescribe el método `hablar()`. La comprensión de prototipos y herencia es crucial para dominar JavaScript y aprovechar al máximo su flexibilidad en la programación orientada a objetos.
Aquí les dejo el mio (casi no se nota que me gusta One Piece jaja): ![](https://static.platzi.com/media/user_upload/image-3771ce66-6819-4a37-b3b7-f78073c9d28b.jpg)
![](https://static.platzi.com/media/user_upload/image-4ecda968-b23e-4f58-aa01-cc017f852033.jpg) ![](https://static.platzi.com/media/user_upload/image-998a6947-f512-4791-b2e2-8160c57feb66.jpg)
![]()![](https://static.platzi.com/media/user_upload/image-2f9a86fb-82b9-438b-a046-f4712d885823.jpg)