Никто не говорил мне, что Scope и Scope Chain в JavaScript так легко понять | Дивьоджйоти Гош | ноябрь 2022 г.
Изображение выше создано Divyojyoti Ghosh(me) на сайте www.canva.com с использованием различных элементов, доступных для создания дизайнов.В области компьютерного программирования область видимости имеет дело с организацией переменных (где находится переменная?) и их присоединением (откуда можно получить доступ к переменной? ).
JavaScript имеет лексических области видимости , что означает, что размещение блоков и функций в коде определяет область видимости.
Прежде чем начать с области действия и цепочки областей действия, нам нужно понять, что область действия и область действия переменной — это разные вещи в JavaScript. Итак, в чем именно разница? Область — это пространство или среда в коде, где была объявлена конкретная переменная. Напротив, область действия переменной — это область в коде, где можно получить доступ к конкретной переменной.
Знание различных прицелов поможет нам лучше понять сам прицел. Существует три типа областей действия —
- Глобальная область действия
- Область действия функции
- Область действия блока
Глобальная область действия
Область действия переменных, объявленных вне какой-либо функции или блока, является глобальной, т. е. к ним можно получить доступ в любом месте кода.
Все три переменные student_name , age и Minimum_marks имеют глобальную область действия и могут быть доступны в любом месте кода, поскольку все они объявлены вне какой-либо функции или блока.
Область действия функции
Все переменные, объявленные в функции, имеют область действия функции, т. е. к ним нельзя получить доступ где-либо за пределами функции. Все переменные, определенные в функции, объявлены ли они с помощью var , const или let , имеют область действия.
В приведенном выше фрагменте кода переменные minimum_marks , min_age_of_senior и max_marks имеют область действия функции, т. е. к ним можно получить доступ только внутри функции.
Область действия блока
Переменные, объявленные с помощью let или const в фигурных скобках { } (кроме функции), имеют область действия блока, т. е. доступ к этим переменным вне блока невозможен. Переменные, объявленные с помощью var в фигурных скобках, не могут быть блочными, т. е. к ним можно получить доступ и за пределами блока.
В приведенном выше фрагменте кода minimum_marks , определенные с помощью var в блоке if, доступны из любого места в коде, кроме max_marks , который определен с помощью let, заблокирован, поэтому он выдает ReferenceError, когда он вызывается вне блока.
В строгом режиме функции, объявленные с помощью let или const внутри блока, также являются заблокированными, даже именованные функции (не объявленные с использованием var, let или const) также являются заблокированными в строгом режиме.
В Javascript каждая область имеет доступ к переменным и функциям всех предков/родительских областей. Во время выполнения, если JS-движок сталкивается с переменной, для доступа к переменной и ее значению он сначала ищет в локальной области видимости, если он не находит переменную в локальной области видимости, он ищет переменную в области своего родителя.
Поиск продолжается от одной области до ее родительской области до родительской области своего родителя, пока не будет найдена переменная. Вся эта концепция поиска переменной из внутренней области во внешнюю область известна как цепочка областей видимости. Последняя и самая внешняя область — это глобальная область, которая является конечной родительской областью.
Если переменная не найдена во всей этой цепочке областей видимости, механизм JS выдает ошибку ссылки и объявляет переменную не определенной.
В приведенном выше фрагменте кода последняя строка из Функция getGradYear()
выдает ошибку ссылки, так как у функции нет доступа к переменной totalFees
. Переменная totalfees
отсутствует в локальной области действия функции или в какой-либо родительской функции функции getGradYear()
, переменная определяется с помощью let в блоке if и, следовательно, ее область действия заблокирована.
Область блока if
и область действия функции getGradYear
являются дочерними элементами getDetailsOfStudent()
область действия функции. Блок if
и функция getGradYear
имеют доступ к переменным своих родительских областей, т. е. области действия getDetailsOfStudent()
и глобальной области.
https://www.udemy.com/course/the-complete-javascript-course
Узнайте суть
Курс «Тестирование на проникновение с помощью Kali Linux (PWK)» и «Шпаргалка сертифицированного специалиста по наступательной безопасности» (OSCP) …
gist.github.com
Больше контента на PlainEnglish. io . Подпишитесь на нашу бесплатную еженедельную рассылку . Следуйте за нами по телефону Twitter , LinkedIn , YouTube , и и 1119 9 и 1119 и 9 . Заинтересованы в хакинге роста? Выезд Цепь .
ИСПЫТАТЕЛЬНАЯ ИСКУССТВА, ЛЕКСИЧЕСКАЯ ИСПОЛЬЗОВАНИЯ И КОДА БЛОКИ В JAVASCRPT
СОДЕРЖАНИЕ
- ИСПЫТАТЕЛЬНАЯ ИСКУССТВА
- . блочная область
- Некоторые преимущества использования глобальной области
- Некоторые недостатки использования глобальной области
- Некоторые преимущества использования локальной и блочной области
- Некоторые недостатки использования локальной и блочной области видимости
- Вывод: область видимости переменных, лексическая область видимости и блоки кода в JavaScript
Область видимости переменных, лексическая область видимости и блоки кода — это то, с чем каждый разработчик JavaScript работает каждый день. В этом уроке вы узнаете о них всех. Вы узнаете об области видимости переменных и о том, как она работает с различными типами переменных. После этого вы узнаете о лексической области видимости и блоках кода.
Переменный объем
Каждый раз, когда вы объявляете переменную или функцию, ее видимость и доступность ограничиваются. Есть одна вещь, которая определяет это. Это называется областью действия или «переменной областью действия». Эта область указывает, где вы можете получить доступ к определенной переменной и функции, а где нет. В JavaScript существует два типа области видимости: глобальная и локальная.
Глобальная область
Когда вы объявляете переменную вне любой функции или блока кода ( { ... }
), она автоматически попадает в глобальную область. Для каждого документа JavaScript существует только одна глобальная область видимости. Если вы объявите несколько переменных или функций в глобальной области видимости, все они окажутся в одном месте.
Переменные и функции, объявленные в глобальной области видимости, обычно называются «глобальными переменными» и «глобальными функциями». Когда переменная или функция являются глобальными, они автоматически становятся видимыми и доступными из любого места. Вы можете получить к нему доступ, ссылаться на него и изменять.
// Глобальная переменная: имя переменной = 'Джек' пусть возраст = 37 константные виды = 'человек' // Глобальная функция: функция readName() { вернуть имя; } // Вызываем функцию readName(): прочитатьИмя() // Вывод: // 'Разъем' // Глобальная стрелочная функция: const readAge = () =>возраст // Вызываем функцию readName(): readAge() // Вывод: // 37
Локальная область и область действия функции
Каждая функция, которую вы объявляете, создает свою собственную локальную область, называемую областью действия. Переменные, которые вы объявляете здесь, являются локальными переменными. Эти переменные видны и доступны только внутри области видимости, функции, в которой вы их объявили. Попытка получить к ним доступ извне функции, локальной области видимости, вернет ошибку.
Локальные переменные существуют только в своих локальных областях. Они не существуют вне его. По этой причине вы не можете получить доступ, ссылаться или изменять любую локальную переменную из глобальной области видимости. Вы можете сделать это только внутри области, в которой вы их объявили.
// Объявить функцию для создания локальной области видимости: функция сказатьИмя () { // Локальная область действия этой функции. // Создаем локальную переменную: константное имя = 'Дори' возвращаемое имя } // Вызов функции sayName(): сказатьИмя() // Вывод: // 'Дори' // Пытаемся получить доступ к локальной переменной "name" // из глобальной области видимости. console.log(имя) // Вывод: // неопределенный
Это также означает, что вы можете определить несколько переменных с одним и тем же именем. Эти переменные не будут перезаписывать друг друга, если каждая из них определена в другой локальной области видимости. Или, если один объявлен в глобальной области, а другой в локальной области.
// Создать глобальную переменную: пусть машина = 'Tesla' функция создания автомобиля () { // Создаем локальную переменную с таким же именем: пусть машина = 'BMW' // Логируем значение переменной "car": console.log(машина) } // Вызываем функцию createCar(): // Это прочитает переменную "car" // определено в локальной области видимости (внутри функции). создатьавтомобиль() // Вывод: // 'BMW' // Логируем значение переменной "car": // Это прочитает переменную "car" // определено в глобальной области видимости (вне функции). console.log(машина) // Вывод: // 'Тесла'
Вложенные локальные области
Вы также можете создавать вложенные локальные области, локальную область внутри другой локальной области. Вы можете сделать это, объявив функцию внутри другой функции. Каждая из этих вложенных функций создаст свою собственную локальную область. В этом случае помните, что переменные, объявленные во внешней области видимости, будут видны во внутренней области видимости, а не наоборот.
Это то же самое, что и глобальные переменные, видимые в локальных областях, но локальные переменные не видны в глобальной области. Если вы попытаетесь получить доступ к внутренней локальной переменной из внешней локальной области, вы получите не определено
.
// Создаем функцию: функция myFuncOne () { // Новая локальная область. пусть автор = 'Терри Пратчетт' // Создаем локальную функцию: функция myFuncTwo() { // Новая локальная область. let book = 'Гвардия! Охранники! } }
Лексическая область видимости
Ранее вы узнали, что с помощью функций можно создавать «вложенные» локальные области видимости. Вы также узнали, что эти внутренние функции имеют доступ к переменным, которые вы объявили вне их, во внешних областях видимости. Этот тип области, возможность доступа к внешним ресурсам, называется «лексической» областью или «статической» областью.
О лексической области видимости следует помнить одну вещь, которую мы уже обсуждали. Работает только в направлении сверху вниз. Это не работает наоборот.
// Объявить глобальную переменную: let bookSeries = 'Плоский мир' // "автор", "книга" и "персонаж" здесь не видны. функция myFuncOne () { // Новая локальная область. // здесь виден "bookSeries" // потому что он находится во внешней области видимости. // "книга" и "персонаж" здесь не видны. пусть автор = 'Терри Пратчетт' функция myFuncTwo() { // Новая локальная область. // здесь видны "bookSeries" и "автор" // потому что они находятся во внешней области видимости. // "персонаж" здесь не виден. let book = 'Гвардия! Охранники! функция myFuncThree() { // Новая локальная область. // здесь видны "bookSeries", "автор" и "книга" // потому что они находятся во внешней области видимости. let character = 'Капитан Сэм Ваймс' } } }
Кодовый блок и область действия блока
Помимо глобальной и локальной области действия существует еще нечто, что можно было бы назвать областью действия «блока».
Это не «официальный» тип прицела, но он существует. Область действия блока была введена в JavaScript как часть спецификации ES6. Он был введен вместе с двумя новыми типами переменных let
и const
. Эти две переменные, let
и const
, работают с этой областью. Переменная var
— нет. Результат этой разницы может быть весьма значительным. Точно так же, как локальная область определяется функциями, область действия блока определяется блоком кода (9).0077 {} ). Это включает в себя if…else, оператор switch, циклы и блоки кода в целом.
Если вы объявите переменную let
или const
внутри блока кода, она будет вести себя так, как если бы она находилась в локальной области. Он будет виден и доступен только внутри этого блока кода. Вот почему эти две переменные называются переменными с блочной областью видимости. Помните, что это не относится к переменным
.
Этот тип переменной работает только с глобальной и областью видимости. Это не работает с блочной областью. Если объявить var
переменная внутри блока кода будет видна и доступна извне. Если во внешней области есть другая переменная с таким же именем, более новая переменная перезапишет старую.
Этого не произойдет, если вы используете переменную let
или const
. Это может быть хорошей причиной прекратить использование var
.
// Глобальные переменные: пусть число страниц = 336 константное чтение = истина переменная оценка = 4 // Создаем область блока если правда) { пусть число страниц = 253 константное чтение = ложь переменная оценка = 2 // Логируем значение переменной "numOfPages": console.log(количество страниц) // Вывод: // 253 // Записываем значение переменной "read": console.log(прочитано) // Вывод: // ЛОЖЬ // Логируем значение переменной «rating»: console.log(рейтинг) // Вывод: // 2 } // Логируем значение переменной "numOfPages": console. log(количество страниц) // Вывод: // 336 // Записываем значение переменной "read": console.log(прочитано) // Вывод: // истинный // Логируем значение переменной «rating»: console.log(рейтинг) // Вывод: // 2 // ПРИМЕЧАНИЕ: глобальный "рейтинг" был перезаписан // по "рейтингу", объявленному внутри оператора if...else. // Остальные переменные остались без изменений, т.к. // они были ограничены рамками блока // оператора if...else.
Некоторые преимущества использования глобальной области видимости
Доступность — это одна из причин использования глобальной области видимости для переменных и функций. Это может быть полезно для создания глобальных констант, переменных, которые вы хотите сохранить неизменными и использовать в нескольких местах. То же самое относится не только к константам, но и к переменным, в которых хранятся данные, к которым вы хотите получить доступ из нескольких мест.
Может быть полезно объявить такие данные глобальными. В то же время глобальная область видимости также может быть полезна для «общих» и «служебных» функций. Это функции, которые вы хотите использовать часто и из разных мест. Сделать их доступными везде по умолчанию может быть полезно.
Некоторые недостатки использования глобальной области видимости
Основными недостатками использования глобальной области видимости являются безопасность. Когда что-то доступно везде, каждый может это увидеть. Кроме того, если вы не ограничиваете, любой может также изменить его. Это может подойти для некоторых общедоступных данных, но не для данных, которые должны оставаться частными. Даже в случае общедоступных данных это может быть спорным.
Подумай об этом. Если какая-то часть вашего кода не использует определенную часть данных, нужно ли ей об этом знать? Действительно ли нужно, чтобы эти данные вообще существовали? Использование глобальной области видимости для переменных также создает возможности для коллизий. Вы забываете, что ранее использовали какое-то имя переменной, и используете его снова.
В результате вы случайно перезаписываете старую переменную или функцию новой. Другой тип проблем, которые могут возникнуть, — это когда одна часть программы изменяет глобальную переменную, используемую в другой части программы, которая не ожидает, что это изменение произойдет. Это может привести к непредсказуемым результатам, особенно в сложных программах.
Чрезмерное использование глобальной области видимости может отрицательно сказаться на производительности вашего кода. Переменные, которые вы объявляете глобальными, вероятно, останутся в памяти, пока выполняется выполнение программы. Наконец, глобальные переменные могут превратить рефакторинг кода в сущий ад. Если вы измените переменную, используемую во многих местах, ваш код может сломаться во многих местах.
Некоторые преимущества использования локальной и блочной области видимости
Локальные переменные более безопасны. Локальная область автоматически ограничивает доступность и видимость каждой переменной или функции. Код во внешней области видимости не может его увидеть, получить к нему доступ или изменить его. Это также создает меньше возможностей для конфликтов имен. Это особенно верно для переменных let
и const
.
Вы можете безопасно иметь столько переменных с одинаковыми именами, сколько захотите. Ни один из них не будет перезаписан, пока каждый находится в другой области. Существует также меньшая вероятность неожиданного изменения переменной другой частью кода. Локальная область видимости гарантирует, что только локальный код может взаимодействовать с локальными переменными.
Другое преимущество локальных переменных заключается в управлении памятью и производительности. Локальные переменные существуют только до тех пор, пока существует область, в которой они определены. Как только область действия исчезает, выполнение некоторых функций прекращается, данные внутри нее удаляются, а занимаемое ею место в памяти освобождается.
Последнее преимущество локального хранения — когда приходит время для рефакторинга. Рефакторинг будет намного проще сделать, когда ваш код будет сфокусирован на меньшем объеме и/или в меньшем количестве мест.
Некоторые недостатки использования локальных и блочных областей
Прямо сейчас я могу вспомнить только один недостаток локальных данных. Это может затруднить обмен данными. По крайней мере, раньше это было проблемой. В настоящее время? Это больше не такая проблема, когда вы можете использовать оператор import
и export
. Однако совместно использовать глобальные переменные все же немного проще.
Тем не менее, эту проблему можно решить, сделав некоторые данные, такие как «общие» константы, глобальными. Если некоторые данные должны часто передаваться во многие места, следует ли в первую очередь хранить эти данные как локальные? Это, я думаю, решать каждому разработчику.
Заключение: область видимости переменной, лексическая область видимости и блоки кода в JavaScript
Концепция области видимости переменной, лексической области видимости и блоков кода может показаться сложной, особенно в начале. Однако эти концепции на самом деле не так уж сложны для понимания.