0Pricing
JavaScript Academy · Lección

Problemas al extraer métodos y aplicación parcial

Corrija la extracción de métodos con call/apply/bind y aprenda pequeños patrones de aplicación parcial con bind y funciones flecha envolventes.

Problemas al extraer métodos y aplicación parcial es una lección gratuita de JavaScript Academy en CoddyKit. Esta es la lección 2 de 3. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de JavaScript Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de JavaScript Academy incluye 3 lecciones en total.

Panorama general

Objetivo: Mantenga this estable después de extraer una función y complete argumentos por adelantado.

  • call(thisArg, a, b)
  • apply(thisArg, [a, b])
  • bind(thisArg, a) → devuelve una función nueva
  • Aplicación parcial con bind o una pequeña función flecha
Problemas al extraer métodos y aplicación parcial — ilustración 1

Error común al extraer funciones

Llamar como obj.method() funciona, pero extraer la función hace que se pierda el objeto y rompe this.

// Extraction loses this
const user = {
  name: "Ayla",
  label: function (prefix) {
    return prefix + ":" + this.name;
  }
};

console.log("method call:", user.label("Hi")); // "Hi:Ayla"

// Extract
const f = user.label;
console.log("extracted:", f("Hi")); // this is missing -> "Hi:undefined" (in strict mode this is undefined)
Problemas al extraer métodos y aplicación parcial — ilustración 2

call/apply para una sola llamada

call y apply permiten establecer this para una sola invocación.

// Fix by passing this explicitly using call/apply
console.log("call :", f.call(user, "Hi"));   // "Hi:Ayla"
console.log("apply:", f.apply(user, ["Yo"])); // "Yo:Ayla"
Problemas al extraer métodos y aplicación parcial — ilustración 3

bind para reutilizar

bind crea una función que recuerda this. Llámela muchas veces sin volver a aplicar bind.

// bind returns a new function with this fixed
const bound = f.bind(user);
console.log("bound once:", bound("Hey")); // "Hey:Ayla"
console.log("bound again:", bound("Yo")); // "Yo:Ayla"
Problemas al extraer métodos y aplicación parcial — ilustración 4

Aplicación parcial (sencilla)

Use bind para completar previamente los argumentos iniciales, o una pequeña función flecha envolvente para fijar los valores y this.

// Partial application: pre-fill arguments
function add(a, b, c) { return a + b + c; }

// Using bind: pre-fill a=10
const add10 = add.bind(null, 10);
console.log("add10(1,2):", add10(1, 2)); // 13

// Using an arrow wrapper: pre-fill prefix
const labelHi = function (obj) {
  return function () { return obj.label("Hi"); };
}(user);

console.log("arrow partial:", labelHi()); // "Hi:Ayla"
Problemas al extraer métodos y aplicación parcial — ilustración 5

Patrones prácticos

Consejos:

  • Métodos extraídos: use bind una vez y reutilícelo.
  • Llamadas puntuales: use call/apply.
  • ¿Necesita argumentos completados previamente? Use bind o una pequeña función flecha envolvente.
  • Mantenga las funciones auxiliares pequeñas y nómbrelas con claridad.
Problemas al extraer métodos y aplicación parcial — ilustración 6

Cuestionario sobre bind frente a call/apply

Comprobación rápida: conservar this y completar argumentos previamente.

Problemas al extraer métodos y aplicación parcial — ilustración 7

Resumen

Resumen: Extraer una función hace que se pierda this. Use call/apply para llamadas puntuales y bind para fijar this y reutilizar la función. Para aplicaciones parciales, use bind o una pequeña función flecha para completar previamente los valores.

Problemas al extraer métodos y aplicación parcial — ilustración 8

Preguntas frecuentes

¿La lección «Problemas al extraer métodos y aplicación parcial» es gratis?

Sí — el texto completo de «Problemas al extraer métodos y aplicación parcial» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de JavaScript Academy, actualiza a CoddyKit PRO. El curso de JavaScript Academy incluye 3 lecciones en total.

¿Qué aprenderé en «Problemas al extraer métodos y aplicación parcial»?

Corrija la extracción de métodos con call/apply/bind y aprenda pequeños patrones de aplicación parcial con bind y funciones flecha envolventes. Practicas JavaScript Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar JavaScript Academy?

No se requiere experiencia previa. JavaScript Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 3.

¿Cuánto tiempo toma la lección «Problemas al extraer métodos y aplicación parcial»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de JavaScript Academy?

Sí. Cada lección de JavaScript Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

  1. this léxico frente a dinámico y repaso de las arrow functions
  2. Problemas al extraer métodos y aplicación parcial
  3. Alternativas funcionales: pasar el contexto, closures y utilidades pequeñas
← Volver a JavaScript Academy