رمزگشایی پشته تماس جاوا اسکریپت: کد شما واقعا چگونه اجرا می شود

Summarize this content to 400 words in Persian Lang
چگونه پشته تماس جاوا اسکریپت Works چیزی است که هر توسعه‌دهنده فرانت‌اند حداقل یک‌بار در حرفه‌اش پرسیده است، و به نظر من، این سوالی نیست که در اکثر جاها به آن پاسخ داده شده باشد و پاسخ‌ها همیشه واضح یا قابل درک نیستند. به همین دلیل تصمیم گرفتم در این پست به این موضوع بپردازم.

بیایید از ابتدا شروع کنیم. موتور جاوا اسکریپت کد را خط به خط به صورت همزمان اجرا می کند، و هر بار که یک تابع اجرا می شود، یک زمینه اجرایی ایجاد می کند (a فضایی در حافظه برای ذخیره تمام ویژگی های محدوده ای که فقط در داخل آن تابع وجود دارد) و تابع را به پشته تماس اضافه می کند.

جاوا اسکریپت فقط کد تابعی را که روی آن قرار دارد اجرا می کند بالای پشته، و هنگامی که یک تابع نهایی می شود و مقدار آن را برمی گرداند، موتور تابع را از پشته تماس حذف می کند و شروع به کار در مورد بعدی می کند.

زمانی که پشته تماس خالی است، موتور جاوا اسکریپت به اجرای کد در زمینه جهانی بعدی ادامه می دهد، یا همان چیزی است که به اجرای خطوطی که در داخل هستند ادامه می دهد ریشه فایل جاوا اسکریپت و به هیچ تابعی تعلق ندارند.

بیایید چند نمونه را خط به خط ببینیم:

const num1 = 2;
const num2 = 5;

function sum(a, b){
return a + b;
}

const result= sum(num1, num2);
console.log(result) // 7

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

این یک کد بسیار ساده است که 2 ثابت (num1 و num2) را تعریف می کند و سپس یک تابع را تعریف می کند. مجموع که 2 عدد را جمع می کند و نتیجه حاصل را برمی گرداند. در نهایت، ثابت نتیجه ایجاد می شود، و نتیجه اجرای مجموع با استدلال ها num1 و num2 به آن اختصاص داده شده است. سپس ارزش نتیجه روی کنسول چاپ شده است.

اگر فکر می کنید که توضیح قبلی خیلی ساده یا خیلی پیچیده است و چیزی را توضیح نمی دهد، لطفا با من تحمل کنید، داریم به چیزهای جالب می رسیم.

بیایید ببینیم موتور جاوا اسکریپت چه می کند، خط به خط. در خط اول موتور یک برچسب ایجاد می کند num1 و فروشگاه ها در حافظه ارزش 2.

const num1 = 2;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

خط دوم همین کار را برای برچسب انجام می دهد num2. یک برچسب ایجاد می کند num2 و مقدار را در حافظه ذخیره می کند 5.

const num2 = 5;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

این بدان معنی است که هر زمان که کسی در داخل گستره جهانی نیاز به ارزش دارد num2 موتور در حال رفتن به برچسب را تغییر دهید و مقدار را قرار دهید 5 در عوض.

بیایید با خط بعدی ادامه دهیم. خط بعدی است تابع مجموع. به نظر شما موتور قرار است چه کار کند؟ آیا فکر می کنید که این تابع را اجرا می کند یا آن را به پشته تماس اضافه می کند؟ نه! کاری که موتور قرار است انجام دهد این است یک برچسب جدید ذخیره کنید نامگذاری شده است مجموع و کد را در داخل براکت ها در حافظه ذخیره کنید. یا همان چیزی است که آن را ذخیره می کند تعریف تابع و آن را به مجموع برچسب.

