Al final de la lección anterior quedó una pregunta en el aire: si un objeto puede guardar números, strings y arrays, ¿por qué no funciones? La respuesta es que sí puede, y eso cambia la forma de organizar el código. Una función guardada en una propiedad se llama método, y permite que el tablero de Taller Nómada no sea solo una bolsa de tareas, sino un objeto que sabe agregar una tarea, cambiarle el estado y calcular su propio resumen. Con los métodos aparece this, la palabra clave con peor fama de JavaScript: no porque sea complicada, sino porque casi todo el mundo la aprende con la regla equivocada. En esta lección la aprenderás con la regla correcta —this depende de cómo se llama la función, no de dónde se define—, verás las cuatro formas de invocación en una tabla, resolverás el problema clásico de perder this al pasar un método como callback y cerrarás por fin la deuda que dejó 03-02 sobre las funciones flecha.

1. De función suelta a método
2. La sintaxis abreviada de métodos
3. Qué es this y la regla fundamental
4. Las cuatro formas de invocación
5. call, apply y bind
6. El objeto tablero de Taller Nómada
7. El problema clásico: perder this en un callback
8. Las tres soluciones
9. Por qué la función flecha no tiene this propio
10. this en bucles y funciones anidadas
11. Cuándo la flecha ayuda y cuándo estorba
12. Errores Comunes y Consejos
13. Ejercicios
14. Conclusión

Partimos del backlog de la lección anterior y de describirTarea(tarea, hoy). Ahora mismo, la función y los datos viven separados:

Nada impide meter la función dentro del objeto:

Dos cosas nuevas en ese bloque:

• describir es una propiedad como cualquier otra; lo único especial es que su valor es una función. Puedes comprobarlo: typeof tarea.describir es 'function', y Object.keys(tarea) la incluye.
• Dentro del método aparece this, que en esta llamada se refiere al propio objeto tarea. Gracias a él, el método puede leer los datos de «su» objeto sin que se los pases como argumento.

La diferencia de vocabulario es simple:

Escribir describir: function (hoy) { ... } funciona, pero desde ES2015 existe una forma más corta y es la que se usa hoy:

Las dos hacen lo mismo. La abreviada es más corta, más legible y es la que debes usar. Ojo con una tercera opción que parece equivalente pero no lo es:

Ese undefined es el tema del apartado 9. De momento, quédate con la regla operativa: para los métodos de un objeto literal, usa siempre la sintaxis abreviada, nunca una flecha.

this es una palabra clave que, dentro de una función, apunta a un objeto. Cuál es ese objeto se decide en el momento de la llamada, no en el momento de escribir la función. Esta es la regla que hay que memorizar:

this no depende de dónde se define la función, sino de CÓMO se la llama.

Suena abstracto hasta que ves una misma función comportarse de tres maneras distintas:

Es la misma función, definida una sola vez. Lo único que cambia es lo que hay a la izquierda del punto al llamarla. Con esa imagen mental, this deja de ser magia: es simplemente «el objeto sobre el que se ha invocado esto».

Toda la complejidad de this se reduce a esta tabla. Cuando dudes de a qué apunta this, busca en qué fila estás.

Vamos una por una.

Llamada simple. Es lo que has hecho durante todo el Módulo 3. En modo estricto ('use strict', que llevas usando desde 01-04) this es undefined. Sin modo estricto sería el objeto global, y ese comportamiento silencioso es una fuente inagotable de bugs: por eso el modo estricto existe.

Como método. El caso normal: this es el receptor.

Aquí conviene una advertencia: this es el objeto que está inmediatamente a la izquierda del punto en la llamada, no el objeto donde el método está escrito. Si mueves el método a otra variable, cambia todo (apartado 7).

Con new. Cuando llamas a una función con new, JavaScript crea un objeto vacío, hace que this apunte a él, ejecuta el cuerpo y devuelve ese objeto.

Este es el mecanismo sobre el que se construyen los constructores, los prototipos y las clases, y se estudia a fondo en Prototipos y Herencia y Clases y POO. Aquí solo necesitas saber que existe y que es la tercera fila de la tabla.

Con call, apply o bind. Es el apartado siguiente.

Toda función de JavaScript trae de serie tres métodos que sirven para decidir this a mano.

Resumen comparativo:

Un truco mnemotécnico: call = comas, apply = array, bind = bloquea (fija this y devuelve una función para más tarde). En la práctica moderna call y apply se usan poco —el spread de 04-07 sustituye casi todos los usos de apply—, pero bind sigue siendo esencial, como verás en el apartado 8.

Un detalle que sorprende: bind es definitivo. Una función ya atada no se puede volver a atar.

Con esto ya podemos construir la pieza central de la lección: un objeto que guarda el backlog y las operaciones sobre él. Marta lo describiría así: «el tablero es la lista de tareas más lo que se puede hacer con ella».

Los números coinciden con el backlog canónico: 6 tareas, 5 abiertas, 45 h abiertas, 1 vencida y un esfuerzo ponderado de 124. Repasa tres decisiones de diseño de este objeto:

