🖼Стек вызовов JavaScript: объяснение с помощью иллюстраций

▪Типичный случай

В случае ниже каждая функция завершается после выполнения всех строк кода внутри нее.
function defense() {
console.log('I am the defense attorney');
}

function prosecution() {
console.log('I am the prosecutor');
}

console.log('All rise');
defense();
prosecution();

👀Смотреть

▪Более интересный случай

В данном примере — вызов функции внутри другой функции.
function callingToWitness(witnessNumber) {
console.log('Calling to witness number ' + witnessNumber);
}

function defense() {
callingToWitness(1);
callingToWitness(2);
}

function prosecution() {
callingToWitness(3);
callingToWitness(4);
}

console.log('All rise');
defense();
prosecution();

👀Смотреть

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

Каждый “бокс” выполняет код внутри себя. При вызове функции создается новый “бокс” внутри нее. Если есть простая команда, например console.log, она просто выполняется. Выполнив весь код, “бокс” покидает стек.


Что такое “боксы”? Зачем нужны контексты выполнения?

▪Читать

@javascriptv