Декораторы и переадресация вызова

@sozdatel · Регистрация: 20.08.2016

Студворк — интернет-сервис помощи студентам

Привет, объясните пожалуйста работу примеров из учебника простыми словами. Несколько раз перечитал и всё равно не понимаю.

Почему в первом примере

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
function slow(x) {
  // здесь могут быть ресурсоёмкие вычисления
  alert(`Called with ${x}`);
  return x;
}
 
function cachingDecorator(func) {
  let cache = new Map();
 
  return function(x) {
    if (cache.has(x)) {    // если кеш содержит такой x,
      return cache.get(x); // читаем из него результат
    }
 
    let result = func(x); // иначе, вызываем функцию
 
    cache.set(x, result); // и кешируем (запоминаем) результат
    return result;
  };
}
 
slow = cachingDecorator(slow);
 
alert( slow(1) ); // slow(1) кешируем
alert( "Again: " + slow(1) ); // возвращаем из кеша
 
alert( slow(2) ); // slow(2) кешируем
alert( "Again: " + slow(2) ); // возвращаем из кеша

всё происходит нормально, как и задумывалось, а во втором нет?

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
// сделаем worker.slow кеширующим
let worker = {
  someMethod() {
    return 1;
  },
 
  slow(x) {
    // здесь может быть страшно тяжёлая задача для процессора
    alert("Called with " + x);
    return x * this.someMethod(); // (*)
  }
};
 
// тот же код, что и выше
function cachingDecorator(func) {
  let cache = new Map();
  return function(x) {
    if (cache.has(x)) {
      return cache.get(x);
    }
    let result = func(x); // (**)
    cache.set(x, result);
    return result;
  };
}
 
alert( worker.slow(1) ); // оригинальный метод работает
 
worker.slow = cachingDecorator(worker.slow); // теперь сделаем его кеширующим
 
alert( worker.slow(2) ); // Ой! Ошибка: не удаётся прочитать свойство 'someMethod' из 'undefined'

Почему при выполнении этого кода

JavaScript
1
return x * this.someMethod(); // (*)

и запуске

JavaScript
1
worker.slow = cachingDecorator(worker.slow);

происходит ошибка, ведь мы так же сделали ссылку на тот же объект worker?

Почему внутри обёртки переменная this оказывается равной undefined?

Почему контекст вызова внутри обёртки не привязан к объекту worker?

@voraa · 17.12.2025, 07:13

Сообщение от sozdatel

Почему контекст вызова внутри обёртки не привязан к объекту worker?

Потому, что вы его отвязываете, когда передаете функцию

JavaScript
1
cachingDecorator(worker.slow);

Вот посмотрите

JavaScript
1
2
3
4
5
6
7
8
9
const obj = {
    a: 1,
    method () { console.log (this)},
}
 
obj.method ();  // вызов с контекстом this = obj
const f = obj.method;
 
f(); // вызов без контекста this = undefined / window

const f = obj.method; //присваивает функцию, но не контекст
]cachingDecorator(worker.slow); // передает функцию но не контекст.

Надо передавать функцию с контекстом с помощью bind

JavaScript
1
2
3
4
5
6
7
8
9
const obj = {
    a: 1,
    method () { console.log (this)},
}
 
obj.method ();  // вызов с контекстом this = obj
const f = obj.method.bind(obj);
 
f(); // вызов с контекстом this = obj

Надо

JavaScript
1
worker.slow = cachingDecorator(worker.slow.bind(worker));

krvsa · 17.12.2025, 09:29

Сообщение от sozdatel

ведь мы так же сделали ссылку на тот же объект worker?

Ссылка на объект worker делается вот так

JavaScript
1
const o = worker;

А у тебя происходит "заимствование функции". И, как следствие, потеря контекста...

@sozdatel · 17.12.2025, 14:11 **[ТС]**

Сообщение от voraa

JavaScript
1
2
3
4
5
6
7
const obj = {
    a: 1,
    method () { console.log (this)},
}
obj.method ();  // вызов с контекстом this = obj
const f = obj.method;
f(); // вызов без контекста this = undefined / window

Сообщение от voraa

JavaScript
1
const f = obj.method; //присваивает функцию, но не контекст

