Métodos de objeto
El nombre y el precio de la taza ya van juntos. A la página le falta un trabajo pequeño que sea de esa taza: armar su etiqueta, subir el conteo del carrito, saludar a quien compra. Esa función vive en el objeto. Eso es un método.
Después de las claves y las listas
La lección de propiedades añadió un campo, quitó otro, preguntó con in, entró en un objeto anidado y listó nombres con Object.keys. Allí no corrió ninguna función. Aquí el valor de una propiedad es una función, y se ejecuta desde el objeto que la guarda.
Cinco movimientos con un método
📊 Guardar, llamar, atajo, this, argumento
| Movimiento | Sintaxis | Qué obtienes |
|---|---|---|
| guardar | greet: function () { return "Hi"; } |
una función sentada en el objeto |
| llamar | product.greet() |
la función corre y recibes su resultado |
| atajo | label() { return this.name; } |
la misma clase de función, más corta |
| this | this.name dentro del método |
el objeto que estaba antes del punto |
| argumento | cart.add(3) |
entrada extra solo para esta llamada |
Ponle nombre al movimiento y después escribe la línea. Guardar no ejecuta la función. El atajo no es un tipo nuevo de valor. this no es un nombre global de producto que ojalá exista. Un argumento es entrada de esta llamada, no un segundo objeto.
let product = {
name: "Mug",
greet: function () {
return "Hi";
}
};
console.log(typeof product.greet);
El valor puede ser una función
name guarda una cadena. greet guarda una función. typeof product.greet vale "function". Todavía no se ha ejecutado nada, así que no aparece Hi. El nombre de la taza sigue al lado de la función.
let product = {
name: "Mug",
greet: function () {
return "Hi";
}
};
console.log(product.greet());
Los paréntesis son el botón de arranque
product.greet() entra en la función. La consola muestra Hi. Si quitas los paréntesis, estás mirando la función, no lo que devuelve. El punto indica a qué objeto pertenece la llamada.
let product = {
name: "Mug",
label() {
return this.name;
}
};
console.log(product.label());
El atajo solo acorta la escritura
Dentro de las llaves, label() { ... } deja una función en la clave label. Es la misma clase de propiedad que greet: function () { ... }, con menos teclas. product.label() la ejecuta. El cuerpo lee this.name y la consola muestra Mug.
let product = {
name: "Mug",
price: 8,
tag() {
return this.name + " — " + this.price;
}
};
console.log(product.tag());
En una llamada simple, this es el objeto de antes del punto
product.tag() quiere decir: ejecuta tag y que this sea product. Entonces this.name y this.price son los campos de esa taza. La consola muestra Mug — 8. Un name suelto dentro del método es otra búsqueda, no la propiedad. Si la llamada deja de tener la forma object.method(), this puede señalar a otro sitio — eso es la lección siguiente. Esta página se queda en la llamada simple.
let cart = {
count: 2,
add(extra) {
this.count = this.count + extra;
return this.count;
}
};
console.log(cart.add(3));
El método recibe datos para esta llamada
add espera extra. cart.add(3) entrega 3, lo suma a count y devuelve el total nuevo. La consola muestra 5. El carrito se queda con ese count ya actualizado. El argumento vive en la llamada; solo pasa a ser propiedad si tú lo guardas.
Elige el movimiento que encaja con el trabajo
¿La función tiene que vivir en el objeto? Guárdala, larga o corta. ¿Quieres el resultado? Llama con (). ¿Quieres los campos del propio objeto? Léelos con this. ¿Hace falta un número solo para esta ejecución? Pasa un argumento. Object.keys listó nombres en la página anterior. La siguiente se queda con this cuando cambia la forma de la llamada.
Pon la etiqueta del método en la página
Dale al producto name, price y tag. Escribe product.tag() en un párrafo.
<!DOCTYPE html>
<html>
<head>
<title>object-methods — page</title>
</head>
<body>
<p id="line">…</p>
<script>
let product = {
name: "Mug",
price: 8,
tag() {
return this.name + " — " + this.price;
}
};
let box = document.getElementById("line");
box.textContent = product.tag();
</script>
</body>
</html>
El párrafo muestra Mug — 8. tag armó esa cadena con los campos del propio producto. Cambia solo name o price, recarga y lee la línea nueva. Lección siguiente: la palabra this — adónde apunta this cuando la llamada ya no es un object.method() sencillo.
Pasos de práctica
- Guarda una función en
greety muestratypeofde esa propiedad. - Llama a
product.greet()y leeHi. - Escribe
labelcon el atajo y muestraproduct.label(). - Construye
tagpara quethis.nameythis.priceformen una cadena. - Empieza
counten 2, llama aadd(3)y lee5. - En la demo HTML cambia solo
nameoprice, recarga y lee el párrafo.
Tropezones frecuentes
- Mostrar
product.greetsin()y esperarHi - Tomar el atajo
label() {}por una propiedad de texto - Escribir
namesuelto dentro del método en vez dethis.name - Creer que
cart.add(3)dejacounten 2 - Ir a
Object.keyscuando querías llamar a un método - Dejar una función flecha como método de esta página — la lección siguiente sigue a
thiscuando cambia la forma de la llamada
Resumen
- Un método es una función guardada como propiedad
object.method()la ejecuta y te da el valor devuelto- El atajo
name() {}guarda esa misma clase de función - En una llamada simple,
thises el objeto de antes del punto - El parámetro recibe el argumento de esa llamada
- La cadena del método puede llenar una línea de la página
- Siguiente: la palabra
this, cuando la llamada no esobject.method()
🧠 Pon a Prueba tu Conocimiento
Pon a Prueba tu Conocimiento
Ponte a prueba con este cuestionario interactivo y descubre qué tan bien entiendes el tema
📝 Instrucciones
- Lee cada pregunta cuidadosamente
- Selecciona la mejor respuesta para cada pregunta
- Puedes repetir el quiz tantas veces como quieras
- Tu progreso se mostrará en la parte superior