Понимание замыканий в JavaScript

Замыкания — это функции, которые имеют доступ к переменным из области видимости другой функции. Это часто достигается путем создания функции внутри функции.

function createComparisonFunction(propertyName) {         
 return function(object1, object2) {
  let value1 = object1[propertyName];
  let value2 = object2[propertyName];

  if (value1 < value2) {
   return -1;
  } else if (value1> value2) {
   return 1;
  } else {
   return 0;
  }
 };
}

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

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

По мере выполнения функции переменные ищутся в цепочке областей видимости для чтения и записи значений.

function compare(value1, value2) {
 if (value1 < value2) {
  return -1;
 } else if (value1> value2) {
  return 1;
 } else {
  return 0;
 }
}

let result = compare(5, 10);

Этот код определяет функцию compare(), которая вызывается в глобальном контексте выполнения. Когда функция compare() вызывается в первый раз, создается новый объект активации, содержащий аргументы, значение1 и значение2. Объект переменной глобального контекста выполнения является следующим в цепочке областей видимости контекста выполнения compare(), которая содержит this, result и compare.

Объект this

Использование объекта this внутри замыканий влечет за собой некоторые сложности в поведении. Если функция не определена с помощью синтаксиса стрелок, объект this привязывается во время выполнения в зависимости от контекста, в котором выполняется функция: при использовании внутри глобальных функций this равен window в нестрогом режиме и undefined в строгом режиме, тогда как this равен объекту при вызове в качестве метода объекта.

Анонимные функции не привязаны к объекту в этом контексте, поэтому объект this указывает на window, если не выполняется в строгом режиме. Однако из-за того, как написаны закрытия, этот факт не всегда очевиден.

window.identity = 'The Window';

let object = {
 identity: 'My Object',      
 getIdentityFunc() {
  return function() {
   return this.identity;
  };
 }
};

console.log(object.getIdentityFunc()()); // 'The Window'

Помните, что каждая функция автоматически получает две специальные переменные, как только функция вызывается: this и arguments. Внутренняя функция никогда не может получить доступ к этим переменным непосредственно из внешней функции. Можно предоставить закрывающей функции доступ к другому объекту this, сохранив его в другой переменной, к которой может обращаться закрывающая функция.

window.identity = 'The Window';

let object = {
 identity: 'My Object',      
 getIdentityFunc() {
  let that = this;
  return function() {
   return that.identity;
  };
 }
};

console.log(object.getIdentityFunc()()); // 'My Object'

Маловероятно, что вы намеренно будете использовать шаблоны во второй и третьей строках, но полезно знать, что значение this может меняться неожиданным образом при незначительном изменении синтаксиса.

[эта ссылка для получения дополнительной информации о замыканиях]https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures

поддержите меня для получения большего количества материалов