Как он узнает, что (3, 5) — это arguments?

Question

[Константин]

Код:

let worker = {
  slow(min, max) {
    alert(`Called with ${min},${max}`);
    return min + max;
  }
};

function cachingDecorator(func, hash) {
  let cache = new Map();
  return function() {
    let key = hash(arguments); // (*)
    if (cache.has(key)) {
      return cache.get(key);
    }

    let result = func.call(this, ...arguments); // (**)

    cache.set(key, result);
    return result;
  };
}

function hash(args) {
  return args[0] + ',' + args[1];
}

worker.slow = cachingDecorator(worker.slow, hash);

alert( worker.slow(3, 5) ); // работает
alert( "Again " + worker.slow(3, 5) );

Вопросы:

1) Как он узнает, что в let key = hash(arguments); на месте argumentsдолжны быть 3, 5 ?
2) Почему изменив одновременно(или в одном из мест) здесь let key = hash(arguments); и здесь let result = func.call(this, ...arguments); название arguments, например, на argument- код перестает работать и выдает ошибку?

Comments

[Lynn «Кофеман»]

https://learn.javascript.ru/arguments-pseudoarray

[Александр]

Начинайте учить/изучать https://learn.javascript.ru/, минимум всю часть 1.

[Константин]

Александр, я именно это и учу

[Александр]

Константин, и в чем тогда проблема? https://learn.javascript.ru/search/?query=argument...

[Константин]

Александр, Псевдомассив аргументов "arguments" - речь об этом?

[Александр]

Константин, конечно, причем выше Вам ответили https://qna.habr.com/q/1163662?e=12750406#clarific....

[Константин]

Александр, учебник очень странный... Эта тема в архиве, а в темах изученных ранее он не встречался.

[Сергей delphinpro]

Константин, в архиве старый вариант статьи. Есть и обновлённый https://learn.javascript.ru/rest-parameters-spread...

[GrayHorse]

Для начала прочти первую часть учебника целиком, пропуская непонятные места. Чтобы ознакомиться с тем, что есть в языке. Даже можешь не делать практические задания.

Потом прочти ее же второй раз уже пытаясь разобраться, где не понятно. Делая задания.

[GrayHorse]

Ну и видосы на Ютубе рекомендую, раз 45 % первой части (а их три) учебника мусолится уже 2.5 месяца, а по одному и тому же примеру (из него) по несколько тем здесь, на Тостере, создается.

Одну и ту же информацию лучше получать из разных источников для лучшего освоения.

Answer 1

[Сергей delphinpro]

arguments - это массив массиво-подобный объект аргументов, всегда присутствующий в функции (кроме стрелочных).
Тут используется декоратор – функция-обёртка над другой функцией.
Изначальная функция worker.slow()оборачивается в новую функцию-декоратор. Декоратор выполняет некую работу, вызывает оригинальную функцию, с ее результатом может выполнить еще какую-то работу, и возвращает итоговый результат.

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

function() {
    let key = hash(arguments); // (*)
    if (cache.has(key)) {
      return cache.get(key);
    }

    let result = func.call(this, ...arguments); // (**)

    cache.set(key, result);
    return result;
  };

Именно она выполняется в последней строчке. Сюда передаются аргументы 3 и 5, которые и попадают в зарезервированный массив arguments.

Можно переписать так, чтобы лучше понять, что происходит:

function cachingDecorator(func, hash) {
  let cache = new Map();
  return function(arg1, arg2) { // явно указать аргументы
    let key = hash(arg1, arg2); // (*)
    if (cache.has(key)) {
      return cache.get(key);
    }

    let result = func.call(this, arg1, arg2); // (**)

    cache.set(key, result);
    return result;
  };
}

Comments

[black1277]

arguments - это массив аргументов, всегда присутствующий в функции

целых 2 ошибки: это не массив(это подобный массиву объект) и его нету в стрелочной ф-ии.

[Сергей delphinpro]

black1277, Это неточности, а не ошибки. Но в целом вы правы. По ссылке, что я дал в комментариях, об этом отдельно упоминается.

[Константин]

Сергей delphinpro, Мне непонятны 2 эти строчки:

worker.slow = cachingDecorator(worker.slow, hash);
alert( worker.slow(3, 5) );

worker.slow вызывается параметрами (3,5), а cachingDecorator вызывается с параметрами (worker.slow, hash).