function sum(a, b){
return a + b;
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

اگر می توانستیم بصری حافظه را ببینید از کدهایی که تاکنون اجرا کرده‌ایم، چیزی شبیه به این خواهیم دید:

نام برچسب
ارزش در حافظه

num1
2

num2
5

مجموع
تعریف تابع

خط بعدی a است واقعا یکی جالب هنگامی که موتور جاوا اسکریپت به خط بعدی می رسد، برچسب را ایجاد می کند نتیجه، اما در این مرحله، هنوز نمی داند چه مقداری باید به برچسب اختصاص داده شود چون مقدار نتیجه اجرای یک تابع است، بنابراین ابتدا باید تابع را اجرا کند، هر کاری را که تابع باید انجام دهد و نتیجه را از مقدار برگشتی دریافت کنید.

const result= sum(num1, num2);

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

در این مرحله، موتور تابع را به پشته تماس اضافه می کند و همچنین a ایجاد می کند زمینه اجرای جدید، که جدید است فضایی در حافظه بودند جاوا اسکریپت می تواند مقدار args و هر ویژگی دیگری را که در داخل تابع است بدون برخورد با زمینه جهانی ذخیره کند.

اول از همه، موتور برچسب ها را در حافظه ایجاد می کند الف و ب که نام هایی است که به پارامترها داده می شود و مقدار آرگومان ها را تعیین می کند 2 و 5 به ترتیب.

اگر می‌توانستیم حافظه را در این لحظه خاص ببینیم، چیزی شبیه به این می‌بینیم:

نام برچسب
ارزش در حافظه

الف
2

ب
5

بازگشت
2 + 5 = 7

در این حالت، تابع واقعاً ساده است و فقط مقدار the را برمی‌گرداند مجموع بین الف و ب، بنابراین موتور پارامترها را با مقادیر آرگومان ها جایگزین می کند و مقدار را به زمینه اجرای جهانی برمی گرداند. در نهایت، تابع از پشته تماس حذف می شود، و فقط زمینه جهانی باقی مانده است.

در این مرحله، نتیجه تابع به برچسب اختصاص داده می شود نتیجه و ما می توانیم مقدار را در کنسول با گزارش کنسول چاپ کنیم.

بیایید نگاهی بیندازیم که اکنون حافظه جهانی چگونه به نظر می رسد:

نام برچسب
ارزش در حافظه

num1
2

num2
5

مجموع
تعریف تابع

نتیجه
7

توجه کردی؟ برچسب نتیجه دارای ارزش است 7? و همچنین مجموع هنوز تعریف تابع را در داخل دارد.

بیایید نگاهی به کد بعدی بیاندازیم:

const num1 = 2;
const num2 = 5;

function sum(a, b){
return a + b;
}

const result= sum(num1, num2);
console.log(result) // 7

function sumThreeNumbers = (x,y,z) => {
return sum(x, y) + z
}

const result2 = sumThreeNumbers(4,6,2)
console.log(result2) // 12

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

تفاوت اصلی این است که اکنون ما یک جدید داریم sumThreeNumbers تابع و ما در حال ایجاد یک جدید هستیم نتیجه 2 ثابت و تعیین مقدار اجرای تابع sumThreeNumbers با استدلال ها، 4، 6 و 2.

بیایید نگاهی به هنگام اجرای توابع تو در تو، پشته تماس چگونه کار می کند.

اگر وقتی ثابت را تعریف می کنیم به خط می پریم نتیجه 2 حافظه جهانی چیزی شبیه به این خواهد بود:

نام برچسب
ارزش در حافظه

num1
2

num2
5

مجموع
تعریف تابع

نتیجه
7

sumThreeNumbers
تعریف تابع

درست مانند مثال قبلی، موتور جاوا اسکریپت نمی داند چه مقداری را به آن اختصاص دهد به برچسب نتیجه 2برای بدست آوردن ارزش، ابتدا باید تابع را اجرا کند sumThreeNumbers با استدلال ها تابع است به پشته تماس اضافه شد، و یک زمینه اجرایی جدید ایجاد می شود. متن اجرا به شکل زیر است:

نام برچسب
ارزش در حافظه

x
4

y
6

z
2

بنابراین اولین کاری که جاوا اسکریپت انجام می دهد این است که برچسب های پارامتر را ایجاد می کند و مقدار ارائه شده توسط آرگومان ها را اختصاص می دهد.

حالا بیایید نگاهی به پشته تماس خود بیندازیم

پشته تماس

sumThreeNumbers

جهانی

همانطور که می بینید، پشته تماس فقط دارای این است sumThreeNumbers مورد (به غیر از زمینه جهانی که همیشه وجود دارد).

برای اینکه بتوانیم مقدار نتیجه را بدست آوریم، مجموع تابع باید اجرا شود اول، بنابراین موتور خواهد شد تابع را به پشته تماس اضافه کنید و یک زمینه اجرایی جدید برای تابع sum ایجاد کنید.

پشته تماس

مجموع

sumThreeNumbers

جهانی

همانطور که تابع جمع روشن است بالای پشته تماس، جاوا اسکریپت نیاز دارد اجرا کنید مجموع اول بتوانید به دویدن ادامه دهید sumThreeNumbers.

به این صورت است که زمینه اجرای مجموع تابع را می بینید:

نام برچسب
ارزش در حافظه

الف
4

ب
6

بازگشت
4 + 6 = 10

همانطور که می دانید، _10 _ برمی گردد و از پشته تماس حذف می شود

پشته تماس

sumThreeNumbers

جهانی

جاوا اسکریپت به اجرای آن ادامه می دهد sumThreeNumbers و زمینه اجرا به شکل زیر خواهد بود:

نام برچسب
ارزش در حافظه

x
4

y
6

z
2

بازگشت
10 + 2 = 12

مقدار را برمی گرداند 12 و از پشته تماس حذف شود.

سپس مقدار 12 به ملک واگذار خواهد شد نتیجه 2 و ارزش 12 در کنسول نمایش داده خواهد شد.

امیدوارم این پست به درک شما کمک کرده باشد پشته فراخوانی جاوا اسکریپت چگونه کار می کنداگر چنین است لطفا نظر و لایک کنید. من تو را در بعدی می بینم!

const num1 = 2;
const num2 = 5;

function sum(a, b){
return a + b;
}

const result= sum(num1, num2);
console.log(result) // 7

const num1 = 2;

const num2 = 5;

function sum(a, b){
return a + b;
}

const result= sum(num1, num2);

const num1 = 2;
const num2 = 5;

function sum(a, b){
return a + b;
}

const result= sum(num1, num2);
console.log(result) // 7

function sumThreeNumbers = (x,y,z) => {
return sum(x, y) + z
}

const result2 = sumThreeNumbers(4,6,2)
console.log(result2) // 12