[Пытка души] Когда интервьюер спрашивает вас о предварительной компиляции JavaScript

внешний интерфейс JavaScript
[Пытка души] Когда интервьюер спрашивает вас о предварительной компиляции JavaScript

(Введение

В интервью другим крупным компаниям, таким как Tencent Byte, часто задают вопрос о предварительной компиляции JavaScript.Эта статья покажет вам конкретный процесс предварительной компиляции JS.

(2) Этапы компиляции и выполнения

Шаги компиляции традиционного скомпилированного языка

Для традиционных компилируемых языков шаги компиляции обычно следующие:Лексический анализ -> Синтаксический анализ -> Генерация кода, введем эти три процесса по отдельности.

  1. лексический анализ

Этот процесс разделяет код на синтаксические единицы, такие какvar a = 520;Этот код обычно разбивается наvar,a,=,520эти 4 лексические единицы.

  1. Разбор

Этот процесс заключается в объединении лексических единиц в многомерный массив, а именноАбстрактное синтаксическое дерево (AST), возьмите следующий код в качестве примера

if(typeof a == "undefined" ){ 
a = 0; 
} else { 
a = a; 
} 
alert(a);

语法树.jpg

Когда интерпретатор JavaScript строит синтаксическое дерево, если он обнаруживает, что оно не может быть построено, он сообщитсинтаксическая ошибка (syntaxError), и завершает синтаксический анализ всего блока кода.

  1. генерация кода

Этот процесс заключается в преобразовании абстрактного синтаксического дерева AST в исполняемый машинный код, чтобы компьютер мог его прочитать и выполнить.

Шаги компиляции JavaScript

Движок JavaScript намного сложнее, чем традиционный компилятор языка, всего в 3 шага, но в целом процесс компиляции JavaScript состоит только из следующих трех шагов:1. Синтаксический анализ 2. Прекомпилировать 3. Объясните и выполните

(3) Подробная предварительная компиляция

Обзор предварительной компиляции

Прекомпиляция JavaScript происходит за несколько микросекунд (или даже раньше!) до выполнения фрагмента кода.Существует два типа прекомпиляции: прекомпиляция функции и глобальная прекомпиляция.Глобальная прекомпиляция происходит при загрузке страницы.Когда функция выполняется, предварительная компиляция функции происходит непосредственно перед ее выполнением.Прекомпиляция создает контекст выполнения для текущей среды.

Прекомпиляция функций выполняет четыре шага

  1. Создать Объект Активации (далее – Объект Активации);
  2. Найти формальные параметры и объявления переменных, использовать объявления переменных и формальные параметры в качестве имен атрибутов AO, а значение не определено;
  3. Унифицировать фактические и формальные значения параметров;
  4. Найдите объявление функции в теле функции, используйте имя функции в качестве имени атрибута объекта AO и присвойте значение телу функции.

код дела

//请问下面的console.log()输出什么？
function fn(a) {
  //console.log(a);
  var a = 123//变量赋值
  //console.log(a);
  function a() { }//函数声明
  //console.log(a);
  var b = function () { }//变量赋值（函数表达式）
  //console.log(b);
  function d() { }//函数声明
}
fn(1)//函数调用

Согласно приведенным выше четырем частям, после аннотирования кода мы можем легко узнать, что выводит четыре console.log(), давайте посмотрим на изменения AO.

  1. Создать объект АО
AO{
    //空对象
}
  1. Найти формальные параметры и объявления переменных, использовать объявления переменных и формальные параметры в качестве имен свойств AO, а значение не определено;
AO{
    a: undefined
    b: undefined
}
  1. Унифицировать фактические и формальные значения параметров;
AO{
    a: 1,
    b: undefined
}
  1. Найдите объявление функции в теле функции, используйте имя функции в качестве имени атрибута объекта AO и присвойте значение телу функции.
AO{
    a: function(){}
    b: undefined
    d: function(){}
}

Наконец, ниже приведен полный процесс предварительной компиляции.

AO:{
a:undefined -> 1 -> function a(){}
b:undefined
d:function d(){}
}

Глобальная трилогия о предварительно скомпилированном исполнении

  1. Создать Глобальный объект (далее сокращенно ГО объект);
  2. Найти формальные параметры и объявления переменных, использовать объявления переменных и формальные параметры в качестве имен свойств GO, а значение не определено;
  3. Найдите объявление функции в глобале, используйте имя функции в качестве имени атрибута объекта GO и присвойте значение телу функции.

код дела

global = 100;
function fn() {
  //console.log(global);
  global = 200;
  //console.log(global);
  var global = 300;
}
fn();

Согласно глобальной предварительно скомпилированной трилогии, мы можем узнать его процесс изменения GO.

  1. Создание объектов GO
GO{
    // 空对象
}
  1. Найдите формальные параметры и объявления переменных, используйте объявления переменных и формальные параметры в качестве имен свойств GO, а значение не определено.
GO: {
  global: undefined
}
  1. Найдите объявление функции в глобале, используйте имя функции в качестве имени атрибута объекта GO и присвойте значение телу функции.
GO: {
  global: undefined
  fn: function() { }
}

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

(4) Резюме

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

Эта статья была включенаПодробное объяснение технологии JavaScript, и другие технологии JavaScript можно найти в колонке.

❤ Кодовое слово не просто нажать на бесплатный лайк ❤

Категории