Закрытия являются общеизвестно трудными для понимания. Но они жизненно важны для продвижения в качестве разработчика JavaScript.
Понимание закрытия может привести к более элегантному коду и лучшим возможностям трудоустройства.
Я надеюсь, что этот пост помогает концепции придерживаться как можно быстрее.
Бонус : Закрытия не специфичны JS! Они концепция компьютерной науки, что – как только вы узнаете их – вы начнете распознавать повсюду в разработке программного обеспечения.
Функции тоже ценности
Во-первых, поймите, что JavaScript поддерживает Первоклассные функции Отказ
Необычное имя, но это просто означает функции обрабатываются как любое другое значение Отказ Значения, такие как строки, цифры и объекты.
Что вы можете сделать со значениями?
Значения могут быть переменными
const name = 'Yazeed';
const age = 25;
const fullPerson = {
name: name,
age: age
};
Значения могут быть в массивах
const items = [
'Yazeed',
25,
{ name: 'Yazeed', age: 25 }
]
Значения могут быть возвращены из функций
function getPerson() {
return [
'Yazeed',
25,
{ name: 'Yazeed', age: 25 }
];
}
Угадай, что? Функции могут быть все такими тоже.
Функции могут быть переменными
const sayHi = function(name) {
return `Hi, ${name}!`;
}
Функции могут быть в массивах
const myFunctions = [
function sayHi(name) {
return `Hi, ${name}!`;
},
function add(x, y) {
return x + y;
}
];
И вот большой …
Функции могут вернуть другие функции
Функция, которая возвращает другую функцию, имеет специальное имя. Это называется более высокий порядок функция.
Это фундамент, на котором стенд закрытия. Вот наш первый пример более высокий порядок функция.
function getGreeter() {
return function() {
return 'Hi, Jerome!';
};
}
GetGreater Возвращает функцию. Чтобы встретить, назовите это дважды.
getGreeter(); // Returns function getGreeter()(); // Hi, Jerome!
Один звонок для возвращенной функции и еще один для приветствия.
Вы можете хранить его в переменной для более простого повторного использования.
const greetJerome = getGreeter(); greetJerome(); // Hi, Jerome! greetJerome(); // Hi, Jerome! greetJerome(); // Hi, Jerome!
Получить замыкание
Теперь для великого раскрытия.
Вместо того, чтобы жесткодировать Джером, мы сделаем GetGreater Динамический, принимая один параметр под названием Имя Отказ
// We can greet anyone now!
function getGreeter(name) {
return function() {
return `Hi, ${name}!`;
};
}
И использовать это так …
const greetJerome = getGreeter('Jerome');
const greetYazeed = getGreeter('Yazeed');
greetJerome(); // Hi, Jerome!
greetYazeed(); // Hi, Yazeed!
Посмотрите на этот код снова.
function getGreeter(name) {
return function() {
return `Hi, ${name}!`;
};
}
Мы использовали закрытие
внешний Функция берет Имя , но Внутренний Функция использует ее позже. Это сила закрытия.
Когда функция возвращается, его жизненный цикл завершен. Он больше не может выполнять какую-либо работу, и ее локальные переменные очищены.
Разве Это возвращает другую функцию. Если это произойдет, то возвращенная функция все еще имеет доступ к этим внешним переменным, даже после того, как родитель проходит.
Преимущества закрытия
Как я уже сказал, закрытие может повысить игру разработчика. Вот несколько практических применений.
1. Конфиденциальность данных
Конфиденциальность данных важно для безопасного совместного использования кода.
Без этого любой, кто использует вашу функцию/библиотеку/рамки, может злонамеренно манипулировать своими внутренними переменными.
Банк без конфиденциальности
Рассмотрим этот код, который управляет банковским счетом. AccountBalance выставлен на всемирно!
let accountBalance = 0;
const manageBankAccount = function() {
return {
deposit: function(amount) {
accountBalance += amount;
},
withdraw: function(amount) {
// ... safety logic
accountBalance -= amount;
}
};
}
Что останавливает меня от надувания моего равновесия или разрушать чужого?
// later in the script... accountBalance = 'Whatever I want, muhahaha >:)';
Языки, такие как Java и C ++, позволяют классу иметь частные поля. Эти поля не могут быть доступны вне класса, что обеспечивает идеальную конфиденциальность.
JavaScript не поддерживает частные переменные (… еще ), но мы можем использовать закрытие!
Банк с надлежащей конфиденциальностью
Этот раз AccountBalance сидит внутри Наш менеджер.
const manageBankAccount = function(initialBalance) {
let accountBalance = initialBalance;
return {
getBalance: function() { return accountBalance; },
deposit: function(amount) { accountBalance += amount; },
withdraw: function(amount) {
if (amount > accountBalance) {
return 'You cannot draw that much!';
}
accountBalance -= amount;
}
};
}
И, возможно, использовать это так …
const accountManager = manageBankAccount(0); accountManager.deposit(1000); accountManager.withdraw(500); accountManager.getBalance(); // 500
Обратите внимание, что я не могу напрямую получить доступ AccountBalance больше. Я могу только просматривать это через GetBalance и измените это через депозит и вывести Отказ
Как это возможно? Закрытие!
Хотя …| ManageBankaccount создал AccountBalance Переменная, три функции возвращаются, все имеют доступ к AccountBalance через закрытие.
2. Carrying.
Я написал на карри до Отказ Это когда функция принимает свои аргументы по одному за раз.
Так вместо этого …
const add = function(x, y) {
return x + y;
}
add(2, 4); // 6
Вы можете Карри Добавить Используя замыкание …
const add = function(x) {
return function(y) {
return x + y;
}
}
И вы знаете, что возвращенная функция имеет доступ к х и у , чтобы вы могли сделать что-то вроде этого …
const add10 = add(10); add10(10); // 20 add10(20); // 30 add10(30); // 40
Carrying отлично, если вы хотите «предварительно загрузить» аргументы функции для более легкого повторного использования. Опять же, возможно только через закрытие JavaScript!
3. Разработчики реагирования используют закрытие
Если вы сохранили React News, вы слышали, что они выпустили Крючки в прошлом году. Самый запутанный крючок, Useffect , полагается на закрытие.
Эта статья не будет иметь полное учебное пособие на реагирование, поэтому я надеюсь, что пример простого для всех.
Вот важная часть …
function App() {
const username = 'yazeedb';
React.useEffect(function() {
fetch(`https://api.github.com/users/${username}`)
.then(res => res.json())
.then(user => console.log(user));
});
// blah blah blah
}
Изменить Имя пользователя В коде обратите внимание, что он будет получать это имя пользователя и журнал вывода на консоль.
Это замыкание еще раз. Имя пользователя определяется внутри внешний Функция, но Useffect ‘s Внутренний Функция на самом деле использует это.
Резюме
- Функции тоже ценности.
- Функции могут вернуть другие функции.
- Переменные внешней функции все еще доступны для его внутренней функции, Даже после того, как внешнее прошло на Отказ
- Эти переменные также известны как Государство Отказ
- Поэтому замыкание также можно назвать Утверждение Функции.
Хотите бесплатную коучинг?
Если вы хотите запланировать Бесплатно 15-30 минутный призыв Чтобы обсудить вопросы в интерфейсе в отношении кода, интервью, карьеры или чего-либо еще Следуй за мной в Twitter и DM мне Отказ
После этого, если вам наслаждаться нашей первой встречей, мы можем обсудить текущие тренерские отношения, которые помогут вам добраться до ваших целей в области развития в розни!
Спасибо за прочтение
Для большего количества контента посмотрите https://yazeedb.com!
До скорого!
Оригинал: “https://www.freecodecamp.org/news/learn-javascript-closures-in-n-minutes/”