Javascript имеет одну полезную, но сложную спецификацию, которая называется «Замыкание».

Позвольте мне объяснить начальную часть того, что такое «закрытие», для новичков, которые изучают это.

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

Да, я знаю, что это значит…, давайте сначала посмотрим на приведенный ниже фрагмент.

const add2 = (x) {
 return x + 2;
};
add2(1); // return 3

Это простая функция, которая принимает один аргумент «x» и добавляет «2» к «x», а затем возвращает добавленное значение. Итак, возвращаемое значение add2(1) равно 3.

В этом примере я поставил «2» внутри функции add2, поэтому входное число всегда возвращает значение x плюс 2.

add2(1) возвращает 3

add2(10) возвращает 12

add2(10000) возвращает 10002 и т. д.

Вам может быть интересно, как эта функция связана с «Закрытием».

Что произойдет, если вы захотите изменить фиксированный номер 2 на другой номер?

addAnyNumber = (x) {
 return x + ?;
}
addAnyNumber(1) // return 1 + some number you decided

Мы можем сделать следующее:

let number = 3;
addAnyNumber = (x) {
 return x + number;
}
addAnyNumber(1) // return 4

В приведенном выше примере я объявил переменную «число» и присвоил ей значение 3. Затем я использовал переменную внутри функции «addAnyNumber», поэтому возвращаемое значение равно 4.

Однако в этом случае нам приходится возвращаться к переменной «число» и каждый раз вручную менять число. Это так раздражает, правда?

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

«Замыкание» позволяет нам это сделать.

Давайте посмотрим на пример ниже.

const addAnyNumber = (x) => {
 return function (y) => {
   return x + y;
  };
};
const add = addAnyNumber(3);
add(2) // return 5;

Ммм… это выглядит странно, потому что функция «addAnyNumber» возвращает «функцию».

Но в этом примере кажется, что «x» = 2, «y» = 3, а затем возвращает 5.

Позвольте мне объяснить часть процесса этой функции.

  1. функция «addAnyNumber» принимает аргумент 3 и присваивает значение переменной «add».
  2. Переменная add содержит возвращаемое значение addAnyNumber.

Знаете ли вы, какое значение возвращает addAnyNumber?

…Да, это «функция».

Итак, переменная add содержит приведенную ниже функцию.

//inside variable "add"
function(y) => {
  return x + y;
};

Подожди… что такое «х»?

Мы знаем, что «y» — это параметр, но откуда взялся «x»?

Пожалуйста, вернитесь к фрагменту функции «addAnyNumber» еще раз.

Переменная «добавить» содержит «функцию», которая является возвращаемым значением функции «addAnyNumber».

Вы помните, что такое аргумент «addAnyNumber»?

…Да, это 3.

Позвольте мне правильно изменить то, что находится внутри переменной «добавить».

//inside variable "add"(correct version)
function(y) => {
 return 3 + y;
};

Позвольте мне повторить процесс, описанный ранее для «addAnyNumber», и добавить еще одно предложение.

  1. функция «addAnyNumber» принимает аргумент 3 и присваивает переменной «add».
  2. Переменная «add» содержит возвращаемое значение «addAnyNumber», которое является «функцией», и переменная «x», которая содержит 3.

Такое поведение называется "Закрытие".

Позвольте мне повторить весь процесс «addAnyNumber» построчно.

const addAnyNumber = (x) => {
  //parameter "x" is a variable and contains 3 because I invoked addAnyNumber(3). 
  
  return function (y) => {
    // addAnyNumber returns a function which holds variable "x" that was assigned to 3.       
    return x + y;
      //"local anonymous function" returns value "x + y".
  }; //closing bracket for local anonymous function
}; //closing bracket for function "addAnyNumber
const add = addAnyNumber(3);
  //declare variable "add" and assign "addAnyNumber(3)" to the variable.
add(2);
//invoke variable "add" with argument 2, which returns 5 (3+2)

Другими словами, Closure содержит пакет «функции» и «локальной переменной». ( x = 3 в этом примере. Это называется «лексическое окружение»)

Это самое первое, что нужно понять о "завершении", и я надеюсь, что это поможет вам вкратце понять, что такое "закрытие".