0Pricing
JavaScript Academy · Урок

Подводные камни извлечения методов и частичное применение

Исправляйте проблемы при извлечении методов с помощью call/apply/bind и изучайте небольшие приёмы частичного применения с bind и стрелочными обёртками

«Подводные камни извлечения методов и частичное применение» — бесплатный урок JavaScript Academy на CoddyKit. Это урок 2 из 3. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения JavaScript Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс JavaScript Academy содержит 3 уроков всего.

Общая картина

Цель: сохранять значение this после извлечения и заранее заполнять аргументы.

  • call(thisArg, a, b)
  • apply(thisArg, [a, b])
  • bind(thisArg, a) → возвращает новую функцию
  • Частичное применение с bind или небольшой arrow
Подводные камни извлечения методов и частичное применение — иллюстрация 1

Проблема при извлечении

Вызов в виде obj.method() работает, но извлечение функции лишает её объекта и нарушает работу 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)
Подводные камни извлечения методов и частичное применение — иллюстрация 2

Однократный вызов через call/apply

call и apply позволяют задать this для одного вызова.

// 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"
Подводные камни извлечения методов и частичное применение — иллюстрация 3

Повторное использование с bind

bind создаёт функцию, которая запоминает this. Вызывайте её много раз без повторной привязки.

// 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"
Подводные камни извлечения методов и частичное применение — иллюстрация 4

Простое частичное применение

Используйте bind, чтобы заранее заполнить первые аргументы, или небольшую arrow-обёртку, чтобы зафиксировать значения и 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"
Подводные камни извлечения методов и частичное применение — иллюстрация 5

Практические шаблоны

Советы:

  • Извлечённые методы: один раз используйте bind и повторно применяйте результат.
  • Однократные вызовы: используйте call/apply.
  • Нужно заранее заполнить аргументы? Используйте bind или небольшую arrow-обёртку.
  • Делайте вспомогательные функции небольшими и давайте им понятные имена.
Подводные камни извлечения методов и частичное применение — иллюстрация 6

Викторина: bind и call/apply

Быстрая проверка: сохранение this и предварительное заполнение аргументов.

Подводные камни извлечения методов и частичное применение — иллюстрация 7

Итоги

Итоги: извлечение лишает функцию this. Используйте call/apply для однократных вызовов, а bind — чтобы зафиксировать this и повторно использовать функцию. Для частичного применения используйте bind или небольшую arrow, чтобы заранее заполнить значения.

Подводные камни извлечения методов и частичное применение — иллюстрация 8

Часто задаваемые вопросы

Урок «Подводные камни извлечения методов и частичное применение» бесплатный?

Да — полный текст урока «Подводные камни извлечения методов и частичное применение» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс JavaScript Academy, подпишись на CoddyKit PRO. Курс JavaScript Academy содержит 3 уроков всего.

Чему я научусь в уроке «Подводные камни извлечения методов и частичное применение»?

Исправляйте проблемы при извлечении методов с помощью call/apply/bind и изучайте небольшие приёмы частичного применения с bind и стрелочными обёртками Ты практикуешь JavaScript Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать JavaScript Academy?

Предыдущий опыт не требуется. JavaScript Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 3.

Сколько времени занимает урок «Подводные камни извлечения методов и частичное применение»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке JavaScript Academy?

Да. Каждый урок JavaScript Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Лексический и динамический this, повторение стрелочных функций
  2. Подводные камни извлечения методов и частичное применение
  3. Функциональные альтернативы — явная передача контекста, замыкания и небольшие помощники
← Назад к JavaScript Academy