Можно кто код объяснить?

Question

[Swaer]

function work(a, b) {
  alert( a + b ); 
}
function spy(func) {
  
    function wrapper(...args) {
      wrapper.calls.push(args);
      return func.apply(this, arguments);
    }
  
    wrapper.calls = [];
  
    return wrapper;
 }
work = spy(work);

work(1, 2); // 3
work(4, 5); // 9

for (let args of work.calls) {
  alert( 'call:' + args.join() ); // "call:1,2", "call:4,5"
}

Не могу понять, что тут да как, что это work = spy(work); и как работает, что тут параметр func делает, что тут this(думаю window) и так далее, кто может построчно объяснить функцию spy и work = spy(work)

Comments

[Сергей Сергей]

Здесь идёт запоминание аргументов, с которыми функция вызывалась. Для отладки такое можно использовать.

this — это func (теперь жить с этим).

[nuclear_kote]

learn.javascript.ru

[Swaer]

Сергей Сергей, а можно узнать, куда это запомнилось и проверить? work = spy(work); в это строке произошло запоминание аргумента в виде функции?Т.е. при дальнейших вызовах work будет вызвана функции, которую запомнили и она будет применяться для его аргументов?

[Swaer]

nuclear_kote, ну да, задача оттуда, но я не смог понять полностью и в итоге хочу разобраться

[Сергей Сергей]

Я не понял текст этих вопросов.
Примерную цель этой программки я описал. Назначение функций можно понять из их определения.

Answer 1

[Vladyslav Kliuiev]

// Создать функцию work, что она делает понятно, надеюсь
function work(a, b) {
  alert( a + b ); 
}
// Создать функцию spy, которая принимает в себя функцию
function spy(func) {
    // Создать функцию-обертку, которая принимает в себя все аргументы
    // функции, внутри которой она была вызвана.
    function wrapper(...args) {
      // Сохранить аргументы внутри wrapper.calls
      wrapper.calls.push(args);
      // Привязать функцию, что передавалась как агрумент,
      // к контексту, в котором она будет вызвана
      return func.apply(this, arguments);
    }

    // Вот тут начинается полный говнокод. 
    // То, что написано снизу, равноценно следующему:
    // var wrapper;
    // wrapper.calls = [];
    // Почему говнокод? Потому что во первых никто
    // давно в 2020 году не пользуется var. А почему?
    // А потому что эта переменная будет висеть на общее обозрение.
    // Никогда не надо делать так, объявляйте нормально:
    // const wrapper или let wrapper. Более того, не понятно,
    // зачем здесь нужен именно  wrapper.calls. Можно просто создать 
    // переменную const wrapper = [] и пушить в неё.
    wrapper.calls = [];
  
    // Собственно вернуть то что получилось.
    return wrapper;
 }

// Снова говнокод. По итогу теперь work = wrapper, у которого определен
// метод func как function func(a, b) { alert(a+b) }. work что объявлен в самом начале исчез.
work = spy(work);

// Здесь вызывается то что получилось.
work(1, 2); // 3
work(4, 5); // 9

// Тут выводятся значения из массива, всё понятно
for (let args of work.calls) {
  alert( 'call:' + args.join() ); // "call:1,2", "call:4,5"
}

На скорую руку, я бы это переделал так.

const argumentsArray = [];

function work(a, b) {
  console.log(a + b);
}

function loggedArgs(...args) {
  argumentsArray.push(args);
}

function workAndLog() {
  work(...arguments);
  loggedArgs(...arguments);
}

workAndLog(1, 2); // 3
workAndLog(4, 5); // 9

for (let args of argumentsArray) {
  console.log("call:" + args.join()); // "call:1,2", "call:4,5"
}

Comments

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

На скорую руку, я бы это переделал так.

переиспользуемость страдает. В примере автора вопроса я могу использовать spy многократно, на разных функциях или много раз на одной, но я получу каждый раз новую обертку с новым логом вызовов.

// Вот тут начинается полный говнокод.

и в чем говнокод? Определить еще одно поле на созданном в этой же функции объекте (пусть даже функциональном) - это вполне нормальная практика.

[Дмитрий Лузанов]

