Cargando...

La palabra this

La misma función de etiqueta puede decir taza, luego perder el objeto y después decir vaso. Las llaves no se movieron. Cambió la llamada. JavaScript elige this en la llamada, no mientras escribes la función.

Después de la llamada simple al método

La página de métodos guardó una función en el objeto y la ejecutó como product.tag(). En esa forma, this era el objeto delante del punto. Ahí se detuvo. Aquí la función se queda y cambia la llamada: se despega del objeto, se apunta con call, se fija con bind o se escribe como flecha.

Cinco formas en que la llamada fija this

📊 Método, suelta, call, bind, flecha

Forma	Ejemplo	Dónde cae this
método	`product.tag()`	el objeto delante del punto
suelta	`let show = product.tag; show()`	no es ese objeto (`undefined` en modo estricto)
call	`product.tag.call(cup)`	el objeto que pasas a `call`, solo en esta ejecución
bind	`product.tag.bind(product)`	fijado a ese objeto en llamadas posteriores
flecha	`() => this.name` dentro de otra función	el this de la función exterior, no el objeto delante del punto

Nombra la llamada antes de leer this. Dejar la función en el objeto no congela this. Decide la llamada. bind decide por adelantado para una llamada posterior. Una flecha ignora la llamada y mira la función que la envuelve.

Llamada de método — this es el objeto delante del punto

javascript

"use strict";
let product = {
name: "Mug",
tag() {
return this.name;
}
};
console.log(product.tag());

El punto sigue nombrando el objeto

product.tag() ejecuta tag y pone this en product. La consola escribe Mug. Es la regla de la página de métodos, dejada aquí como línea de base. Las cuatro llamadas siguientes se apartan de esa línea a propósito.

Llamada suelta — el objeto ya no va

javascript

"use strict";
let product = {
name: "Mug",
tag() {
if (this == null) {
return "missing";
}
return this.name;
}
};
let show = product.tag;
console.log(show());

Si despegas la función, la taza se va con el punto

show y product.tag son la misma función. show() no tiene objeto delante de un punto, así que en modo estricto this es undefined. El guarda devuelve missing. Quita el guarda y this.name lanza un error. Esta página se queda en modo estricto para que el resultado sea previsible. Un script suelto puede apuntar una llamada desnuda al objeto global.

Apunta this a otro objeto con call

javascript

"use strict";
let product = {
name: "Mug",
tag() {
return this.name;
}
};
let cup = { name: "Cup" };
console.log(product.tag.call(cup));

call presta la función a un solo objeto

product.tag.call(cup) sigue ejecutando el tag de la taza, pero this es cup solo en esta pasada. La consola escribe Cup. product.name sigue siendo Mug. call no pega la función sobre cup. apply hace el mismo trabajo cuando los argumentos extra van en un array — esta etiqueta no los necesita.

Fija el objeto con bind

javascript

"use strict";
let product = {
name: "Mug",
tag() {
return this.name;
}
};
let show = product.tag.bind(product);
console.log(show());

bind guarda el objeto para una llamada suelta posterior

bind devuelve una función nueva. Dentro, this sigue siendo product aunque show() no tenga punto. La consola escribe Mug. El tag original no cambia. Usa bind cuando un botón, un temporizador u otra función vaya a llamar al método sin el objeto delante.

La flecha toma this de la función exterior

javascript

"use strict";
let shelf = {
name: "Shelf",
make() {
let product = {
name: "Mug",
tag: () => this.name
};
return product.tag();
}
};
console.log(shelf.make());

Una flecha no toma this del punto

product.tag() parece una llamada a método, pero tag es una flecha. Una flecha no tiene this propio. Usa el this de make, y make corrió como shelf.make(), así que this es shelf. La consola escribe Shelf, no Mug. Un método normal en product habría escrito Mug. Las flechas aparecieron en una página anterior; aquí solo se ve qué hacen con this.

