JavaScript
Explica cómo JavaScript recorre la cadena de prototipos al buscar propiedades, desde objetos y arrays hasta funciones, clases e instancias.
La cadena de prototipos es la secuencia de objetos que JavaScript recorre cuando una propiedad no existe directamente en el objeto actual.
const animal = {
breathe() {
return "Breathing";
},
};
const dog = Object.create(animal);
dog.bark = function () {
return "Woof";
};
const puppy = Object.create(dog);
puppy.name = "Milo";La cadena es:
puppy → dog → animal → Object.prototype → nullCuando se evalúa:
puppy.breathe();JavaScript busca:
breathe en puppy.dog.animal.Si ninguna parte de la cadena contiene la propiedad, el acceso devuelve undefined.
puppy.fly; // undefinedObject.getPrototypeOf(Object.prototype); // nullnull indica que ya no existe otro objeto donde buscar.
Un objeto puede comenzar directamente con null.
const dictionary = Object.create(null);
Object.getPrototypeOf(dictionary); // nullconst user = {
name: "Nicolás",
};Normalmente:
user → Object.prototype → nullPor eso user puede acceder a métodos como:
user.toString();
user.valueOf();Aunque no sean propiedades propias.
const products = [];Cadena simplificada:
products
→ Array.prototype
→ Object.prototype
→ nullMétodos como map, filter y push están en Array.prototype.
Object.hasOwn(products, "map"); // false
Array.prototype.hasOwnProperty("map"); // truefunction greet() {}Como objeto callable, la función suele tener esta cadena:
greet
→ Function.prototype
→ Object.prototype
→ nullPor eso puede usar:
greet.call(null);
greet.bind(null);call y bind se encuentran en Function.prototype.
Esto no debe confundirse con greet.prototype, que es otra propiedad utilizada cuando greet actúa como constructor.
function User(name) {
this.name = name;
}
User.prototype.greet = function () {
return `Hello, ${this.name}`;
};
const user = new User("Nicolás");Cadena:
user
→ User.prototype
→ Object.prototype
→ nullY la propia función tiene otra cadena:
User
→ Function.prototype
→ Object.prototype
→ nullSon recorridos diferentes.
class User {
greet() {
return `Hello, ${this.name}`;
}
}
const user = new User();Los métodos de instancia se almacenan en User.prototype.
Object.hasOwn(user, "greet"); // false
Object.hasOwn(User.prototype, "greet"); // trueCadena:
user → User.prototype → Object.prototype → nullLas clases utilizan el mismo sistema prototípico; agregan una sintaxis y reglas más estrictas.
const base = {
label: "Base",
};
const child = Object.create(base);
child.label = "Child";child.label; // "Child"La propiedad propia oculta la heredada.
Si se elimina:
delete child.label;
child.label; // "Base"La propiedad heredada vuelve a ser visible.
const animal = {
speak() {
return "Sound";
},
};
const dog = Object.create(animal);
dog.speak = function () {
return "Woof";
};dog.speak() utiliza la versión propia y detiene la búsqueda antes de llegar al prototipo.
En clases, super.method() permite continuar explícitamente con el método del prototipo padre.
const base = {
status: "active",
};
const child = Object.create(base);
child.status = undefined;child.status; // undefinedJavaScript encontró una propiedad propia y detuvo la búsqueda. No continúa hacia base solo porque su valor sea undefined.
Eliminarla sí permite continuar:
delete child.status;
child.status; // "active""status" in child;in revisa toda la cadena.
Object.hasOwn(child, "status");Solo revisa el objeto actual.
Ejemplo:
const base = { role: "viewer" };
const user = Object.create(base);
"role" in user; // true
Object.hasOwn(user, "role"); // falseuser instanceof User;De forma simplificada, instanceof pregunta si User.prototype aparece en la cadena de user.
User.prototype.isPrototypeOf(user); // trueNo compara propiedades.
const sameShape = {
name: "Nicolás",
};
sameShape instanceof User; // falseUna función o clase puede definir Symbol.hasInstance.
class EvenNumber {
static [Symbol.hasInstance](value) {
return Number.isInteger(value) && value % 2 === 0;
}
}
2 instanceof EvenNumber; // truePor eso instanceof puede tener comportamiento personalizado y no siempre debe interpretarse únicamente como una búsqueda convencional.
Objetos creados en otro realm, como un iframe, pueden tener constructores y prototipos distintos.
Un array externo puede fallar:
externalArray instanceof Array; // Puede ser false.Para arrays, la comprobación portable es:
Array.isArray(externalArray);No todos los tipos tienen una alternativa tan directa. Valida según el contrato real, no únicamente con instanceof.
Object.setPrototypeOf(object, prototype);Es posible, pero suele ser una mala base de diseño porque:
Prefiere definir la relación al crear:
Object.create(prototype);O utilizar constructores y clases.
const first = {};
const second = {};
Object.setPrototypeOf(first, second);
Object.setPrototypeOf(second, first); // TypeErrorUna cadena prototípica debe terminar; no puede formar un ciclo.
Ambas buscan algo, pero buscan cosas distintas.
Busca bindings léxicos.
const value = 10;
function read() {
return value;
}Busca propiedades sobre objetos.
object.property;No existe un salto entre ambas. Si property no está en el objeto ni en sus prototipos, JavaScript devuelve undefined; no busca una variable exterior con ese nombre.
Una cadena muy profunda puede dificultar entender de dónde viene el comportamiento.
instance
→ specializedPrototype
→ domainPrototype
→ basePrototype
→ Object.prototypeEl motor suele optimizar búsquedas comunes, pero el problema principal para el código de aplicación es la complejidad conceptual.
Prefiere jerarquías poco profundas y relaciones que representen claramente el dominio.
En lugar de una cadena larga:
class AdminManager extends Manager {}Puedes combinar capacidades:
function createManager({ canApprove, canAssign }) {
return {
approve: canApprove,
assign: canAssign,
};
}La composición no elimina los prototipos del lenguaje, pero puede evitar jerarquías rígidas en el diseño de la aplicación.
let current = object;
while (current !== null) {
console.log(current);
current = Object.getPrototypeOf(current);
}Las DevTools también permiten inspeccionar propiedades propias y el bloque [[Prototype]].
Para conocer dónde está definida una propiedad:
function findPropertyOwner(object, key) {
let current = object;
while (current !== null) {
if (Object.hasOwn(current, key)) {
return current;
}
current = Object.getPrototypeOf(current);
}
return null;
}const baseUser = {
readDisplayName() {
return this.name;
},
};
const staffUser = Object.create(baseUser);
staffUser.canAccessDashboard = true;
const administrator = Object.create(staffUser);
administrator.name = "Nicolás";
administrator.canManageUsers = true;Cadena:
administrator
→ staffUser
→ baseUser
→ Object.prototype
→ nullFunciona, pero una cadena construida con objetos que también guardan datos concretos puede compartir estado accidentalmente. Para modelos reales suelen ser más claras las funciones constructoras, clases o prototipos dedicados exclusivamente a métodos.
undefined hace continuar la búsqueda.instanceof como comparación de forma.Function.prototype con la propiedad .prototype de una función.Object.prototype.null.undefined también detiene la búsqueda.Array.prototype y funciones de Function.prototype.new heredan de Constructor.prototype.instanceof suele revisar esa relación prototípica.in incluye propiedades heredadas; Object.hasOwn no.¿Qué imprime el código?
const base = {
status: "active",
};
const child = Object.create(base);
child.status = undefined;
console.log(child.status);
delete child.status;
console.log(child.status);Primero imprime undefined, porque la propiedad propia detiene la búsqueda. Después imprime "active", porque al eliminarla JavaScript continúa hacia el prototipo.
Clases presenta una sintaxis estructurada para crear instancias y compartir métodos sobre este mismo sistema de prototipos.