Последнее обновление 04.01.2023 — Василий Иванов
«Область» относится к текущему контексту выполнения, в котором ваш код может ссылаться или «видеть» значения и выражения. Переменные, объекты и функции из различных частей кода доступны в зависимости от их области действия.
В JavaScript переменные, объекты и функции могут иметь глобальную область действия, область действия модуля, область действия блока или область действия функции.
Глобальная область видимости в JavaScript
Любое значение, объявленное вне функции или блока в сценарии, имеет глобальную область действия, и любой другой файл сценария в вашей программе может получить к нему доступ.
Например, объявление глобальной переменной в одном файле:
// index.js
let globalVariable = "some value"
Означает, что любой другой скрипт в вашей программе может получить к нему доступ:
// otherScript.js
console.log(globalVariable) // some value
Объявление переменных JavaScript в глобальной области видимости — плохая практика, поскольку это может привести к загрязнению пространства имен. Глобальное пространство имен — это верхнее пространство Javascript, которое содержит переменные, объекты и функции. В браузере он присоединяется к объекту Window, а NodeJS использует объект с именем global.
Загрязнение глобального пространства имен может привести к конфликту имен. Это ситуация, в которой ваш код пытается использовать одно и то же имя переменной для разных вещей в одном и том же пространстве имен. Конфликты имен часто встречаются в больших проектах, использующих несколько сторонних библиотек.
Объем модуля
Модуль — это отдельный файл, который инкапсулирует и экспортирует фрагменты кода для использования другими модулями в проекте. Это позволяет более эффективно организовывать и поддерживать кодовую базу.
Модули ES формализовали шаблон модуля JavaScript в JavaScript в 2015 году.
Переменные, которые вы объявляете в модуле, относятся к этому модулю, что означает, что никакая другая часть программы не может получить к ним доступ.
Вы можете использовать переменную, объявленную в модуле, вне его, только если модуль экспортирует эту переменную с помощью ключевого слова export. Затем вы можете импортировать это имя в другой модуль, используя ключевое слово import.
Вот пример, который показывает экспорт класса:
// index.js
export class Foo {
constructor(property_1, property_2) {
this.property_1 = property_1
this.property_2 = property_2
}
}
А вот как вы можете импортировать этот модуль и использовать экспортируемое им свойство:
// someModule.js
import { Foo } from './index.js'
const bar = new Foo('foo', 'bar')
console.log(bar.property_1) // foo
Файлы не объявлены как модули по умолчанию в JavaScript.
В клиентском JavaScript вы можете объявить скрипт как модуль, установив для атрибута type значение module в теге script:
<script type="module" src="index.js"></script>
В NodeJS вы можете объявить скрипт как модуль, установив для свойства type значение module в файле package.json:
{
"type": "module"
}Область блока
Блок в JavaScript — это место, где пара фигурных скобок начинается и заканчивается.
Переменные, объявленные внутри блока с ключевыми словами let и const, относятся к этому блоку, то есть вы не можете получить к ним доступ за его пределами. Эта область не применяется к переменным, объявленным с помощью ключевого слова var:
{ // Beginning of block
const one = '1'
let two = '2'
var three = '3'
} // End of block
console.log(one) // throws error
console.log(three) // "3"
Переменные, заключенные в блок выше и объявленные как const или let, доступны только внутри блока. Однако вы можете получить доступ к переменной, объявленной с помощью ключевого слова var, вне блока.
Объем функций
Переменные, объявленные внутри функции, обычно называются локальными переменными и относятся к функции. Вы не можете получить к ним доступ вне функции. Эта область применима к переменным, объявленным с ключевыми словами var, let и const.
Поскольку переменные, объявленные в функции, являются локальными для этой функции, имена переменных можно использовать повторно. Повторное использование имен переменных в области действия функции известно как затенение переменных, а внешняя переменная называется «затененной».
Например:
function multiply() {
let one = 1
var two = 2
const three = 3
return one * two * three
}
// Variable shadowing
const three = 'three' // Does not throw an error
Понимание правил масштабирования жизненно важно
Знание доступных областей видимости в JavaScript поможет вам избежать ошибок. Попытка получить доступ к переменной, которая недоступна в определенной области, является источником ошибок.
Понимание области также включает в себя такие понятия, как глобальное загрязнение пространства имен, которое может сделать ваш код более подверженным ошибкам.