// Вот тут начинается полный говнокод.
// То, что написано снизу, равноценно следующему:
// var wrapper;
// wrapper.calls = [];
// Почему говнокод? Потому что во первых никто
// давно в 2020 году не пользуется var. А почему?
// А потому что эта переменная будет висеть на общее обозрение.
// Никогда не надо делать так, объявляйте нормально:
// const wrapper или let wrapper. Более того, не понятно,
// зачем здесь нужен именно wrapper.calls. Можно просто создать
// переменную const wrapper = [] и пушить в неё.

Не равноценно. В свойство calls функции wrapper добавлются аргументы каждый раз при вызове обертки. Вы предлагаете просто создать массив и потом вернуть его.

// Снова говнокод. По итогу теперь work = wrapper, у которого определен
// метод func как function func(a, b) { alert(a+b) }. work что объявлен в самом начале исчез.

По итогу это назывется декорирование. У work нет никакого метода func.
То что получилось у вас - нагромаждение одноразовых функций. В примере же создается обертка spy для сохраненя аргументов вызова функции. Т.е. const foo = spy(foo); где foo любая функция.

[Vladyslav Kliuiev]

Дмитрий Лузанов, суть как раз в том, что там не const work = spy(work), а конкретно work = spy(work). В первом случае, вы получите переменную work, внутри которой результат выполнения функции spy(work). А во втором, функция work переопределяется как spy(work). По поводу равноценности тупанул, признаю, была бессонная ночь)

[Vladyslav Kliuiev]

Дмитрий Беляев, если цель создать переиспользуемую функцию - возможно. Но, если рассматривать конкретно данную цель, то мне кажется такое себе. А по поводу полного говнокода - я в JS всего меньше года, но я читал очень много кода. Читал исходники на гитхабе, читал книги, читал курсы/гайды. И я ни разу не видел, чтобы функциям присваивали методы. То, что написано в исходном коде, просто максимально не читаемо, имена подобраны ужасно, и чтобы понять, что тут вообще происходит, приходится просить помощи на форуме. Если же так писать это нормально, и это просто я чего-то не понимаю - это печально.

[Swaer]

Vladyslav Kliuiev, ребята, это обычный пример, мне нужно было понять, что и как работает, понять правильно, а не самому как-то там догадаться и примерно думать, как оно работает, меня интересовали всего 3 строчки в коде и всё=)

[Vladyslav Kliuiev]

Swaer,

function work(a, b) {
  alert( a + b ); 
}
// Создается функция, которая принимает в себя другую функцию
function spy(func) {
    // Создается обёртка, которая принимает в себя переданные аргументы (a, b)
    function wrapper(...args) {
      // В метод calls функции wrapper, который массив, сохраняются переданные
      // аргументы wrapper.calls.push(args);
      // И здесь вызывается переданная функция, с переданными аргументами.
      // По поводу того, на что указывает this, есть простая памятка:
      // this вызывается на метод перед точкой.
      return func.apply(this, arguments);
    }
    // Сюда сохраняются агрументы
    wrapper.calls = [];
    // В итоге функция Spy возвращает функцию wrapper
    return wrapper;
 }
// Здесь функция work превращается в spy(work). Как мы помним, функция 
// spy возвращает функцию wrapper. То есть что происходит:
// вызывается функция spy(work), work передается внутрь wrapper. 
// work теперь wrapper, со всеми методами. Это можно проверить в браузере.
// Введите console.log(work) после этой строчки, и рассмотрите его поближе.
work = spy(work);

// Теперь смотря на эту функцию, смотрите на wrapper, ибо work = wrapper.
// Что происходит:
// в функцию wrapper передаются аргументы (1, 2), они сохраняются внутрь
// wrapper.calls, и вызывается изначальная функция work что выполняет сложение.
// Но мы помним что work = wrapper, так что теперь у work есть метод work.calls.
work(1, 2); // 3
work(4, 5); // 9

// Вот тут она и вызывается. Как видите, не wrapper.calls, a work.calls.
for (let args of work.calls) {
  alert( 'call:' + args.join() ); // "call:1,2", "call:4,5"
}

Если что-то ещё не совсем понятно, можете уточнить, постараюсь объяснить)

[Swaer]

Vladyslav Kliuiev, правильно ли я понял, work = spy(work); work, которая суммирует, стала на место func и spy при выполнение и присвоении в work запомнила контекст, при след вызовах work эта строка return func.apply(this, arguments); будет означать work.apply(work, arg)

[Vladyslav Kliuiev]

Swaer, да, ну по крайней мере я сам приблизительно так понял)