TLDR
JavaScript имеет лексическую (также называемую статической) область видимости и замыкания. Это означает, что вы можете определить область действия идентификатора, посмотрев на исходный код.
Четыре области применения:
- Глобальный - виден всем
- Функция - видимая внутри функции (и ее подфункций и блоков)
- Блок - видимый внутри блока (и его подблоков)
- Модуль - видимый внутри модуля
Вне особых случаев глобальной и модульной области, переменные объявляются с использованием var(область действия функции), let(область действия блока) и const(область действия блока). Большинство других форм объявления идентификаторов имеют строгую область видимости блока.
обзор
Область действия - это область кодовой базы, по которой действителен идентификатор.
Лексическая среда - это отображение между именами идентификаторов и значениями, связанными с ними.
Область действия формируется из связанного вложения лексических сред, причем каждый уровень вложения соответствует лексическому окружению контекста выполнения предка.
Эти связанные лексические среды образуют «цепочку». Разрешение идентификатора - это процесс поиска по этой цепочке соответствующего идентификатора.
Разрешение идентификатора происходит только в одном направлении: наружу. Таким образом, внешние лексические среды не могут «видеть» внутреннюю лексическую среду.
Есть три соответствующие факторы в определении сферы в качестве идентификатора в JavaScript:
- Как был объявлен идентификатор
- Где идентификатор был объявлен
- Находитесь ли вы в строгом режиме или не строгом режиме
Некоторые из способов идентификации идентификаторов:
var, letиconst- Параметры функции
- Параметр блока захвата
- Объявления функций
- Выражения именованных функций
- Неявно определенные свойства глобального объекта (т. Е. Пропущенные
varв нестрогом режиме)
import заявленияeval
Некоторые из идентификаторов местоположений могут быть объявлены:
- Глобальный контекст
- Тело функции
- Обычный блок
- Вершина управляющей структуры (например, цикл, если, в то время и т. Д.)
- Орган управления корпусом
- Модули
Декларация Стили
вар
Идентификаторы, объявленные с использованием, var имеют область действия функции , за исключением случаев, когда они объявляются непосредственно в глобальном контексте, и в этом случае они добавляются в качестве свойств глобального объекта и имеют глобальную область действия. Существуют отдельные правила их использования в evalфункциях.
пусть и const
Идентификаторы объявлены с использованием letи const имеют область видимости блока , кроме случаев, когда они объявлены непосредственно в глобальном контексте, и в этом случае они имеют глобальную область видимости.
Примечание: let, constи var все поднимают . Это означает, что их логическая позиция определения является вершиной их охватывающей области (блока или функции). Тем не менее, переменные объявлены с использованием letи constне могут быть прочитаны или назначены, пока контроль не пройдет точку объявления в исходном коде. Промежуточный период известен как временная мертвая зона.
function f() {
function g() {
console.log(x)
}
let x = 1
g()
}
f() // 1 because x is hoisted even though declared with `let`!
Имена параметров функции
Имена параметров функции находятся в теле функции. Обратите внимание, что в этом есть небольшая сложность. Функции, объявленные в качестве аргументов по умолчанию, закрываются в списке параметров , а не в теле функции.
Объявления функций
Объявления функций имеют область видимости в строгом режиме и область видимости функции в нестрогом режиме. Примечание: нестрогий режим - это сложный набор возникающих правил, основанный на причудливых исторических реализациях различных браузеров.
Выражения именованных функций
Выражения именованных функций ограничены самими собой (например, с целью рекурсии).
Неявно определенные свойства глобального объекта
В нестрогом режиме неявно определенные свойства глобального объекта имеют глобальную область действия, поскольку глобальный объект находится в верхней части цепочки области действия. В строгом режиме это не разрешено.
Eval
В evalстроках переменные, объявленные с использованием, varбудут помещены в текущую область или, если evalиспользуется косвенно, в качестве свойств глобального объекта.
Примеры
Следующее вызовет ReferenceError, потому что имена x, yи не zимеют никакого значения вне функции f.
function f() {
var x = 1
let y = 1
const z = 1
}
console.log(typeof x) // undefined (because var has function scope!)
console.log(typeof y) // undefined (because the body of the function is a block)
console.log(typeof z) // undefined (because the body of the function is a block)
Следующее вызовет ReferenceError для yи z, но не для x, потому что видимость xне ограничена блоком. Блоки , которые определяют органы управления структур , таких как if, forи whileведут себя аналогичным образом .
{
var x = 1
let y = 1
const z = 1
}
console.log(x) // 1
console.log(typeof y) // undefined because `y` has block scope
console.log(typeof z) // undefined because `z` has block scope
Далее xвидно за пределами цикла, поскольку varимеет область действия функции:
for(var x = 0; x < 5; ++x) {}
console.log(x) // 5 (note this is outside the loop!)
... из-за этого поведения вы должны быть осторожны при закрытии переменных, объявленных varв циклах. Здесь объявлен только один экземпляр переменной x, и он логически находится вне цикла.
Следующая распечатка выполняется 5пять раз, а затем распечатывается 5в шестой раз за console.logпределами цикла:
for(var x = 0; x < 5; ++x) {
setTimeout(() => console.log(x)) // closes over the `x` which is logically positioned at the top of the enclosing scope, above the loop
}
console.log(x) // note: visible outside the loop
Следующие распечатки, undefinedпотому что xэто блок-область. Обратные вызовы запускаются один за другим асинхронно. Новое поведение для letпеременных означает , что каждая анонимная функция сомкнулась над другой переменной с именем x( в отличие от нее сделали бы с var), и так целых чисел 0через 4распечатываются .:
for(let x = 0; x < 5; ++x) {
setTimeout(() => console.log(x)) // `let` declarations are re-declared on a per-iteration basis, so the closures capture different variables
}
console.log(typeof x) // undefined
Следующее НЕ выдает a, ReferenceErrorпотому что видимость xне ограничена блоком; однако он напечатает, undefinedпотому что переменная не была инициализирована (из-за ifоператора).
if(false) {
var x = 1
}
console.log(x) // here, `x` has been declared, but not initialised
Переменная, объявленная в верхней части forцикла при помощи, letпопадает в тело цикла:
for(let x = 0; x < 10; ++x) {}
console.log(typeof x) // undefined, because `x` is block-scoped
Следующее будет выбрасывать, ReferenceErrorпотому что видимость xограничена блоком:
if(false) {
let x = 1
}
console.log(typeof x) // undefined, because `x` is block-scoped
Переменные , объявленные с использованием var, letили constвсе области видимости модулей:
// module1.js
var x = 0
export function f() {}
//module2.js
import f from 'module1.js'
console.log(x) // throws ReferenceError
Далее будет объявлено свойство для глобального объекта, потому что переменные, объявленные с использованием varв глобальном контексте, добавляются как свойства к глобальному объекту:
var x = 1
console.log(window.hasOwnProperty('x')) // true
letи constв глобальном контексте не добавляйте свойства к глобальному объекту, но все еще имеют глобальную область видимости:
let x = 1
console.log(window.hasOwnProperty('x')) // false
Параметры функции можно считать объявленными в теле функции:
function f(x) {}
console.log(typeof x) // undefined, because `x` is scoped to the function
Параметры блока захвата ограничены телом блока захвата:
try {} catch(e) {}
console.log(typeof e) // undefined, because `e` is scoped to the catch block
Выражения именованных функций ограничиваются только самим выражением:
(function foo() { console.log(foo) })()
console.log(typeof foo) // undefined, because `foo` is scoped to its own expression
В нестрогом режиме неявно определенные свойства глобального объекта имеют глобальную область видимости. В строгом режиме вы получаете ошибку.
x = 1 // implicitly defined property on the global object (no "var"!)
console.log(x) // 1
console.log(window.hasOwnProperty('x')) // true
В нестрогом режиме объявления функций имеют область действия. В строгом режиме они имеют блочную область видимости.
'use strict'
{
function foo() {}
}
console.log(typeof foo) // undefined, because `foo` is block-scoped
Как это работает под капотом
Область действия определяется как лексическая область кода, по которой действителен идентификатор.
В JavaScript, каждая функция-объект имеет скрытую [[Environment]]ссылку , которая является ссылкой на лексическую среду в контексте выполнения (кадре стеки) , в течение которого он был создан.
Когда вы вызываете функцию, вызывается скрытый [[Call]]метод. Этот метод создает новый контекст выполнения и устанавливает связь между новым контекстом выполнения и лексической средой объекта-функции. Это делается путем копирования [[Environment]]значения объекта-функции во внешнее поле ссылки в лексической среде нового контекста выполнения.
Обратите внимание, что эта связь между новым контекстом выполнения и лексической средой объекта функции называется замыканием .
Таким образом, в JavaScript область видимости реализуется через лексические среды, связанные друг с другом в «цепочку» внешними ссылками. Эта цепочка лексических сред называется цепочкой областей действия, и разрешение идентификатора происходит путем поиска в цепочке соответствующего идентификатора.
Узнайте более .
