JavaScript
Explica cómo los objetos delegan propiedades mediante prototipos, comparten métodos y diferencian [[Prototype]], Constructor.prototype y propiedades propias.
Un prototipo es un objeto al que otro objeto puede delegar la búsqueda de propiedades.
const baseUser = {
greet() {
return `Hello, ${this.name}`;
},
};
const user = Object.create(baseUser);
user.name = "Nicolás";
user.greet(); // "Hello, Nicolás"Los objetos normales tienen una propiedad interna llamada [[Prototype]] cuyo valor es otro objeto o null.
No se accede directamente con la sintaxis de corchetes. Las APIs recomendadas son:
Object.getPrototypeOf(user);
Object.setPrototypeOf(user, anotherPrototype);Object.getPrototypeOf(user) === baseUser; // trueCambiar el prototipo de objetos existentes con Object.setPrototypeOf puede afectar rendimiento y volver el comportamiento difícil de rastrear. Normalmente se define durante la creación mediante Object.create, una función constructora o una clase.
user.__proto__;__proto__ es un accessor histórico heredado de Object.prototype. Permite leer o cambiar [[Prototype]] en muchos objetos, pero no es la API recomendada.
Utiliza:
Object.getPrototypeOf(user);
Object.setPrototypeOf(user, prototype);Además, un objeto con prototipo null no hereda el accessor __proto__.
Una función constructible puede tener una propiedad normal llamada prototype.
function User(name) {
this.name = name;
}
User.prototype;Cuando se utiliza new User(), el objeto nuevo recibe como [[Prototype]] el valor de User.prototype.
const user = new User("Nicolás");
Object.getPrototypeOf(user) === User.prototype; // trueSon conceptos distintos:
User.prototype es una propiedad de la función.Object.getPrototypeOf(user) obtiene el prototipo interno de la instancia.Object.getPrototypeOf(User) obtiene el prototipo de la propia función, normalmente Function.prototype.Las funciones normales suelen tener una propiedad prototype porque pueden ser constructibles.
function User() {}
User.prototype;Las arrow functions no son constructibles y no tienen esa propiedad de la misma forma.
const User = () => {};
User.prototype; // undefinedLos métodos abreviados tampoco pueden utilizarse con new.
const service = {
create() {},
};
new service.create(); // TypeErrorLas clases sí tienen un objeto prototype para sus métodos de instancia.
function Product(name, price) {
this.name = name;
this.price = price;
}
Product.prototype.getLabel = function () {
return `${this.name}: $${this.price}`;
};const keyboard = new Product("Keyboard", 120);
const mouse = new Product("Mouse", 60);keyboard.getLabel === mouse.getLabel; // trueLas dos instancias encuentran la misma función en Product.prototype.
Sin prototipo compartido:
function Product(name, price) {
this.name = name;
this.price = price;
this.getLabel = function () {
return `${this.name}: $${this.price}`;
};
}Cada instancia recibiría una función diferente.
Cuando se evalúa:
user.greet;JavaScript busca:
greet en user.user.null.undefined.El recorrido completo se estudia en Cadena de prototipos.
const baseUser = {
greet() {
return `Hello, ${this.name}`;
},
};
const user = Object.create(baseUser);
user.name = "Nicolás";
user.greet();Aunque el método se encontró en baseUser, this es user, porque user fue el receptor de la llamada.
Esto permite que varias instancias compartan un método y trabajen con sus propios datos.
Una propiedad propia puede ocultar otra heredada con el mismo nombre.
const defaults = {
theme: "light",
};
const settings = Object.create(defaults);
settings.theme = "dark";settings.theme; // "dark"
defaults.theme; // "light"La propiedad del prototipo no cambia.
Si se elimina la propiedad propia, vuelve a verse la heredada.
delete settings.theme;
settings.theme; // "light"La asignación no siempre crea una propiedad propia.
const base = {
set name(value) {
console.log(`Setting ${value}`);
},
};
const user = Object.create(base);
user.name = "Nicolás";JavaScript encuentra el setter heredado y lo ejecuta. Puede no crearse una propiedad propia name.
Para entender una escritura hay que considerar descriptores y la cadena de prototipos, no solo la línea de asignación.
const baseProduct = {
isAvailable() {
return this.stock > 0;
},
};
const product = Object.create(baseProduct);
product.name = "Keyboard";
product.stock = 4;También pueden definirse propiedades durante la creación.
const product = Object.create(baseProduct, {
name: {
value: "Keyboard",
writable: true,
enumerable: true,
configurable: true,
},
});Los descriptores omitidos utilizan false como valor por defecto.
const dictionary = Object.create(null);Este objeto no hereda de Object.prototype.
dictionary.toString; // undefinedPuede ser útil como diccionario de claves externas porque no existen nombres heredados como constructor o toString.
Aun así:
Map suele expresar mejor un diccionario dinámico.Object.hasOwn(dictionary, "key");Object.hasOwn funciona aunque el objeto no tenga prototipo.
function User(name) {
this.name = name;
}
const user = new User("Nicolás");
User.prototype.greet = function () {
return `Hello, ${this.name}`;
};
user.greet(); // Funciona.La instancia conserva una referencia al mismo objeto User.prototype.
Sin embargo, reemplazar el objeto completo es diferente.
const first = new User("First");
User.prototype = {
greet() {
return `Hi, ${this.name}`;
},
};
const second = new User("Second");first mantiene el prototipo anterior y second recibe el nuevo.
Array.prototype.first = function () {
return this[0];
};Esto se conoce frecuentemente como monkey patching y puede:
Los polyfills legítimos requieren comprobaciones y compatibilidad cuidadosa. Para utilidades de aplicación, utiliza funciones normales.
function first(array) {
return array[0];
}Si una aplicación copia claves externas sin validarlas, un atacante puede intentar modificar prototipos mediante nombres especiales como __proto__, constructor o prototype.
function assignSettings(target, input) {
for (const [key, value] of Object.entries(input)) {
target[key] = value;
}
}Con datos no confiables, esta operación necesita validación y una estrategia segura.
Medidas posibles:
null cuando corresponda.No basta con comprobar una sola clave; la defensa depende del flujo completo de datos.
Product.prototype.isPrototypeOf(keyboard); // trueTambién:
keyboard instanceof Product; // trueinstanceof consulta si Product.prototype aparece en la cadena de keyboard.
Object.getPrototypeOf(keyboard) === Product.prototype;Cada técnica responde una pregunta ligeramente distinta.
Los prototipos permiten delegar comportamiento.
const printable = {
print() {
return JSON.stringify(this);
},
};La composición crea objetos combinando capacidades explícitamente.
const product = {
...createIdentity(),
...createPricing(),
};No son enemigos. Puedes utilizar delegación prototípica, composición, closures y clases según el contrato del dominio.
const orderMethods = {
calculateTotal() {
return this.items.reduce(
(total, item) =>
total + item.price * item.quantity,
0,
);
},
complete() {
this.status = "completed";
},
};
function createOrder(id, items) {
const order = Object.create(orderMethods);
order.id = id;
order.items = [...items];
order.status = "pending";
return order;
}Todas las órdenes comparten orderMethods, pero mantienen propiedades propias.
prototype con [[Prototype]].__proto__ como API principal.this.prototype y esperar que cambien instancias anteriores.[[Prototype]] conecta un objeto con otro para delegar búsquedas.Object.getPrototypeOf es la forma recomendada de consultarlo.Constructor.prototype es la propiedad usada por new para las instancias.this.null no heredan de Object.prototype.¿Qué imprime el código?
const base = {
name: "Base",
readName() {
return this.name;
},
};
const child = Object.create(base);
child.name = "Child";
console.log(child.readName());Imprime "Child". El método se encuentra en base, pero la llamada tiene a child como receptor y, por tanto, como this.
Cadena de prototipos muestra cómo se conectan varios niveles y cómo instanceof, arrays, funciones y clases utilizan ese recorrido.