Contenido del curso
Primeros Pasos
- 5

¡Hola Mundo!
06:13 min - 6

Anatomía de una variable
09:23 min - 7

Tipos de datos: Mutabilidad e inmutabilidad
10:55 min - 8

Paso por valor
11:06 min - 9

Paso por referencia
07:00 min - 10

Creación de strings
11:33 min - 11

Concatenación de strings
08:31 min - 12

Manipulación de strings
12:13 min - 13

Tipo de dato primitivo: number
09:30 min - 14

Conversión a Booleanos
05:08 min - 15

Tipos de datos primitivos: null, undefined, symbol y bigint
07:28 min - 16

Conversión de tipos: Type Casting y Coercion
04:38 min - 17

Conversión de tipos explícita e implícita
12:20 min - 18

Proyecto: Crea un perfil para redes sociales con JavaScript
07:23 min
Funciones y This
- 19

Anatomía de una función
11:39 min - 20

Preguntas a Desarrolladores Senior: ¿Por qué aprender Desarrollo Web?
02:11 min - 21

Funciones vs Métodos
10:01 min - 22

Funciones puras e impuras
11:22 min - 23

Identificador this
11:38 min - 24

Métodos bind, call y apply
10:09 min - 25

Funciones flecha y enlace léxico
10:31 min - 26

Implicaciones de duplicar código
03:19 min - 27

Funciones constructoras
10:41 min - 28

10 Tipos de funciones
01:39 min - 29

Objeto window y modo estricto
07:37 min - 30

Tipos de binding
01:11 min - 31

Expresiones vs Sentencias
04:02 min - 32

Proyecto: Crea biografías de personajes con JavaScript
12:51 min
Lógica y ciclos
- 33

Operadores de comparación
06:12 min - 34

Operadores lógicos
04:33 min - 35

Ejecución condicional: if
07:45 min - 36

Proyecto: Adivina el número
09:36 min - 37

Ejecución condicional: ternario
05:24 min - 38

Ejecución condicional: switch
12:08 min - 39

Loop: for
07:31 min - 40

Loop: forEach
03:57 min - 41

Loop: for of
04:26 min - 42

Loop: for in
07:38 min - 43

Loop: while
03:56 min - 44

Loop: do while
03:13 min - 45

Proyecto: Juego adivina la palabra
15:56 min
Fundamentos de arrays y modificación
- 46

Introducción a Arrays
09:09 min - 47

Mutabilidad e inmutabiliad de Arrays
07:56 min - 48

Modificación básica del final con push(), pop()
04:33 min - 49

Ejercicio: Stack de libros
16:03 min - 50

Modificación del principio con shift(), unshift()
10:21 min - 51

Modificación avanzada con splice(), reverse(), sort(), fill()
16:37 min - 52

Proyecto: Juego de cartas
15:37 min - 53

Preguntas a Desarrolladores Senior: Estrategias y métodos de estudio
01:10 min
Iteración de Arrays
- 54

Iteración con map() y forEach()
12:53 min - 55

Filtrado y reducción con filter() y reduce()
11:34 min - 56

Ejercicio: Calificación promedio aprobatoria
05:27 min - 57

Búsqueda de elementos con find() y findIndex()
03:52 min - 58

Ejercicio: Encuentra al ganador de una rifa
11:21 min - 59

Proyecto: Análisis de transacciones
10:55 min - 60

Proyecto: Análisis de transacciones parte 2
08:01 min
Métodos específicos y Operaciones
- 61

Unir y entrelazar con concat(), spread operator y join()
12:05 min - 62

Verificación y evaluación con every() y some()
05:15 min - 63

Métodos de búsqueda con includes(), indexOf() y lastIndexOf()
07:05 min - 64

Ejercicio: Encontrando los índices
11:09 min - 65

Crear copias con slice()
05:28 min - 66

Spread operator: casos de uso
07:11 min
Arrays multidimencionales
Clases y Objetos
- 71

Anatomia de un Objeto
06:48 min - 72

Trabajando con objetos
12:52 min - 73

Función constructora
14:31 min - 74

¿Qué es una clase?
06:17 min - 75

Prototipos y herencias
02:15 min - 76

Herencia en la práctica
15:38 min - 77

