Как происходит кеширование, если вызывает функция slow?

Question

[aLeXxX_03]

Пример:

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) );

Правильно же я понимаю, что тут alert( slow(1) ); происходит вызов функции slow(x) с аргументом 1?

Если так, то почему они тут пишут alert( "Again: " + slow(1) ); - возвращаем из кеша.
Из какого кеша?
Если вызывалась функция slow(x), в которой нет никакого кеширующего функционала, а он есть в функции cachingDecorator, которая НИ РАЗУ не вызывалась.

И что такое slow = cachingDecorator(slow);?
Это тоже самое, что let slow = cachingDecorator(slow);?

Или при вызове slow(1) происходит НЕ вызов функции function slow(x), а как раз вызов slow = cachingDecorator(slow);?

Если да, то в чем логика? Что за бред? Или я чего-то не знаю базового?

Ведь очевидно же, что при slow(1) происходит вызов slow(x) с параметром 1.

СПАСИБО ЗА ПОМОЩЬ!

Comments

[Kentavr16]

потому что после slow = cachingDecorator(slow); функция slow уже не просто выводит алерт. Почитай про декораторы, станет яснее.

Answer 1

[Aetae]

В js функция не является чем-то особенным и неприкасновенным.

function slow(x) { ... }
Утириовано: создана функция и положена в переменную slow, аналогично:

var slow;
slow = function (x) { ... };

slow = cachingDecorator(slow);
Пишем в переменную результат вызова cachingDecorator с аргументом из slow.

Всё происходит по порядку:
0. Создаётся функция и кладётся в пременую slow.
1. Берётся текушая функция из slow.
2. Кладётся в аргуметы cachingDecorator.
3. Результат cachingDecorator(slow) кладётся в переменную slow.

Есть всякие нюансы и оговорки, но в целом не следует переусложнять, со всеми сущностями в js можно работать одинаково.

Comments

[aLeXxX_03]

Правильно ли я понимаю, что здесь имелось в виду это

slow = cachingDecorator(function slow(x) {
  // здесь могут быть ресурсоёмкие вычисления
  alert(`Called with ${x}`);
  return x;
}
);

?

[Aetae]

aLeXxX_03, суть та же, да. Тут ты создаёшь функцию и сразу передаёшь её аргументом. Там ты сначала её создаёшь, а потом передаёшь. Но в целом разницы нет в данном случае.

[aLeXxX_03]

Aetae, А еще можете подсказать, что здесь происходит?

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) ); // работает, не вызывая первоначальную функцию (кешируется)

На этой строчке worker.slow = cachingDecorator(worker.slow); не понимаю, что происходит.

Мы что, в объект worker добавляем свойство slow , в котором у нас хранится метод, который возвращает функция cachingDecorator?

[aLeXxX_03]

Aetae, почему они назвали worker.slow = cachingDecorator(worker.slow); , а не slow = cachingDecorator(worker.slow); ?

Вот, что непонятно.

[Aetae]

aLeXxX_03, ну чтоб заменить поле slow в объекте worker, а не создать отдельную переменную.
Ну и чтоб this работал. (про this - первая часть ответа)

Answer 2

[rPman]

slow = cachingDecorator(slow);после этого slow у тебя уже не прошлая функция а целый класс, в котром прописан вызов старой функции при условии отсутствии данных в кеше (объект в этом классе)

Заметь, slow без скобок это не вызов функции, а получение ее самой (в терминах c++ ее адреса) и передача этой функции в виде аргумента. Чтобы вызвать функцию, даже если ее адрес в переменной, нужно написать скобки

Comments

[aLeXxX_03]

Правильно ли я понимаю, что здесь имелось в виду это

slow = cachingDecorator(function slow(x) {
  alert(`Called with ${x}`);
  return x;
}
);

?

[rPman]

aLeXxX_03, да, называется замыкание, кстати стинтаксически имя у функции нужно убрать

slow = cachingDecorator(function(x) {
  alert(`Called with ${x}`);
  return x;
});

или сокращенная запись с помощью =>

slow = cachingDecorator(x => {
  alert(`Called with ${x}`);
  return x;
});

[Дмитрий Беляев]

кстати стинтаксически имя у функции нужно убрать

rPman, кому нужно?

[Дмитрий Беляев]

а целый класс

rPman, нет здесь никакого класса

[aLeXxX_03]

Дмитрий Беляев, Можете подсказать, что здесь происходит?

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) ); // работает, не вызывая первоначальную функцию (кешируется)

На этой строчкеworker.slow = cachingDecorator(worker.slow);

Мы что, в объект worker свойство slow добавляем, в котором у нас хранится метод, который возвращает функция cachingDecorator?

[Aetae]

aLeXxX_03, всё то же самое. Как я сказал выше - не усложняй. Методы в js в целом (опять же с не критичными на данном этапе оговорками) те же самые поля. Их точно также можно переопределять как хочешь, как и переменные.

let worker = {
  someMethod() {
    return 1;
  },
 
  slow(x) {
    alert("Called with " + x);
    return x * this.someMethod(); // (*)
  }
};

Это просто короткая запись для:

let worker = {
  someMethod: function someMethod() {
    return 1;
  },
 
  slow: function slow(x) {
    alert("Called with " + x);
    return x * this.someMethod(); // (*)
  }
};