Как разобраться, что как затем заменяется при работе уже внутри функции... Что чему присваивается.

Как он определяет, что arguments- это именно (3,5), а не (worker.slow, hash) ?

[Константин]

Сергей delphinpro, я никак не разберусь какое действие за каким следует...

[Константин]

Сергей delphinpro, процесс этих всех присваиваний параметров, аргументов не могу отследить

[Сергей delphinpro]

Константин, cacheDecoratorвызывается один раз, здесь

worker.slow = cachingDecorator(worker.slow, hash);

Ему передается оригинальная функция worker.slow и функция хеширования hash.
При этом вызове cacheDecorator возвращает другую функцию.
Эта другая функция пишется в переменную и вызывается столько раз, сколько нужно

let worker = {
  slow(min, max) {
    alert(`Called with ${min},${max}`);
    return min + max;
  }
};

function cachingDecorator(func, hash) {
  let cache = new Map();
  return function decoratedSlow() { // ЭТА ФУНКЦИЯ ПОТОМ БУДЕТ ВЫЗЫВАТЬСЯ
    let key = hash(arguments); // (*)
    if (cache.has(key)) {
      return cache.get(key);
    }

    let result = func.call(this, ...arguments); // (**)

    cache.set(key, result);
    return result;
  };
}

function hash(args) {
  return args[0] + ',' + args[1];
}

const decoratedSlowFunc = cachingDecorator(worker.slow, hash);

alert( decoratedSlowFunc(3, 5) ); // работает
alert( "Again " + decoratedSlowFunc(3, 5) );

[Сергей delphinpro]

Возможно, сбивает с толку тот факт, что новая функция записывается в старую переменную
worker.slow = cachingDecorator(worker.slow, hash);
Переписал выше, дав отдельные названия. Но всё осталось так же.

[Константин]

Сергей delphinpro, правильно последовательность улавливаю?
1) вызов функции decoratedSlowFunc(3, 5)
2) выполнение идет на эту строчку

const decoratedSlowFunc = cachingDecorator(worker.slow, hash);

и уже там вызывается функция cachingDecorator(worker.slow, hash)возвращающая функцию обертку function decoratedSlow().
3) Функция обертка записана в переменную const decoratedSlowFunc
4) Из функции обертки внутри переменной const decoratedSlowFunc происходит запись (key, result) в кэш функции находящейся в глобальном окружении? Т.е. в cachingDecorator(func, hash) в let cache = new Map();

[Сергей delphinpro]

Константин, 1 и 2 поменяйте местами =)

[Константин]

Сергей delphinpro, ок, спасибо!

[Сергей delphinpro]

Константин, Давайте еще раз. Декораторы - трудная тема для новичков .
Упростим

let originalFunc = function(min, max) { /*...*/ }

function decorator(func) {
  let cache = new Map;
  // в func здесь у нас оригинальная функция originalFunc
  return function decorated() { // Имя здесь не нужно, просто для ясности
    // это декоратор (обертка) для нашей оригинальной функции
    // этот декоратор и будем вызывать позже
    // передавая в него min и max,
    // которые как раз и попадут в arguments этой функции
    
    // ну тут дальше что-то делаем
    // Потом вызываем оригинал
    let result = func.call(this, ...arguments);
    // Еще что-то делаем с результатом
    // и возвращаем результат
    return result;
  }
}

// Декорируем оригинальную функцию
const decoratedFunc = decorator(originalFunc);

После этой строчки в decoratedFunc у нас по сути будет возвращаемая функция decorated
То есть, как если бы мы вместо всего что выше, написали

let cache = new Map;
function decoratedFunc() {
    // это декоратор (обертка) для нашей оригинальной функции
    // этот декоратор и будем вызывать позже
    // передавая в него min и max,
    // которые как раз и попадут в arguments этой функции
    
    // ну тут дальше что-то делаем
    // Потом вызываем оригинал
    let result = func.call(this, ...arguments);
    // Еще что-то делаем с результатом
    // и возвращаем результат
    return result;
}

Для удобства, мы принимаем, что будем использовать декорированную функцию, как оригинальную, поэтому пишем ее в ту же переменную

// Декорируем оригинальную функцию
originalFunc = decorator(originalFunc);
originalFunc(3, 5)

PS. Вообще-то преподаватель из меня так себе. Надеюсь не запутал еще больше =)