Empareja la llamada con el trabajo

¿El objeto está delante del punto? Lee this como ese objeto. ¿Despegaste la función y no la fijaste? No esperes el objeto. ¿Otro objeto, una sola pasada? Usa call. ¿Una llamada posterior sin punto debe ver la taza? Primero bind. ¿Escribiste una flecha? Mira hacia afuera, a la función que la rodea, no al objeto delante del punto. El constructor y la clase también fijan this, y esperan una página posterior. Lo siguiente es JSON: texto que describe datos, no otra regla para this.

Pon una etiqueta fijada en la página

Fija tag a la taza con bind y llama a esa función nueva sin punto. Escribe el resultado en un párrafo.

Demo de página — etiqueta fijada

html

<!DOCTYPE html>
<html>
<head>
<title>this-keyword — page</title>
</head>
<body>
<p id="line">…</p>
<script>
"use strict";
let product = {
name: "Mug",
tag() {
return this.name;
}
};
let show = product.tag.bind(product);
let box = document.getElementById("line");
box.textContent = show();
</script>
</body>
</html>

El párrafo muestra Mug. show() no tiene objeto delante de un punto, y la línea sigue nombrando la taza porque bind fijó this. Cambia solo product.name, recarga y el párrafo sigue. Siguiente lección: JSON en JavaScript — texto que describe datos, no una regla nueva para this.

Pasos de práctica

Llama a product.tag() y lee Mug.
Copia la función en show, llama a show() en modo estricto y lee missing.
Llama a product.tag.call(cup) y lee Cup.
Fija tag a product, llama a la función nueva sin punto y lee Mug.
Ejecuta shelf.make() y lee Shelf, no Mug.
En la demo HTML cambia solo product.name, recarga y lee el párrafo.

Tropezones frecuentes

Creer que this está congelado porque la función vive en el objeto
Llamar a show() en modo estricto y seguir esperando Mug
Pensar que call copia tag sobre cup
Esperar que bind reescriba el tag original en vez de devolver una función nueva
Escribir una flecha como método y esperar el objeto delante del punto
Leer la página siguiente como otra regla de this — JSON es un formato de texto para datos

Resumen

La llamada elige this, no las llaves
object.method() pone this en el objeto delante del punto
Una llamada suelta en modo estricto no apunta this a ese objeto
call pone this en el objeto que pasas, solo en esa pasada
bind devuelve una función cuyo this queda fijado
Una flecha usa this de la función que la rodea
Una llamada fijada puede llenar una línea de la página
Siguiente: JSON, texto que describe datos

🧠 Pon a Prueba tu Conocimiento

Listo para Empezar

Pon a Prueba tu Conocimiento

Ponte a prueba con este cuestionario interactivo y descubre qué tan bien entiendes el tema

❓

Preguntas

🎯

70%

Para Aprobar

♾️

∞

Tiempo

🔄

∞

Intentos

📝 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

La palabra this

Después de la llamada simple al método

Cinco formas en que la llamada fija this

📊 Método, suelta, call, bind, flecha

Llamada de método — this es el objeto delante del punto

El punto sigue nombrando el objeto

Llamada suelta — el objeto ya no va

Si despegas la función, la taza se va con el punto

Apunta this a otro objeto con call

call presta la función a un solo objeto

Fija el objeto con bind

bind guarda el objeto para una llamada suelta posterior

La flecha toma this de la función exterior

Una flecha no toma this del punto

Empareja la llamada con el trabajo

Pon una etiqueta fijada en la página

Demo de página — etiqueta fijada

Pasos de práctica

Tropezones frecuentes

Resumen

🧠 Pon a Prueba tu Conocimiento

Pon a Prueba tu Conocimiento

📝 Instrucciones

🚧 Curso Próximamente

Course Name

Recibir Notificación Cuando Esté Disponible

Disponible Ahora

Coming Soon

Course Name