Не путайте с затенением в JavaScript. Чтобы понять затенение, сначала давайте разберемся, что такое Scope в Javascript. Scope — это определенная область или граница кода. В JavaScript Блок представляет собой группу с фигурными скобками {}
{ var a = 20; let b = 30; const c = 40; }
Да, это блок, но зачем мне его использовать? Подождите, посмотрите, в приведенном выше примере объявлено три типа переменных: var, let и const.
когда вы создаете переменную с ключевым словом var, вы фактически создаете ее в Global Scope или в Window Object JavaScript.
console.log(window.a) // 20
Но когда вы создаете переменную с помощью let и const, вы фактически создаете их в области видимости или в отдельной памяти.
Теперь, что если у нас есть такая же переменная за пределами этой области,
var a = 50; { var a = 20; let b = 30; const c = 40; } console.log(a); console.log(b); console.log(c);
каков будет вывод приведенного выше примера? Ответ: 20, странно….😆
Что здесь произошло, на самом деле, когда вы объявили переменную с ключевым словом var и внутри блока вы фактически обновляете переменную a той же ссылки на переменную, но переменные b и c находятся за пределами этой заблокированной области, поэтому она будет генерировать a Ошибка ссылки: b не определен
Теперь давайте возьмем другой пример:
var a = 50; let b = 100; const c = 150; { var a = 20; let b = 30; const c = 40; console.log(a); // 20 console.log(b); // 30 console.log(c); // 40 } console.log(a); // 20 console.log(b); // 100 console.log(c); // 150
В это время вы увидите 20 для a, 100 для b и 150 для c, правильно. но почему он не обновился с b = 30 и c = 40? Ответ: пусть, а константные переменные заблокированы, и они создают отдельную память для каждой переменной,
Незаконная слежка
Что произойдет, если вы попытаетесь скрыть переменную let с помощью переменной var, посмотрим.
var a = 50; let b = 100; const c = 150; { var a = 20; var b = 30; const c = 40; console.log(a); // 20 console.log(b); // 30 console.log(c); // 40 } console.log(a); // 20 console.log(b); // 100 console.log(c); // 150
Это вызовет Uncaught SyntaxError:Идентификатор "b" уже объявленно почему? Из-за области действия переменной var.😊😊
В приведенном выше примере мы создаем нелегальное затенение.
Переменная var доступна за пределами этой области, и это то же самое, что и без области, таким образом, вы фактически создаете две переменные, первая — let, а вторая — с var ✔✔ и вы получаете синтаксическую ошибку 🎃🎃🎃
Заключение
В итоге затенение JavaScript позволяет нам создавать программы с собственной областью действия. Введение let и const в ECMAScript 6 вместе с областью действия блока позволяет затенение переменных.
Если вам понравился этот пост, не забудьте поставить мне👏ниже⏬️ .Это, несомненно, сильно меня мотивирует 😊. Спасибо