Что такое закрытие и где мы можем подать заявку?

На игровой площадке front-end-dev полезно знать основные концепции. Замыкания - одно из них. Если вы зададите этот вопрос в интервью, я почти уверен, что вы сможете отфильтровать настоящего разработчика javascript от человека, который писал код только годами, не зная основных концепций.

Начнем с большого вопроса:

Что такое закрытие?

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

Ниже приведен пример закрытия,

function displayMyName() {
    var name = "Rajitha Abeyrathna";
    function display() {
        alert (name);
    }
    display();
}
displayMyName();

вывод:

наша внешняя функция (displayMyName) выполняет следующие действия,

  • Определите локальную переменную name
  • определить внутреннюю функцию display
  • вызов этой внутренней функции display

наша внутренняя функция (display) выполняет следующие действия,

  • предупредить имя.

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

Не только замыкания могут считывать внешние переменные функции, но также замыкания используются для перезаписи внешних переменных. см. пример ниже:

function displayMyName() {
    var name = "Rajitha Abeyrathna";
    function display() {
        alert (name);
    }
    function setName(newName) {
        name = newName;
    }
    display();
    setName("Prabath Abeyrathna");
    display();
}
displayMyName();

Вывод:

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

Хорошо, теперь у нас есть представление о замыканиях, но где мы можем применить эту концепцию?

Практическое использование:

1. частные функции

В языках ООП, таких как java, мы видели, что можем использовать модификаторы доступа, такие как private, public. Но в JavaScript нет этой встроенной функции. Но мы можем реализовать эту функциональность с помощью замыканий. Это также известно как шаблон модуля в мире js.

var calculateIncomeTax= (function() {
    var salary = 85000;
 var taxAmount = 0;
    function calculateTax(percentage) {
        taxAmount = (salary*percentage)/100;
    }
    return {
        high: function() {
            calculateTax(7);
        },
        low: function() {
            calculateTax(0.1);
        },
        salaryAfterTax: function() {
            return salary-taxAmount;
        }
    }; 
})();
console.log(calculateIncomeTax.salaryAfterTax());
calculateIncomeTax.high();
console.log(calculateIncomeTax.salaryAfterTax());
calculateIncomeTax.lower();
console.log(calculateIncomeTax.salaryAfterTax());

calculateIncomeTax.calculateTax(8);

Вывод:

Как видите, мы не можем получить доступ к методу calculateTax извне, потому что этот метод стал закрытым.

2. фабрики функций

Еще одно применение замыканий - использование внешней функции как фабрики для создания функций, которые так или иначе связаны. Использование замыканий в качестве фабрик функций подразумевает принципы DRY (не повторяйся), что означает, что замыкания как функциональные фабрики сокращают количество повторов. Фабрика функций позволяет нам написать несколько строк кода для создания любого количества функций с похожими, но уникальными целями. См. пример ниже

function worker(title){
 return function(prefix){
 return prefix+ ‘ ‘+ title
 }
}
var developer = worker(‘developer’);
console.log(developer(‘React’));
console.log(developer(‘Angular’));

Помимо этих основных применений, существует множество применений закрытий javascript. Вот хорошее прочтение о закрытии от Эрика Эллиотта. Надеюсь, вы получили некоторое представление о закрытии js. Спасибо, что прочитали, и еще увидимся с чем-то хорошим !!!