1. this.tareas, no tareas. Dentro de un método, para llegar a las propiedades del propio objeto hay que pasar por this. Escribir tareas.push(...) daría ReferenceError, porque no existe ninguna variable con ese nombre.
2. Los métodos se llaman entre sí con this. agregar usa this.buscarPorId(...). Esto es lo que permite reutilizar lógica sin duplicarla.
3. agregar y cambiarEstado devuelven this. Es el patrón de interfaz fluida: como cada llamada devuelve el propio tablero, se pueden encadenar.

Y los errores usan el throw new Error que aprendiste en 02-05, de modo que quien llame puede envolverlo en try/catch:

Aquí llega el momento en que this muerde. Recupera la regla: this depende de cómo se llama la función. Si extraes un método de su objeto, la llamada deja de tener receptor.

¿Por qué? Porque resumir() es una llamada simple (primera fila de la tabla): this vale undefined, y this.tareas revienta. La función es la misma; la llamada, no.

El caso realmente frecuente es más sutil, porque no parece que estés extrayendo nada: ocurre al pasar un método como callback, algo que harás constantemente con los eventos del Módulo 6 y con los métodos de array del resto de este módulo.

Lo que ocurre es que titulos.forEach(notificador.avisar) no pasa el método, pasa la función que había dentro. Cuando forEach la invoca, lo hace como llamada simple, sin ningún receptor:

La imagen mental correcta: el punto no forma parte de la función. notificador.avisar significa «dame el valor guardado en la propiedad avisar». Ese valor es una función anónima que no recuerda de dónde salió. El vínculo con notificador solo existe durante la llamada con punto.

Hay tres formas de arreglarlo, y conviene conocer las tres porque te las encontrarás en código ajeno.

Solución 1: bind. Atas el método a su objeto y pasas la función atada.

Solución 2: una función flecha envolvente. Llamas al método con punto dentro de la flecha, de modo que la llamada sí tiene receptor.

Esta es la más legible y la que se ve más a menudo hoy. Fíjate en que la clave no es la flecha en sí, sino que la invocación conserva el punto: notificador.avisar(titulo).

Solución 3: un método flecha como campo del objeto. Se define la propiedad con una flecha que captura this del ámbito de alrededor.

Esta tercera variante es la menos habitual con objetos literales (funciona mejor con clases, Módulo 5), pero ilustra el patrón que verás en muchos proyectos. Comparación:

Y hay una cuarta vía específica de algunos métodos de array: forEach, map, filter y some aceptan un segundo argumento con el this que quieres usar dentro del callback.

Funciona, pero se usa poco porque es fácil de pasar por alto al leer el código.

En 03-02 dijimos que las funciones flecha se comportan de forma distinta con this y dejamos la explicación para más adelante. Ha llegado el momento.

Una función flecha no tiene su propio this. Dentro de una flecha, this es exactamente el mismo que había en el ámbito donde la flecha fue escrita. Se resuelve como cualquier otra variable, siguiendo la cadena de ámbitos que estudiaste en 03-04.

Esto explica el fallo del apartado 2:

La flecha se escribió fuera de cualquier función, en el ámbito de módulo. Ahí this no es el objeto que la contiene (un literal de objeto no crea ámbito), sino lo que hubiera en ese nivel: undefined en un módulo, o module.exports en Node, o el objeto global en un script clásico. En ninguno de esos casos hay una propiedad nombre.

La tabla que resume la diferencia:

Compruébalo:

El caso que más confunde a los principiantes: una función normal anidada dentro de un método. Como es una llamada simple, pierde el this del método.

imprimirMal sí tiene bien su this (se llamó con punto). Pero la función anónima que recibe forEach se invoca sin receptor, y su this no tiene nada que ver con el del método que la rodea. Antes de las flechas, esto se resolvía con un truco que verás en código antiguo:

Con una flecha, el truco ya no hace falta, porque la flecha hereda el this del método donde se escribió:

Un for...of clásico no tiene este problema en absoluto, porque no introduce ninguna función nueva:

Regla derivada, muy práctica: un bucle no cambia this; una función sí. Si dentro de un método aparece la palabra function, sospecha.

Con todo lo anterior, la decisión es mecánica:

Aplicado al tablero, la versión definitiva combina las dos: métodos abreviados por fuera, flechas por dentro.

(Los métodos filter y map que aparecen ahí se estudian en las lecciones 04-04 y 04-05; aquí solo interesan como ejemplo de callbacks dentro de un método.)

1. Olvidar this. dentro de un método.

2. Usar una flecha como método de un objeto literal. saludar: () => this.nombre nunca verá el objeto. Usa saludar() { ... }.

3. Pasar un método como callback sin atarlo. array.forEach(obj.metodo) pierde this. Escribe array.forEach((x) => obj.metodo(x)).

4. Creer que bind modifica la función original. No: devuelve una nueva. obj.metodo.bind(obj); en una línea suelta no hace absolutamente nada; hay que guardar el resultado.

