this a fondo: las cuatro reglas, de una vez

Desde el módulo 5 vives con la regla corta: "this es el objeto antes del punto". Hoy se cumple la promesa de la versión completa: las CUATRO reglas que deciden qué es this en cualquier código JavaScript — incluida la del bug más famoso del lenguaje y la razón exacta por la que una arrow function jamás debe ser un método.

La palabra "mi"

Las cuatro reglas

Detente en la regla 2, que es la traicionera: al desconectar la función del objeto, el "mi" queda huérfano. ¿Y qué vale entonces? Depende del entorno — y ambos son malas noticias. En código laxo (scripts viejos, y este sandbox), this cae al objeto global, que no tiene titular: por eso viste "Bolsillo de undefined". En código moderno ESTRICTO (módulos ES, y SIEMPRE dentro de clases), es más drástico: this es undefined y leerle .titular revienta con el famoso Cannot read properties of undefined. Mismo diagnóstico en ambos mundos: el "mi" se perdió. En orden de prioridad cuando las reglas se combinan: new gana, luego el objeto antes del punto; y la arrow no compite — ella trae su this de fábrica, del entorno donde fue escrita.

El bug del millón: el this perdido

La regla 2 ataca donde menos lo esperas: cada vez que ENTREGAS un método como callback. setTimeout, addEventListener, map… reciben tu función y la llaman ellos — sin objeto antes del punto:

Míralo con la analogía: la function normal que le entregaste a setTimeout será pronunciada por OTRO actor (el timer), y su "mi" ya no es tu bolsillo. La arrow, en cambio, es cita textual: se escribió DENTRO del método recordarBien — donde this era el bolsillo — y ese this se va con ella a donde vaya. Por eso la regla práctica del módulo 5 ahora tiene su porqué completo:

• Arrow como MÉTODO: nunca. El método necesita jugar el juego del punto, y la arrow no juega.
• Arrow como CALLBACK dentro de un método: siempre. Ahí quieres conservar el this de afuera, y eso es exactamente lo que hace.

Última pieza del arsenal, por honestidad: existe metodo.bind(objeto), que fabrica una copia de la función con el this fijado para siempre (y sus primas call/apply, que llaman una vez con el this que indiques). Las verás en código ajeno, sobre todo anterior a las arrows; hoy la arrow resuelve el 95% de los casos con menos ceremonia.

Mini-reto

Caza el bug con tus manos: crea una clase Contador con this.clics = 0 y un método conectar(boton) que registre un listener sumando clics e imprimiendo el total. Escríbelo primero con function normal como callback (mira el error en frío), luego cúralo con arrow, y de postre inténtalo con .bind(this). Tres versiones del mismo listener: ya puedes explicar en una entrevista por qué solo dos funcionan.

Qué sigue

Dijimos que los métodos del molde "se comparten entre todas las instancias" — pero ¿DÓNDE viven exactamente, si no están copiados en cada objeto? La respuesta es la maquinaria secreta debajo de todo JavaScript: los PROTOTIPOS. La próxima lección los destapa sin miedo — y de paso resuelve misterios que arrastras desde el módulo 5.