Prototipos en la práctica
Viendo ahora - 78

this en JavaScript
05:36 min - 79

Proyecto: Crea una red social
12:25 min - 80

Proyecto: Crea una red social parte 2
09:00 min
Prototipos en la práctica
Resumen
Cuando trabajas con clases e instancias en JavaScript, tarde o temprano necesitas agregar métodos que no estaban contemplados en la clase original. Entender cómo funciona el prototype y la cadena de prototipos es fundamental para hacerlo correctamente y evitar errores comunes que pueden frenar tu avance.
¿Cómo agregar un método nuevo a una instancia?
Imagina que ya tienes una instancia llamada perroUno creada a partir de una clase constructora Perro. Al trabajar con ella, te das cuenta de que necesitas un método adicional. La primera idea suele ser asignarlo directamente a la instancia [0:06]:
javascript perroUno.nuevoMetodo = function() { console.log("Este es un nuevo método"); };
Esto funciona, pero solo para esa instancia en particular. Si creas otras instancias de Perro, ninguna tendrá acceso a nuevoMetodo. La razón es que no lo estás agregando a la clase constructora ni a su prototype, sino únicamente al objeto individual.
¿Por qué la instancia no tiene prototype?
Un error muy frecuente es intentar agregar un método al prototype de una instancia [3:22]:
javascript perroUno.prototype.segundoMetodo = function() { console.log("Es otro nuevo método"); };
Si ejecutas perroUno.prototype, el resultado es undefined. Las instancias no poseen la propiedad prototype; esta propiedad solo existe en las clases constructoras o funciones constructoras. En cambio, si consultas Perro.prototype, obtienes el objeto prototipo con los métodos que se pueden compartir entre todas las instancias.
¿Cuál es la forma correcta de inyectar métodos al prototipo?
La solución es agregar el método directamente al prototype de la clase constructora [4:15]:
javascript Perro.prototype.segundoMetodo = function() { console.log("Es otro nuevo método"); };
Ahora, cualquier instancia como perroUno puede llamar a perroUno.segundoMetodo() y recibirá el mensaje correctamente. El método no vive dentro de la instancia, sino que se hereda a través del prototipo de la clase padre.
¿Qué es la cadena de prototipos?
Cuando llamas perroUno.segundoMetodo(), JavaScript sigue un proceso de búsqueda conocido como cadena de prototipos (prototype chain) [5:10]:
- Primero pregunta a la instancia
perroUno: "¿Tienes este método?" La instancia responde que no. - Entonces sube por la cadena hasta la clase padre
Perroy pregunta: "¿Tú lo tienes?" - La clase
Perrorevisa su prototype y encuentra el método allí. - Lo devuelve y
perroUnopuede ejecutarlo.
Este mecanismo es lo que permite la herencia en JavaScript: los objetos están interconectados a través de sus prototipos.
¿Cómo visualizar la cadena de prototipos completa?
Para inspeccionar toda la cadena, puedes usar Object.getPrototypeOf() en un bucle que recorra cada nivel hasta llegar a null [6:30]:
javascript let prototipoActual = Object.getPrototypeOf(perroUno); while (prototipoActual !== null) { console.log(prototipoActual); prototipoActual = Object.getPrototypeOf(prototipoActual); }
El resultado muestra la cadena completa:
- Primer nivel: el prototype de
Perro, porqueperroUnoes una instancia y no tiene prototipo propio. - Segundo nivel: el prototype de
Animal, ya que la clasePerroextiende deAnimal. - Tercer nivel: el objeto global
Object, del cual heredan todos los objetos en JavaScript. - Cuarto nivel:
null, indicando que no hay nada más arriba.
Esta estructura demuestra cómo cada objeto está enlazado al siguiente en una cadena ascendente. Los métodos definidos en cualquier punto de esa cadena quedan disponibles para las instancias que se encuentran más abajo, gracias a la herencia prototípica.
Entender este flujo te permite decidir con precisión dónde colocar métodos nuevos y por qué un método funciona en una instancia aunque nunca lo hayas definido directamente en ella. ¿Ya habías enfrentado el error de asignar un método al prototype de una instancia? Comparte tu experiencia en los comentarios.