5. Llamar a bind dentro de un bucle o de un render. Cada bind crea una función distinta. En el Módulo 6 eso significa manejadores de evento que no se pueden quitar con removeEventListener porque la referencia ya no es la misma. Ata una vez y guarda el resultado.

6. Confiar en this sin modo estricto. Sin 'use strict', una llamada simple pone this en el objeto global y las asignaciones a this.algo crean variables globales silenciosamente. Este curso usa modo estricto desde 01-04 precisamente para que ese error se convierta en un TypeError visible.

Consejo profesional. Cuando no sepas a qué apunta this, no razones: imprímelo. Un console.log(this) en la primera línea del método resuelve la duda en dos segundos, y en el Módulo 8 aprenderás a inspeccionarlo con un punto de interrupción sin tocar el código.

Ejercicio 1 — Métodos de una tarea. Escribe un objeto tareaWeb con los datos de la tarea 3 del backlog (id 3, «Actualizar la web de reservas», Lucía, alta, pendiente, 14 h, '2026-10-02') y añade tres métodos abreviados: esAlta() (devuelve true si la prioridad es 'alta'), estaVencida(hoy) (aplica la R10) y etiqueta() (devuelve un string '[3] Actualizar la web de reservas — Lucía'). Pruébalos con HOY = '2026-09-20'.

Ejercicio 2 — Cazar el this perdido. Este código falla. Explica por qué y arréglalo de dos formas distintas (una con bind y otra con función flecha), sin cambiar el método recordar.

Ejercicio 3 — Contador de horas por persona. Amplía el objeto tablero con un método horasDe(persona) que devuelva las horas abiertas (estado distinto de 'hecha') de esa persona, y un método informePorPersona() que devuelva un objeto con una clave por responsable y sus horas abiertas. Usa this y los métodos entre sí. Comprueba que tablero.horasDe('Iván') da 25 y que el informe cuadra con las 45 h abiertas totales.

Ejercicio 1

Fíjate en que estaVencida recibe hoy como parámetro en lugar de leerlo de una constante global: es la misma decisión de diseño de 03-03, y sirve para poder probar la función con cualquier fecha.

Ejercicio 2

El fallo está en pendientes.forEach(agenda.recordar). Ahí no se pasa «el método de agenda», se pasa la función que hay guardada en la propiedad recordar. Cuando forEach la invoca lo hace sin receptor —una llamada simple—, así que en modo estricto this vale undefined y this.responsable lanza un TypeError.

Una tercera opción válida, específica de forEach, es aprovechar su segundo parámetro: pendientes.forEach(agenda.recordar, agenda);.

Ejercicio 3

Comprobación: 25 + 6 + 14 = 45 h abiertas, exactamente las del backlog canónico (las 3 h de «Inventario de tintas» no cuentan porque está hecha). Dos detalles del código: informe[clave] usa corchetes porque la clave está en una variable (04-01), y (informe[clave] ?? 0) resuelve la primera vez, cuando la clave todavía no existe y devolvería undefined. En 04-05 harás exactamente este mismo agrupamiento con reduce en cuatro líneas.

Un método no es más que una función guardada en una propiedad, y se escribe con la sintaxis abreviada metodo() {}. Lo que lo hace especial es this, y ahora tienes la única regla que necesitas: this depende de cómo se llama la función, no de dónde se escribió. Con las cuatro formas de invocación en la cabeza —llamada simple (undefined en modo estricto), como método (el receptor), con new (el objeto nuevo, que desarrollarás en el Módulo 5) y con call/apply/bind (el que tú digas)— cualquier this misterioso deja de serlo: basta con mirar la llamada.

Has construido el objeto tablero de Taller Nómada, con buscarPorId, agregar, cambiarEstado, resumen y linea, comprobando que los métodos se llaman entre sí a través de this, que devolver this permite encadenar operaciones y que los errores se lanzan con el throw new Error de 02-05. Has diagnosticado el problema clásico —perder this al pasar un método como callback— y tienes las tres soluciones con sus ventajas e inconvenientes. Y has cerrado la deuda de 03-02: la función flecha no tiene this propio, lo hereda del ámbito donde se escribió, lo que la hace inútil como método de un objeto literal y perfecta como callback dentro de un método.

Fíjate ahora en qué ha sido lo más incómodo de esta lección. No ha sido this: han sido los bucles. buscarPorId recorre a mano hasta encontrar; resumen acumula cuatro variables en un for; horasDe filtra con un if dentro de otro bucle. El objeto ya está bien modelado, pero la lista de tareas todavía se maneja con las herramientas del Módulo 2. Eso cambia a partir de la lección siguiente, Arrays: Conceptos Básicos y Métodos, donde estudiarás el array a fondo: cómo se crea, cómo se mide, y sobre todo la distinción que más disgustos evita en JavaScript —métodos que mutan el array frente a métodos que devuelven uno nuevo—, con las etiquetas de una tarea como banco de pruebas.