Цель здесь состоит в том, чтобы создать функцию, с помощью которой мы можем ограничить выполнение любой функции только один раз, а при последующих вызовах возвращать результат первого вызова. У нас есть существующие реализации для этого в библиотеках и т. д., но очень легко создать собственную версию. (Кроме того, это очень распространенный вопрос на собеседовании, чтобы оценить ваши знания о замыканиях)

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

  • Базовое понимание замыканий
  • Понимание функций как первоклассных граждан в JS

Сценарий кода

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

function multiplyBy2(num){
 return num*2;
}
let onlyOnce = compositeFn(multiplyBy2);
console.log(onlyOnce(1)); // output 2
console.log(onlyOnce(2)); // output 2

Создание составной функции

Нам нужно убедиться, что функция, переданная в качестве параметра в componentFn(), должна выполняться в первый раз и возвращать результат первого раза при последующих вызовах. Для этого нам нужно ниже 2 вещи:

  • Сохраните состояние. (независимо от того, вызывается метод в первый раз или нет)
  • динамически возвращать результат переданной функции или вызывать функцию в зависимости от состояния.
function compositeFn(funcParam) {
 let returnedVal = null;
 return function(val) {
  if(!returnedVal) {
   returnedVal = funcParam(val);
  }
  return returnedVal;
 };
}

Поскольку мы создали замыкание, анонимная функция будет иметь доступ к returnVal. При выполнении функции, переданной в первый раз, returnVal будет нулевым, поэтому мы выполняем funcParam() и сохраняем результат. При последующих вызовах returnVal не будет пустым и мы можем напрямую вернуть результат

Обратите внимание, что мы могли бы также взять отдельное логическое значение, такое как isFirstTime, но получение этого состояния из returnVal помогает нам удалить эту дополнительную переменную.

Это все для этого поста. Вы также можете проверить пользовательскую реализацию bind() в посте ниже. Спасибо за чтение.



Полифилл для bind()
В этом посте мы узнаем, как создать собственную реализацию bind(). это помогает использовать эту функциональность в…just-another-developer.medium.com