diff --git a/index.html b/index.html index 5e60e40..164278c 100644 --- a/index.html +++ b/index.html @@ -3,9 +3,85 @@ Практика верстки + + - +
+

+ + Замыкания в JavaScript для начинающих + +

+ +

+ Замыкания — это одна из фундаментальных концепций JavaScript, вызывающая сложности у многих новичков, + знать и понимать которую должен каждый JS-программист. Хорошо разобравшись с замыканиями, вы сможете + писать более качественный, эффективный и чистый код. А это, в свою очередь, будет способствовать + вашему профессиональному росту. +

+ +

+ Материал, перевод которого мы публикуем сегодня, посвящён рассказу о внутренних механизмах замыканий + и о том, как они работают в JavaScript-программах. +

+ +

+ + Что такое замыкание? + +

+ +

+ Замыкание — это функция, у которой есть доступ к области видимости, сформированной внешней по отношению + к ней функции даже после того, как эта внешняя функция завершила работу. Это значит, что в замыкании могут + храниться переменные, объявленные во внешней функции и переданные ей аргументы. Прежде чем мы перейдём, + собственно, к замыканиям, разберёмся с понятием «лексическое окружение». +

+ +

+ + Что такое лексическое окружение? + +

+ +

+ Понятие «лексическое окружение» или «статическое окружение» в JavaScript относится к возможности доступа + к переменным, функциям и объектам на основе их физического расположения в исходном коде. Рассмотрим пример: +

+ + + +

+ Здесь у функции inner() есть доступ к переменным, объявленным в её собственной области + видимости, в области видимости функции outer() и в глобальной области видимости. + Функция outer() имеет доступ к переменным, объявленным в её собственной области + видимости и в глобальной области видимости. +

+ +

+ Цепочка областей видимости вышеприведённого кода будет выглядеть так: +

+ + + +

+ Обратите внимание на то, что функция inner() окружена лексическим окружением функции + outer(), которая, в свою очередь, окружена глобальной областью видимости. + Именно поэтому функция inner() может получить доступ к переменным, объявленным + в функции outer() и в глобальной области видимости. +

+
+ \ No newline at end of file diff --git a/styles.css b/styles.css index 1cbd2e0..53ba30a 100644 --- a/styles.css +++ b/styles.css @@ -1,8 +1,163 @@ -/* Тут пиши основные стили */ +.articleTitle { + font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif; + font-size: 42px; + color: rgba(0,0,0,0.84); + text-align: left; + line-height: 44px; + margin-bottom: 10px; +} +.title { + font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif; + font-size: 34px; + color: rgba(0,0,0,0.84); + text-align: left; + line-height: 39px; + margin-bottom: 10px; +} + +.content { + font-family: Georgia, Cambria, "Times New Roman", Times, serif; + font-size: 21px; + color: rgba(0,0,0,0.84); + text-align: left; + line-height: 33px; + margin-bottom: 10px; + margin-left: 2px; +} + +.feed { + width: 700px; + margin: 0 auto; +} + +.code { + font-family: "Courier New", monospace; + background-color: #f2f2f2; + padding: 1px; +} + +nav { + background-color: #faf9f8; + border-style: solid; + border-color: black; + border-left: 1px; + border-right: 1px; +} + +ul { + list-style: none; + margin: 0; + padding: 4px; +} + +ul li { + font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif; + display: inline; + margin-right: 5px; + padding: 3px; + font-size: 21px; + color: rgba(0,0,0,0.84); +} + +a { + text-decoration: none; + color: black; +} + +a:hover { + text-decoration: underline; +} + +ul li .current { + color: #d0021b; +} + +footer { + height: 95px; +} @media (max-width: 800px) { -/* Тут пиши стили для мобилки. - Стили применятся только когда страничка будет ≤800px шириной - */ -} \ No newline at end of file + .articleTitle { + font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif; + font-size:26px; + color:rgba(0,0,0,0.84); + text-align:left; + line-height:28px; + } + + .title { + font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif; + font-size:22px; + color:rgba(0,0,0,0.84); + text-align:left; + line-height:39px; + } + + .content { + font-family: Georgia, Cambria, "Times New Roman", Times, serif; + font-size:18px; + color:rgba(0,0,0,0.84); + text-align:left; + line-height:22px; + } + + .feed { + width: 520px; + margin: 0 auto; + } + + .code { + font-family: "Courier New", monospace; + background-color: #f2f2f2; + padding: 1px; + } + + nav { + background-color: #faf9f8; + border-style: solid; + border-color: #e7e7e7; + border-width: 0; + border-top-width: 1px; + border-bottom-width: 1px; + + } + + ul { + list-style: none; + padding: 0; + margin: 0; + } + + ul li { + font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif; + font-size: 21px; + color: rgba(0,0,0,0.84); + border-bottom: 1px dashed #e7e7e7; + display: block; + border: none; + } + + ul li:last-child { + border-bottom: none; + } + + a { + text-decoration: none; + color: black; + display: block; + } + + a:hover { + text-decoration: underline; + background-color: #f2f2f2; + } + + ul li .current { + color: #d0021b; + font-weight: bold; + pointer-events: none; + } + +} +