diff --git a/.gitignore b/.gitignore index bb6fa4d..f15d1da 100644 --- a/.gitignore +++ b/.gitignore @@ -101,4 +101,6 @@ dist .dynamodb/ # TernJS port file -.tern-port \ No newline at end of file +.tern-port + +.idea \ No newline at end of file diff --git a/.idea/.gitignore b/.idea/.gitignore new file mode 100644 index 0000000..ab1f416 --- /dev/null +++ b/.idea/.gitignore @@ -0,0 +1,10 @@ +# Default ignored files +/shelf/ +/workspace.xml +# Ignored default folder with query files +/queries/ +# Datasource local storage ignored files +/dataSources/ +/dataSources.local.xml +# Editor-based HTTP Client requests +/httpRequests/ diff --git a/.idea/article-markup.iml b/.idea/article-markup.iml new file mode 100644 index 0000000..c956989 --- /dev/null +++ b/.idea/article-markup.iml @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/.idea/modules.xml b/.idea/modules.xml new file mode 100644 index 0000000..8563461 --- /dev/null +++ b/.idea/modules.xml @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/.idea/vcs.xml b/.idea/vcs.xml new file mode 100644 index 0000000..35eb1dd --- /dev/null +++ b/.idea/vcs.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/index.html b/index.html index 5e60e40..815d923 100644 --- a/index.html +++ b/index.html @@ -6,6 +6,33 @@ - +

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

+

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

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

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

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

+
+ +

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

+
+

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

+
+ + code img + +

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

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

+ + code img + +

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

\ No newline at end of file diff --git a/styles.css b/styles.css index 1cbd2e0..db3c5d1 100644 --- a/styles.css +++ b/styles.css @@ -1,8 +1,249 @@ /* Тут пиши основные стили */ +body { + position: relative; + margin: 0; + padding: 40px 20px; + min-height: 100vh; +} +.title-1 { + width: 700px; + height: 88px; + font-size: 42px; + color:rgba(0,0,0,0.84); + text-align: left; + line-height: 44px; + margin-right: 362px; + margin-left: 362px; + margin-top: 55px; + font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif +} + +h1.title-1{ + margin-block-start: 0px; +} + +.paragraf-1 { + width: 700px; + margin-right: 362px; + margin-left: 362px; + margin-top: 10px; + 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-block-end: 0px; +} + +.par2{ + 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; + width:700px; + margin-right: 362px; + margin-left: 362px; + margin-top: 55px; +} + +.par2 p{ + 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; + width:700px; + margin-bottom: 56px; + margin-top: 10px; +} + +.text-block-3 { + + width: 700px; + height: 132px; + + font-family: Georgia, Cambria, "Times New Roman", Times, serif; + font-size: 21px; + line-height: 33px; + + + color: rgba(0, 0, 0, 0.84); + + text-align: left; + + + margin-left: 362px; + margin-right: 362px; +} + + +.p-title-3 { + width: 700px; + height: 39px; + + margin-top: 10px; + margin-left: 364px; + margin-right: 364px; + + font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif; + font-size: 34px; + font-weight: bold; + line-height: 39px; + color: rgba(0, 0, 0, 0.84); + text-align: left; +} + +#pic-1 { + width: 700px; + height: 727px; + + margin-left: 362px; + margin-right: 362px; +} + + +.text-block-4 { + 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; + + width: 700px; + height: 267px; + + margin-left: 362px; + margin-right: 362px; +} + +#pic-2 { + width: 700px; + height: 923px; + + margin-left: 362px; + margin-right: 362px; + margin-top: 41px; +} + +.text-block-5 { + font-family:Georgia; + font-size:21px; + color:rgba(0,0,0,0.84); + text-align:left; + line-height:33px; + width: 700px; + height: 165px; + + margin-left: 362px; + margin-right: 362px; + margin-bottom: 92px; + +} + +code { + background-color: lightgray; + border-radius: 20%; +} @media (max-width: 800px) { -/* Тут пиши стили для мобилки. - Стили применятся только когда страничка будет ≤800px шириной - */ + body { + padding: 20px 15px; + } + + .title-1 { + width: 100%; + height: auto; + font-size: 28px; + line-height: 36px; + margin: 20px 0 0 0; + padding: 0; + text-align: left; + } + + .paragraf-1 { + width: 100%; + height: auto; + font-size: 16px; + line-height: 26px; + margin: 15px 0 0 0; + padding: 0; + } + + .par2 { + width: 100%; + font-size: 24px; + line-height: 32px; + margin: 20px 0 0 0; + padding: 0; + } + + .par2 p { + width: 100%; + height: auto; + font-size: 16px; + line-height: 26px; + margin: 10px 0 0 0; + padding: 0; + } + + .text-block-3 { + width: 100%; + height: auto; + font-size: 16px; + line-height: 26px; + margin: 15px 0 0 0; + padding: 0; + } + + .p-title-3 { + width: 100%; + height: auto; + font-size: 24px; + line-height: 32px; + margin: 20px 0 0 0; + padding: 0; + text-align: left; + } + + #pic-1 { + width: 100%; + height: auto; + margin: 15px 0 0 0; + padding: 0; + } + + .text-block-4 { + width: 100%; + height: auto; + font-size: 16px; + line-height: 26px; + margin: 15px 0 0 0; + padding: 0; + } + + #pic-2 { + width: 100%; + height: auto; + margin: 15px 0 0 0; + padding: 0; + } + + .text-block-5 { + width: 100%; + height: auto; + font-size: 16px; + line-height: 26px; + margin: 15px 0 0 0; + padding: 0; + } + + code { + display: inline-block; + max-width: 100%; + overflow-x: auto; + white-space: pre-wrap; + word-wrap: break-word; + } } \ No newline at end of file