Эй, ребята!
Все еще скептически относитесь к замыканиям после большого количества чтения и просмотра руководств? Я тоже был там однажды. Поэтому я решил создать сценарий использования, который может объяснить закрытие на примере. По мере того, как вы будете следовать, вы поймете силу замыканий. Возможно, это не идеальный способ, но может стать идеальным началом, потому что мы все знаем, каким иногда может быть Javascript! Я бы сказал красиво + сложно. Но при лучшем понимании это может быть настоящая красота.
Прежде чем мы углубимся, если вы все еще не знакомы с замыканиями, вы можете проверить ссылку MDN ниже, которая даст вам общее представление о замыканиях:
Давайте поговорим о сценарии:
У вас есть аркадный магазин. Теперь есть дети, которые приходят играть, и вы ведете данные для каждого из них для распределения жетонов на основе их выигрышей и поражений и выпуска новых жетонов, когда это необходимо. Каждый ребенок впервые получает жетон со 100 баллами. За каждую игру, в которую они играют, они тратят 5 очков, за победу они получают 10 очков, а за проигрыш — 20 очков. Когда их очки опускаются ниже нуля, им нужно получить новый токен и так далее.
Теперь вам нужно знать количество баллов для любого ребенка в любое время
Теперь, как бы вы попытались решить это самым абсурдным способом или если вы не знаете о замыканиях и просто достаточно знаете о функциях, чтобы начать?
Вот один из способов без замыканий:
function win(a){
a += 10-5;
console.log(`current token of ${player}: ${a}`);
return a;
}
function loss(a){
a -= 20 - (-5);
console.log(`current token of ${player}: ${a}`);
return a;
}
let bob_token = 100; // new player
let jon_token = 100; // new player
bob_token = win(bob_token);
bob_token = loss(bob_token);
bob_token = loss(bob_token);
jon_token = loss(jon_token);
Не слишком потрепанный да! Ну, это может быть один из способов решить эту проблему. Это просто и легко понять. Теперь, как бы вы обойти и сделать это с помощью замыканий.
Способ закрытия:
const arcade = () => {
console.log("ARCADE RUNNIG ...");
let token = 100;
const current = () => {
return `current token: ${token}`;
}
return {
win: () => {
token += 10 - 5;
console.log("token left: ",token);
},
lose: () => {
token -= 20 - (-5);
console.log("token left: ",token);
},
show: () => {
return current();
}
}
};
const bob = arcade();
const jon = arcade();
bob.win();
bob.win();
bob.win();
console.log(bob.show());
jon.lose();
console.log(jon.show());
Запустите этот код в скрипте js, и вы поймете силу замыканий.
Нам просто нужно добавить больше игроков и назначить ему arcade(), и состояние его токена будет поддерживаться в любом месте кода.
Кроме того, токены для любых детей, играющих, являются частными и не могут быть доступны за пределами области действия функции. Так что если вы как владелец пожадничаете и хотите сделать жетоны детей равными нулю, то вы не сможете. Но то же самое не верно для предыдущего подхода. Это все открыто, и вы можете очень легко вмешаться в это.
Я не стал углубляться в код, потому что это всего лишь сценарий использования замыканий. Вы можете знать определения, в некоторой степени работающие, некоторые термины, такие как лексическое окружение, область действия и т. д., но вы просто не можете использовать это как-то хорошо. Ну, вы можете начать отсюда и подняться на ступеньку выше в React, где он широко используется.
Также были бы лучшие способы сделать это с замыканиями, и кажется, что current() — это просто бремя, но вы должны оптимизировать и упростить его.
Теперь вы можете добавить к этому дополнительные сценарии, например:
- показать, сколько токенов они выпускают до сих пор
- если 1 токен стоит 8 долларов, сколько денег они уже потратили?
- не позволяйте детям играть, если их токен ‹ = 0
Предложите свое мнение в поле для комментариев…
