Scribd
Cargar
10 vistas4 páginas

04 Prototypes

El documento explica el concepto de prototipos en JavaScript, destacando cómo todos los objetos heredan métodos de sus prototipos a través de la cadena de prototipos. Se presentan ejemplos prácticos de cómo se utilizan los prototipos en objetos y arreglos, así como la importancia de entender esta herencia para el desarrollo y depuración en JavaScript. Además, se recomienda el uso de clases como una forma más sencilla de trabajar con prototipos sin manipularlos directamente.

Cargado por

Ivn Gmz
Derechos de autor
© All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
10 vistas4 páginas

04 Prototypes

El documento explica el concepto de prototipos en JavaScript, destacando cómo todos los objetos heredan métodos de sus prototipos a través de la cadena de prototipos. Se presentan ejemplos prácticos de cómo se utilizan los prototipos en objetos y arreglos, así como la importancia de entender esta herencia para el desarrollo y depuración en JavaScript. Además, se recomienda el uso de clases como una forma más sencilla de trabajar con prototipos sin manipularlos directamente.

Cargado por

Ivn Gmz
Derechos de autor
© All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd

04-prototypes file:///home/epicuro/Downloads/scriptdb/04-prototypes.

html

04 · Prototypes — La Herencia Oculta de


JavaScript
Cuando haces [1,2,3].map(n => n*2) , ¿de dónde sale el método .map() ? Tú no lo
definiste.

Respuesta: De [Link] . Todo objeto en JavaScript hereda métodos de su prototipo.


Es la cadena invisible que conecta todo.

Concepto
Todo objeto JS tiene una propiedad interna [[Prototype]] que apunta a otro objeto. Cuando
accedes a una propiedad que no existe en el objeto, JS la busca en la cadena de prototipos.

const persona = {
saludar() {
return `Hola, soy ${[Link]}`;
}
};

const juan = [Link](persona);


[Link] = 'Juan';

[Link]([Link]()); // Hola, soy Juan


[Link]([Link]); // Juan (propio)
[Link]([Link]()); // [object Object] (heredado de [Link])

Diagrama: Cadena de Prototipos

1 of 4 08/02/2026, 17:17
04-prototypes file:///home/epicuro/Downloads/scriptdb/[Link]

null
(fin de la cadena)

[[Prototype]]

[Link]
• toString()
• hasOwnProperty()
• valueOf()

[[Prototype]]

persona
• saludar()

[[Prototype]]

juan
• nombre: 'Juan'

[Link]()
[Link]()
→ ¿juan tiene toString? NO
→ ¿juan tiene saludar? NO
→ ¿persona tiene
→ ¿persona tiene saludar?
toString? NO
SÍ
→ ¿[Link] tiene
→ ejecuta
toString? SÍ

Arrays y sus Prototipos

2 of 4 08/02/2026, 17:17
04-prototypes file:///home/epicuro/Downloads/scriptdb/[Link]

const arr = [1, 2, 3];

// Todos estos vienen de [Link]:


[Link](n => n * 2); // [Link]
[Link](n => n > 1); // [Link]
[Link]((a,b) => a+b); // [Link]
[Link](4); // [Link]

// Cadena:
// arr → [Link] → [Link] → null

class es Syntactic Sugar sobre Prototipos

// Esto:
class Animal {
constructor(nombre) { [Link] = nombre; }
hablar() { return `${[Link]} hace ruido`; }
}

// Es equivalente a esto:
function Animal(nombre) {
[Link] = nombre;
}
[Link] = function() {
return `${[Link]} hace ruido`;
};

// Ambos producen la misma cadena prototípica

¿Por Qué Importa?


No vas a escribir código con prototipos directamente, pero necesitas entenderlo porque:

1. React internals: hooks, componentes y reconciliación usan prototipos


2. Debug: cuando un error dice "X is not a function", es un problema en la cadena
3. Librerías: muchas extienden prototipos ( [Link] , polyfills)

3 of 4 08/02/2026, 17:17
04-prototypes file:///home/epicuro/Downloads/scriptdb/[Link]

┌─────────────────────────────────────────────┐
│ EN LA PRÁCTICA: │
│ │
│ Usa class/extends (azúcar) │
│ Entiende la cadena cuando debuggeas │
│ No manipules prototipos directamente │
│ No extiendas [Link] │
└─────────────────────────────────────────────┘

Ejercicio
¿Qué imprime este código y por qué?

const base = { tipo: 'servidor' };


const dev = [Link](base);
const prod = [Link](base);

[Link] = 'dev-01';
[Link] = 'prod-01';

[Link] = 'container';

[Link]([Link]); // ¿?
[Link]([Link]); // ¿?
[Link]([Link]); // ¿?

▸ Ver respuesta

Volver al módulo · Siguiente: Modules

4 of 4 08/02/2026, 17:17

También podría gustarte