У JavaScript масса странного поведения — если верить всем инженерам, которые вам это говорят! Начало работы с моим первым настоящим языком программирования привело к путанице вокруг предполагаемой странной функциональности, встроенной в JavaScript. Только мне это не было странно, это был просто код. Мне было трудно понять параллели с другими объектно-ориентированными языками программирования, и я просто хотел изучить концепции, а не какую-то абстракцию, контрастирующую с другими вещами, которые я еще не понимал.

У меня есть доступ?

Это вопрос, который вы должны задать себе, пытаясь понять область видимости в JavaScript.

Но доступ к чему?

Все наши программы состоят из переменных. Переменные — это то, что мы используем для определения, хранения и отображения данных для наших пользователей. Если бы наша программа состояла только из переменных, у нас не было бы особой потребности в понимании области видимости. Однако наши программы пронизаны функциями и объектами, которые оживляют наши приложения. Внутри этих функций и объектов меняется доступ к переменной.

Так что же меняется?

Масштаб — это то, что меняется. То, к чему мы изначально имели доступ, больше недоступно.

2 типа прицела

  1. Глобальная область действия — любая переменная, определенная вне функции.
  2. Локальная область действия — любая переменная, определенная внутри функции.

Глобальный охват

Любая переменная может иметь глобальную область видимости. Независимо от того, используем ли мы var, let или const, пока они определены вне функции, они будут иметь глобальную область действия.

Чтобы лучше проиллюстрировать это, мы создадим переменную global и функцию testing. Все, что будет делать эта функция, это console.log(global). Несмотря на то, что global объявлен вне нашей функции, мы все равно имеем к нему доступ. У нас есть доступ к этой переменной, поскольку она имеет глобальную область действия (определена вне функции).

Локальная область

Любая переменная может иметь локальную область видимости. Независимо от того, используем ли мы var, let или const, если они определены внутри функции, они будут иметь локальную область видимости.

В нашей функции тестирования вы увидите, что мы определяем переменную с именем local. Эта переменная имеет локальную область видимости (определяется внутри функции). Кроме того, на эту переменную можно ссылаться только внутри области действия этой функции. Когда мы запустим тестирование, мы увидим напечатанное Local Scope. Однако, если мы попытаемся console.log(local)за пределами функции, мы увидим Local is not defined. Это происходит потому, что мы пытаемся получить доступ к переменной за пределами ее области видимости.

Как насчет нескольких локальных областей?

Что произойдет, если у нас есть функция внутри функции? Начальная функция создаст локальную область. Вторая функция внутри нашей исходной функции создаст еще одну локальную область видимости. Эти области не совпадают и не предоставляют одинаковый доступ. Наша функция testing действует как глобальная область действия для нашей функции insideTesting, все, что определено в этой области, будет доступно для insideTesting. Однако все, что определено в нашей функции insideTesting, не будет доступно нашей функции testing из-за ее области действия. Этот пример связывает все предыдущие уроки и подчеркивает то, к чему у нас есть доступ в определенной области.

Вывод

Важно понимать возможности и нюансы JavaScript при создании приложений или просто на практике! Я надеюсь, что это краткое руководство послужит источником обучения для тех, кто плохо знаком с JavaScript, или поможет освежить в памяти тех, кто уже некоторое время занимается программированием.

Если вам понравился этот контент, подпишитесь на меня в twitter или linkedIn.