AI Интересная задача с собеседования

[AI]

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

Условие задачи


Создайте класс EventEmitter, который позволяет:

• 
  подписываться на события (on) с любым количеством функций на одно событие;
  
  
• 
  отписываться от конкретной функции (off), даже если функция анонимная;
  
  
• 
  вызывать все функции для события (emit) с передачей аргументов.
  

Код задачи:


class EventEmitter {
events = {};

on(name, fn) {
// здесь будет логика подписки
}

off(name, fn) {
// здесь будет логика отписки
}

emit(name, ...args) {
// здесь будет логика вызова всех функций события
}
}

const ee = new EventEmitter();

// Example of using:
ee.on("login", () => {
console.log("login 1");
});

ee.on("login", () => {
console.log("login 2");
});

ee.on("login", () => {
console.log("login 3");
});

ee.emit("login1");
ee.emit("login2");
ee.emit("dude", "Bob");
Мой вариант решения.


Начнём с функции on. Она должна давать возможность создавать подписку со специальным именем. Для начала (если его ещё нет) мы должны добавить поле с именем, которое получаем из аргумента name, и поместить туда массив функций.

on(name, fn) {
if (!this.events[name]) {
this.events[name] = [];
}

this.events[name].push(fn);
}

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

Так как функция — это объект (ссылочный тип), нам нужно хранить ссылку на каждую конкретную функцию. Решить это можно, если метод on будет возвращать функцию отписки:

on(name, fn) {
if (!this.events[name]) {
this.events[name] = [];
}

this.events[name].push(fn);

return () => {
this.off(name, fn);
};
}

Хорошо, но всё-таки можно улучшить. Мы должны учитывать, что:

1. 
   может быть несколько одинаковых функций для одного события;
   
   
2. 
   нам нужно уметь отписываться от конкретного экземпляра подписки.
   

С текущим решением может случиться следующее:

const emitter = new EventEmitter();

function handler() {
console.log("hi");
}

const off1 = emitter.on("event", handler);
const off2 = emitter.on("event", handler);

// вызов off2 снимет первую подписку, а не вторую

Чтобы это исправить — вместо хранения «чистых» функций будем хранить объекты с полем fn.

on(name, fn) {
if (!this.events[name]) {
this.events[name] = [];
}

const listener = { fn };
this.events[name].push(listener);

return () => {
this.off(name, listener);
};
}

Также, такой подход позволит в будущем легко расширять функциональность (например, добавить once, priority и т.д.).

Метод off


Для отписки нам нужно убрать элемент из массива. Так как теперь мы можем передать в off как функцию, так и объект listener, нужно учесть оба варианта:

off(name, listenerOrFn) {
if (!this.events[name]) return;

const predicate = (listener) =>
listener === listenerOrFn || listener.fn === listenerOrFn;

this.events[name] = this.events[name].filter((l) => !predicate(l));
}
Метод emit


Метод emit вызывает все подписчики события с переданными аргументами.

emit(name, ...args) {
if (!this.events[name]) return;

this.events[name].forEach((listener) => listener.fn(...args));
}

Но здесь есть подводный камень: если в процессе выполнения один из обработчиков удалит себя (off), мы изменим массив прямо во время обхода. Это может привести к ошибкам. Поэтому нужно обходить копию массива (например, через spread оператор, или, как мне больше нравится - с помощью метода массива slice()):

emit(name, ...args) {
const listeners = this.events[name];
if (!listeners) return;

listeners.slice().forEach((listener) => {
listener.fn(...args);
});
}
Финальное решение


class EventEmitter {
events = {};

// подписка на событие
on(name, fn) {
if (!this.events[name]) {
this.events[name] = [];
}

const listener = { fn };
this.events[name].push(listener);

// возвращаем функцию отписки
return () => {
this.off(name, listener);
};
}

// отписка от события
off(name, listenerOrFn) {
if (!this.events[name]) return;

const predicate = (listener) =>
listener === listenerOrFn || listener.fn === listenerOrFn;

this.events[name] = this.events[name].filter((l) => !predicate(l));
}

// вызов всех функций события
emit(name, ...args) {
const listeners = this.events[name];
if (!listeners) return;

listeners.slice().forEach((listener) => {
listener.fn(...args);
});
}
}

Спасибо что прочитали, буду рад комментариям и советам по возможному улучшению!