Базовая руководство по закрытиям в JavaScript

Автор оригинала: FreeCodeCamp Community Member.

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

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

Обычно есть 2 вида объема:

Глобальный спектр
Местный спектр

В версии ES5 переменная внутри функции не видна снаружи. Но переменные внутри блока (такие условия, как если или во время) видны на улице тоже.

Из этого ES5 имеет функциональный объем. Там нет блока.

Давайте продолжим это в версии ES5:

var a = 10;
function app(){
   var b = 2;
   console.log(a); // 10
   console.log(b); // 2
}
console.log(b); //   ReferenceError: b is not defined
app();

Как мы уже знаем, А Глобальная переменная & B локальная переменная, которая является Конкретный к функции приложения.

Мы не можем получить значение локальной переменной из локальной массы.

Использование вложенной функции – функция внутри функции

var a = 10;
function app(){
     var b = 2;
     var d = 3;
  function add(){
     var c = a + b;
   }
 return add;
}
var x = app();
console.dir(x);

Здесь приложение является родительской функцией и нечетная функция – это детская функция.

А не использовать Console.log, Console.dir используется для консоли всех свойств указанного объекта JavaScript, который помогает разработчикам получить свойства этого объекта
Переменная X назначается функции приложения, и функция приложения возвращает функцию ADD. Поэтому мы могли видеть все свойства объекта функции ADD.

Если вы видите консоль в браузере, вы можете увидеть объект закрытия внутри массива SCOPES.

Со времени внутреннего Функция Добавить . Доступ к внешней функциональный переменные B & D Эти 2 переменные будут добавлены в объект закрытия для ссылки.

Давайте посмотрим на следующий пример для закрытия:

var a = 10;
var startFunc;
function app(){
      var b = 2;
   function add(){
      var c = a + b;
      console.log(c);
   }
   startFunc = add();
}
app(); // Invoke the app function
startFunc; 
// as the app function invoked above will assign the add function to startFunc & console the value of c

Глобальная функция, называемая StartFunc, назначается на функцию Add, которая является дочерней функцией родительской функции приложения.
Это возможно только после того, как функция приложения вызывается, в противном случае startfunc будет действовать как глобальная переменная без назначенного значения

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

Большинство из нас используют замыкание во время кодирования, но мы не понимаем, почему мы его используем. JavaScript не имеет модификаторов доступа, как Частная, общественная, защищена Как и другие объектно-ориентированные языки программирования. Таким образом, мы должны использовать функции для защиты пространства имен от внешнего использования кода в ES5.

Особенно в функциях, Немедленно вызываемая функция выражения (IIFE) это тот, который выполнен сразу после декларации. Вам не нужно вызывать функцию после объявленной функции.

IIFE позволяет написать Узор модуля (один из рисунков дизайна) в JavaScript.

Синтаксис определения iife:

(function(){
             //variables & scope that inside the function 
})();

Давайте пример:

var studnetEnrollment = (function () {
    //private variables which no one can change
    //except the function declared below.
     var count = 0;
     var prefix = "S";
    // returning a named function expression
     function innerFunc() {
         count = count + 1;
         return prefix + count;
     };
 return innerFunc;
})();
var x = studnetEnrollment(); // S1
console.log(x);
var y = studnetEnrollment(); // S2 
console.log(y);

Count & Prefix – это 2 частных переменных, которые никому не могут быть изменены и могут быть доступны только для внутренней функции (здесь ее Innerfunceunc). Этот доступ возможен только по функции, называемой закрытой.

В первый раз, когда вызывается функция студентов студентки, переменная подсчета внутри функции увеличивается 1 путем функции InnerFunc.
Во второй раз счет увеличивается предыдущее значение количества, которое составляет от 1 до 2
Это возможно по функции закрытия.

Заключение

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

Закрытия позволяют разработчикам написать чистый код, такой как языки OOP, которые не путают имен глобальных и локальных переменных в версии ES5.

Счастливое кодирование ……. !!!!!

Использование вложенной функции – функция внутри функции

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

Заключение

Читайте ещё по теме: