Кроме того, что такое область сценария в Chrome?

На этот раз я пишу на очень распространенную тему, но все же я видел людей, которые не знали об этом. Итак, я просто пытаюсь быть полезным для сообщества.

Многие люди используют инструменты отладки браузера, и это здорово. Мы, конечно, должны их использовать. Но проблема здесь в том, что если вы их используете, вы должны знать определенные вещи, в которых ошибаетесь.

Хорошо, позвольте мне внести ясность. Все мы знаем, что в процессе разработки код во всем приложении очень часто меняется. Иногда мы добавляем точки отладки (точки останова) в некоторых местах кода, где они требуются. Но позже мы понимаем, что, поскольку код изменился, точек отладки нет там, где мы их разместили. Много раз я замечал, что они начинают указывать на строку, в которой мы объявляем функцию. Как одна из этих строк:

function a() {
OR
var a = function() {
OR
var a = () => {
OR something similar, I think you got my point

Допустим, мы хотим выяснить, выполнил ли наш код какую-то функцию или нет. Для этого мы раньше добавляли точки останова внутри функции. Но теперь эти точки останова переместились в одну из вышеперечисленных строк.

По моим наблюдениям, есть два типа людей:

  1. Люди, которые знают, что такое подъем - они просто меняют положение этих точек останова. А потом отладка.
  2. Люди, которые не знают о подъеме - они видят, что отладчик попал в эту строку, и либо они сбиты с толку, либо им нравится (в зависимости от ситуации).

Думаю, к этому времени я правильно описал проблему. А теперь давайте попробуем решить эту проблему.

Что такое подъем?

Вы просто набираете его в Google, и вы найдете ответ.

Вот и все. Вот что такое подъем. Но я здесь не для того, чтобы описывать постановку проблемы и определять решение с помощью изображения. Я здесь, чтобы привести практический пример.

Я создал очень простой код, содержащий два файла: index.html, main.js

Этот код очень легко читать. Поэтому я здесь ничего не объясняю.

Перед запуском кода я добавил в браузер несколько точек останова.

Я добавил строку точки останова 1, потому что хочу проверить, какие переменные присутствуют в области видимости. И вы можете ясно видеть, что с правой стороны

  1. a1, a2, a3 входят в сферу действия, но a4 и a5 отсутствуют.
  2. a1 определен, а a2 и a3 - нет.

Хорошо! Что здесь происходит?

Hoisting сообщает, что перед запуском любой функции JS просканирует всю функцию и будет искать следующие ключевые слова: function и var.

Не зря выше выделена функция. Поскольку JS - это функциональный язык программирования, ничто не может работать вне функции. Если какой-либо оператор написан глобально, он выполняется в анонимном контексте. Пожалуйста, прочтите название контекста в «Call Stack» на Рис. 2.

Когда JS встречает «функцию», он считывает функцию и сохраняет ее в текущей области (не выполняя ее). Это причина того, почему, если точка останова присутствует в этой строке, JS всегда будет попадать в нее, и это тоже в начале. Потому что в настоящее время он читает эту область.

Когда он встречает «var», он создает переменную в текущей области без ее значения. Значение останется неопределенным до тех пор, пока код не будет выполнен до точки, в которой мы фактически определяем значение.

Это должно прояснить, почему a1 определен (потому что он определен с использованием ключевого слова function) и почему a2 и a3 не определены (потому что они определены с использованием ключевого слова var) и почему a4 и a5 отсутствуют в области (они определяется с помощью ключевых слов let и const).

ЧТО, ЕСЛИ МЫ ЗАПУСТИМ ЭТОТ КОД?

Код будет прерван в строке 4.

Как и ожидалось, a1 печатает функцию, a2 и a3 равны undefined, а a4 не инициализируется.

Если мы прокомментируем строку 4 и затем запустим, мы снова получим ошибку в строке 5. Поскольку a5 также не определен. Комментируя строку 5, мы попадаем в точку останова на строке 10, которая находится внутри функции a1.

Обратите внимание на «стек вызовов» на этом этапе. В остальном глобальный охват остается прежним. Теперь есть новая локальная область видимости, которая выглядит примерно так, как показано выше.

Если мы снова запустим, то получим ошибку.

Мы обсудили первые три выхода. Четвертый - это a, который регистрируется функцией a1. Поскольку a1 ничего не вернул, в строке 6 мы получаем undefined.

Поскольку a2 - это undefined, как мы видели ранее на рис. 2 и 4, сейчас это не функция. Вот почему мы не можем назвать это прямо сейчас. Придется прокомментировать и эту строчку.

На этом этапе мы видим разницу в масштабах. a2 определяется сейчас. Но выглядит иначе, чем a1. Почему? Простой. Поскольку a1 - это именованная функция, а a2 - анонимная функция.

Соблюдайте «Объем». Теперь есть новый прицел. Область «Скрипт». Вы когда-нибудь слышали об этом раньше? Я только что увидел это прямо сейчас впервые. 😶😮

Через некоторое время… (Что такое область действия сценария?)

Что ж, я провел небольшое исследование. Похоже, что нет ничего, что известно как «Область действия скрипта». Я не мог найти ничего связанного с этим.

Насколько мне известно, глобальная область видимости - это область, которую предоставляет нам window. Всякий раз, когда мы создаем глобальную переменную, она сохраняется в объекте window. Вы видите это «Окно» справа от «Глобального»? Это имя объекта текущей области видимости.

Если вы попытаетесь получить доступ к window.a1 или любой другой переменной в глобальной области видимости, вы сможете это сделать. Но нет ни window.a4, ни window.a5.

Переменные, определенные с помощью let или const, не хранятся в объекте окна. Но они присутствуют в глобальном масштабе. Может быть, именно поэтому хром демонстрирует эту новую область видимости. А в Firefox происходит что-то совсем другое. Но там нет "Script Scope". Это доказывает, что не существует ничего, известного как «область действия сценария».

Двигаемся дальше.

Помимо области действия сценария, теперь также определен a3. Таким образом, теперь мы можем ожидать вывода всех журналов.

Подожди, это еще не конец. Я немного изменил код JS.

На этот раз я создал локальную функцию и несколько локальных переменных в функции a1. Обратите внимание на «Локальный масштаб» и «Глобальный масштаб». Вы можете угадать ответ?

Теперь, когда вы знаете о подъеме и определении области видимости, я надеюсь, что вы попадете в первую категорию людей, которые удаляют точки останова из определений функций и используют их в некоторых других операторах, где они могут оказаться полезными.