Можете написать, почему таким образом не присваивается контекст для f? Ведь мы этой строкой привязали f к методу объекта, к которому мы имеем доступ?

krvsa · 17.12.2025, 14:26

Сообщение от sozdatel

Можете написать, почему таким образом не присваивается контекст для f?

Так нет никакого "присваивания контекста". Таким присваиванием ты просто "заимствовал метод".
Такое можно реализовать если использовать bin(), call() или apply()

Вот что про такое пишут в учебнике https://learn.javascript.ru/bind

Добавлено через 2 минуты

Сообщение от sozdatel

Ведь мы этой строкой привязали f к методу объекта, к которому мы имеем доступ?

Это не привязка.

Это получение ссылки на функцию.
А вот в каком контексте эта функция будет вызываться - это еще вопрос.

Например, если установить эту функцию в качестве обработчика на некую кнопку - this в ней будет указывать на кнопку.

@sozdatel · 17.12.2025, 15:11 **[ТС]**

И ещё, почему в коде ниже строка

JavaScript
1
 let result = func.call(this, x);

привязывает контекст worker.slow к worker, а не к cachingDecorator?

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
let worker = {
  someMethod() {
    return 1;
  },
 
  slow(x) {
    alert("Called with " + x);
    return x * this.someMethod(); // (*)
  }
};
 
function cachingDecorator(func) {
  let cache = new Map();
  return function(x) {
    if (cache.has(x)) {
      return cache.get(x);
    }
    let result = func.call(this, x); // теперь 'this' передаётся правильно
    cache.set(x, result);
    return result;
  };
}
 
worker.slow = cachingDecorator(worker.slow); // теперь сделаем её кеширующей
 
alert( worker.slow(2) ); // работает
alert( worker.slow(2) ); // работает, не вызывая первоначальную функцию (кешируется).

@voraa · 17.12.2025, 15:37

Сообщение от sozdatel

Ведь мы этой строкой привязали f к методу объекта, к которому мы имеем доступ?

Мы ничего не привязываем.
Если по простому
this передается в функцию, когда она вызывается как метод. <object>.<function>(); Вот то, что стоит перед . то передается, как this. Если ничего не стоит (нет в вызове <object>. а просто <function>() ) то ничего не передается, и this будет window / undefined)
При использовании методов call, apply и bind мы принудительно указываем, что передать в this

Когда мы пишем

JavaScript
1
const f = obj.method;

Мы просто в переменную f записываем ссылку на какую то функцию. Про то, что это метод какого то объекта, и тем более какого объекта, f ничего не знает. Просто какая то функция.

Сообщение от sozdatel

И ещё, почему в коде ниже строка
let result = func.call(this, x);
привязывает контекст worker.slow к worker, а не к cachingDecorator?

Потому, что this в этом случае то, что пришло в функцию

JavaScript
1
2
3
4
5
6
7
8
function(x) {
    if (cache.has(x)) {
      return cache.get(x);
    }
    let result = func.call(this, x); // теперь 'this' передаётся правильно
    cache.set(x, result);
    return result;
  };

при ее вызове. А вызывалась она, как worker.slow(2). Значит this внутри нее будет worker.

krvsa · 17.12.2025, 15:52

Сообщение от sozdatel

почему в коде ниже строка

JavaScript
1
 let result = func.call(this, x);

привязывает контекст worker.slow к worker, а не к cachingDecorator?

Так cachingDecorator это функция, которая вернет функцию, назовем ее хешированной. Которая в свою очередь будет замкнута на переменную cache.
На этом роль функции cachingDecorator завершена и она нам более не интересна.
А вот хешированную функцию присваивают свойству slow объекта worker. Т.о. имеем хешированный метод объекта.
Этот самый хешированный метод вызывают в контексте объекта worker.

Сообщение от sozdatel

JavaScript
1
let result = func.call(this, x);

Т.ч. теперь this тут ссылается на объект worker.

Новые блоги и статьи Все статьи Все блоги /
Символьное дифференцирование igorrr37 13.02.2026 / * Логарифм записывается как: (x-2)log(x^2+2) - означает логарифм (x^2+2) по основанию (x-2). Унарный минус обозначается как ! */ #include <iostream> #include <stack> #include <cctype>. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .