JavaScript | ЧАСТЬ I
Чего вы не знаете о JavaScript | Часть I
Контекст выполнения | Стек вызовов | Подъем | Самая короткая программа на JavaScript | Лексическое окружение | Цепочка областей
Статистика опроса Stackoverflow за 2020 год показывает, что JavaScript является наиболее часто используемым языком программирования среди разработчиков уже восьмой год подряд. Популярные интерфейсные фреймворки, такие как Angular, React, и серверные фреймворки, такие как Node.js, используют JavaScript. Основная цель этой статьи — дать вам глубокое представление о том, как JavaScript работает за кулисами. Эта статья представляет собой краткое и простое для понимания введение в концепции JavaScript. Итак, я рекомендую вам больше узнать об этих захватывающих концепциях. Теперь давайте начнем.
JavaScript — это легкий, интерпретируемый, свободно типизированный, основанный на прототипах, однопоточный, мультипарадигмальный язык, который поддерживает объектно-ориентированные, императивные и декларативные функции с первоклассными функциями. Смущенный? Я знаю, что это цепочка технического жаргона. Давайте разберемся, что на самом деле означают эти слова.
Легкий — язык программирования, использующий очень небольшой объем памяти с минималистичным синтаксисом и другими функциями. Эти языки просты в изучении и использовании.
Интерпретируемый — язык, который не нужно компилировать в инструкции машинного языка перед выполнением. Компиляция JS происходит во время выполнения.
Свободно типизированный — явное указание типов переменных и объектов в JS не требуется.
На основе прототипов — стиль ООП, в котором классы не определены явно. Классы получаются путем добавления свойств и методов к экземпляру другого класса.
Однопоточный — JS выполняет коды по порядку (перейдет к следующей строке после завершения предыдущей строки кода).
Мультипарадигма. Некоторые парадигмы программирования, такие как императивная, декларативная, функциональная, объектно-ориентированная и многие другие, характеризуются на основе концепций, которые они используют в программировании. JavaScript — это мультипарадигмальный язык, поддерживающий объектно-ориентированную, императивную и декларативную парадигмы.
Функции первого класса. Язык, поддерживающий функции первого класса, означает, что он рассматривает функции как переменные. Таким образом, функция может быть передана в качестве аргумента другой функции, возвращена другой функцией и может быть присвоена как значение переменной.
Контекст выполнения
Контекст выполнения (EC) — это среда, в которой хранится информация о выполняемом в данный момент коде. EC состоит из двух частей: Variable Environment, в которой хранятся все переменные с их значениями, и Thread of Execution, который включает код, связанный с конкретным контекстом.
Изначально перед выполнением кода будет создан глобальный контекст выполнения (GEC). Затем после вызова функции будет создан функциональный контекст выполнения (FEC), связанный с этой функцией, включая переменные и код. Механизм JS создаст EC (GEC и FEC) в два этапа: этап создания и этап выполнения.
Этап создания. На этом этапе механизм JS выделяет память для переменных и функций в EC. Для переменных он будет хранить пространственное значение undefined и полный код функции для функций в выделенной памяти. Если функция объявлена как стрелочная, она не будет хранить код функции, но ему будет присвоено значение undefined.
Этап выполнения — это этап, на котором выполняется код. Механизм JS будет выполнять код, выполнять указанные вычисления и обновлять переменные в среде переменных.
1 var x = 1;
2 var y = 2;
3 function add(a, b){
4 var z = a + b;
5 return z;
6 }
7 console.log(add(x,y))
Рассмотрим приведенный выше фрагмент кода. На этапе создания будет создан GEC, назначающий неопределенные переменные и сам код функции функциям в среде переменных.
На этапе выполнения значения переменных x и y будут заменены на 1 и 2. Затем, как только выполнение достигает вызова функции в строке номер 7, будет создан отдельный FEC для функции add.
Стек вызовов (стек контекста выполнения)
Для методичного выполнения EC механизм JS использует стек, называемый стеком контекста выполнения, также известным как стек вызовов. Перед выполнением кода движок JS создаст GEC и будет помещен в стек вызовов. Во время выполнения, если он найдет вызов функции, он создаст новый FEC и будет помещен в стек вызовов. Из ваших знаний о структурах данных вы знаете, что стек следует структуре последний пришел – первый ушел. Таким образом, EC, который отправляет последним, будет выполнен первым. После выполнения FEC будет извлечен из стека вызовов с возвращаемым значением. Наконец, GEC будет открыт.
Подъем
Если вы когда-либо использовали JS, скорее всего, вы видели слово undefined. Что означает undefined в JS?
Поднятие — это немного запутанная концепция, когда большинство людей думают, что объявления переменных и функций физически перемещаются в начало вашего кода, но на самом деле это не так. Вместо этого объявления переменных и функций помещаются в память перед выполнением, но остаются именно там, где вы их ввели в своем коде.
Движок JS имеет возможность доступа к переменным и функциям до их объявления. Можете ли вы вспомнить фазу создания ЕС? Движок JS будет запускать код, выделяя переменным неопределенные пространственные значения. Таким образом, на этапе выполнения не имеет значения, даже если присваивание переменной выполняется до объявления. Поскольку выделение памяти и присвоение значения undefined выполняется на этапе создания. Проще говоря, движок JS выделяет память для переменных и функций, прежде чем начнет выполнять код.
1 console.log(`Just After Creation phase : ` + x); 2 x = 10; 3 console.log(`After Initialization : ` + x); 4 var x; 5 console.log(`Finally After Declaration : ` + x);
Можете ли вы угадать вывод приведенного выше фрагмента кода?
В первой строке будет записано значение x сразу после этапа создания. Таким образом, значение, очевидно, будет undefined. Затем значение 10 будет присвоено x еще до объявления переменной и значения 10 будет выполнен вход в консоль. Наконец, после объявления переменной значение x будет зарегистрировано как 10.
Самая короткая программа JavaScript
А теперь давайте посмотрим что-нибудь интересное! Можете ли вы угадать, самая короткая программа JS?
Да, это самая короткая JS-программа, пустой файл.
Теперь давайте посмотрим, что произойдет, если вы запустите пустой JS-файл. Из предыдущих знаний о EC вы знаете, что GEC создается до выполнения кода. Итак, в этом случае создается GEC, а также объект с именем Window создается в GEC с целым рядом методов. Кроме того, это ключевое слово создается в глобальном пространстве, которое указывает на объект Window.
Лексическое окружение
Лексическое окружение можно определить как локальную память EC со ссылкой на лексическое окружение его родителя. Лексическая среда хранит переменную, определенную в этой функции, во время выполнения этой функции. Важно понимать, что такое лексическое окружение, чтобы понимать Closures в JS. Позвольте мне объяснить это с помощью фрагмента кода.
1 function outer(){
2 var x = 1;
3 function inner(){
4 var y = 2;
5 console.log(x)
6 }
7 }
В приведенном выше коде внутренняяфункция может обращаться к переменной y, а также к переменной x. . В локальной памяти внутренней функции есть y, но не x. Но внутренняяфункция может получить доступ к переменной x, поскольку лексическое окружение внутренней функцияимеет свою локальную память, а также лексическое окружение своего родителя, которое является внешнимфункция в этом случае.
Цепочка областей
Теперь вы знаете, что такое лексическое окружение. Рассмотрим фрагмент кода ниже.
1 var z = 3;
2 function outer(){
3 var x = 1;
4 function inner(){
5 var y=2
6 console.log(y)
7 console.log(x)
8 console.log(z)
9 }
10 inner()
11 }
12 outer()
Внутри внутреннейфункции переменная y будет найдена в ее локальной памяти и будет зарегистрирована в консоль. Затем значение x будет проверено в его локальной памяти. Поскольку он недоступен, он получит значение из лексического окружения своего родителя через ссылку, и значение x будет зарегистрировано. Наконец, он попытается найти переменную z в локальной памяти и проверит лексическое окружение своего родителя и значение z. > будет напечатано.
Если переменная не найдена в своем локальном окружении, она попытается использовать родительское окружение, используя ссылку на родительское лексическое окружение. Если он не найден, он попробует родительскую среду своего родителя. Таким образом, этот метод поиска в виде цепочки называется Scope Chain.
Это все про JavaScript?, Абсолютно нет!!! Есть много других важных концепций, которые вам нужно знать, прежде чем говорить, что вы знаете JavaScript. Я предлагаю вам глубоко погрузиться в эти концепции и обратиться к упомянутым ссылкам. Поверьте мне; вам будет интереснее.
Посетите Часть II
Рекомендации
Namaste JavaScript от Акшая Шайни
