call stack در جاوا اسکریپت چگونه کار میکند و ارتباط آن با event loop چیست ؟

call stack در جاوا اسکریپت چگونه کار میکند و ارتباط آن با event loop چیست ؟ نوشته شده در   javascript ۷ مهر , ۱۳۹۷ توسط  عباس حسینی

در دوره دانشجویی کارشناسی به یاد دارم که یکی از مباحثی که در کتاب ها میخواندیم، بحث LIFO بود که مربوط به پشته یا stack میشد LIFO مخفف عبارت last in first out و یکی از مکانیزم های کارکردی پشته (stack) میباشد به این شکل که چون پشته فقط یک ورودی و خروجی دارد پس هر عنصری که به عنوان آخرین عضو وارد آن شود اولین عضو خارج شونده از آن نیز میباشد در ادامه با روش کار پشته در جاوا اسکریپت آشنا خواهید شد.

 

لیست مطالب

call stack در جاوا اسکریپت

call stack یک ساختار داده ای است که فراخوانی توابع در آن ثبت میشود، به شکلی که با صدا زدن هر تابع آن در stack قرار گرفته و پس از اجرای کامل از stack خارج میشود برای درک بهتر آن به کد زیر توجه کنید


function firstFunction () {
  console.log("I'm first!");
};

function secondFunction () {
  firstFunction();
  console.log("I'm second!");
};

secondFunction();

در اینجا وقتی تابع secondFunction اجرا میشه داخل stack قرار میگیره و چون داخلش تابع firstFunction قرار داره ،آن نیز برای اجرا شدن داخل stack قرار میگیرد

 

CALL STACK
firstFunction
secondFunction

حال نوبت اجرای توابع قرار گرفته داخل stack است ، چون firstFunction آخرین ورودی به stack است پس اولین ورودی نیز هست ، first function اجرا میشود و همراه با چاپ شدن عبارت im first از stack خارج میشود

 

CALL STACK
secondFunction

تابع بعدی secondFunction است که بعد از اجرای کامل و چاپ شدن عبارت im second آن نیز از stack خارج میشود و stack خالی میشود

 

CALL STACK

 

علت وقوع event loop در جاوا اسکریپت

event loop چرخه ایست که call stack مکررا چک میشود اگر خالی بود به سراغ event queue رفته و اگر تابعی در صف انتظار باشد، داخل callstack  قرار میدهد تا اجرا شود به این چرخه event loop و به هر بار چک شدن آن tick میگویند

برا درک بهتر event loop به مثال زیر توجه کنید


var firstFunction = function () {
    console.log("I'm first!");
};
   
var secondFunction = function () {
    setTimeout(firstFunction, 5000);
    console.log("I'm second!");
};
   
secondFunction();
   
/* Results:
* => I'm second!
* (And 5 seconds later)
* => I'm first!
*/

در اینجا بعد از اینکه secondFunction صدا زده میشود داخل stack  میرود و چون setTimeout  داخل آن قرار دارد آن هم داخل stack  قرار میگیرد

CALL STACK
setTimeout
secondFunction

 

خالی خالی EVENT TABLE

 

خالی EVENT QUEUE

چون setTimeout یک تاخیر ۵ ثانیه ای دارد، مرورگر نمیتواند ۵ ثانیه منتظر باشد تا بعد ادامه کار را دنبال کند بنابراین آنرا از call stack خارج و داخل  event table قرار میدهد و در ادامه با چاپ شدن عبارت im second کار تابع secondFuncion نیز به پایان رسیده و از stack خارج میشود و اکنون stack خالی میباشد

 

CALL STACK
خالی

 

firstFunction بعد از ۵ ثانیه انتظار باید اجرا شود EVENT TABLE

 

خالی EVENT QUEUE

 

وقتی ۵ ثانیه گذشت event table اولین تابع موجود در خودش رو داخل event queue میزاره تا اجرا بشه

 

CALL STACK
خالی

 

خالی خالی EVENT TABLE

 

firstFunction EVENT QUEUE

 

event queue هم call stack رو چک میکنه اگر خالی بود firstFunction داخل آن قرار میدهد

 

CALL STACK
firstFunction

 

خالی خالی EVENT TABLE

 

خالی EVENT QUEUE

 

و بعد از اجرا ی firstFunction و چاپ شدن عبارت im second از داخل stack  خارج میشود و stack خالی میشود ولی دیگر داخل event table چیزی برای اجرا شدن نیست پس کار اجرای کد به پایان میرسد

به عبارت دیگر event loop چرخه ای که صفی از callback ها داخل event table نگهداری شده و بعد در call stack قرار گرفته و اجرا میشوند