درک اجرای جاوا اسکریپت با مقداری پیتزا

خوش آمدید ، توسعه دهندگان دیگر! من از حضور شما در اینجا برای قسمت بعدی سریال Deep Dive JavaScript ما هیجان زده ام. در مقاله قبلی مفاهیم اساسی و ویژگی های اصلی که جاوا اسکریپت را به یک زبان قدرتمند تبدیل می کند ، مورد بررسی قرار گرفت. اگر آن را از دست دادید نگران نباشید – می توانید اینجا را بدست آورید.

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

امروز ، ما یکی از جذاب ترین Aspectshow JS JavaScript را کشف خواهیم کرد. ما به پشت پرده نگاه خواهیم کرد تا بفهمیم چه اتفاقی می افتد وقتی کد JS ما هنگام پخت پیتزا ذرت پنیر اجرا می شود.

بنابراین مغز خود را از قبل گرم کنید (و شاید اجاق گاز) ، و بیایید به این ماجراجویی فنی خوشمزه شیرجه بزنیم!

موتور جاوا اسکریپت

اجرای کد JavaScript توسط برنامه ای معروف به موتور JavaScript یا JS Engine انجام می شود. درست مانند جاوا به JVM نیاز دارد ، JavaScript به موتور JSبشر همه مرورگرها و هر محیط دیگری که JavaScript را اجرا می کنند دارای موتور JS هستند ، با موتور V8 Google که این بسته را به عنوان نیروگاه پشت Chrome و Node.js. هدایت می کند. Firefox از SpiderMonkey استفاده می کند ، سافاری در JavaScriptcore و چند نفر دیگر اجرا می شود.

موتور JS دارای دو مؤلفه اصلی است – پشته تماس و پشته. در پشته تماس جایی است که کد اجرا می شود. از طرف دیگر ، پشته یک فضای حافظه بدون ساختار است که برای ذخیره اشیاء مورد نیاز کد در هنگام اجرای استفاده می شود. از اجرای JavaScript به عنوان پخت پیتزا فکر کنید. منطقه پخت و پز موتور شماست و پیشخوان پخت و پز پشته تماس شماست. فضای موجود در جایی که مواد خود را نگه می دارید پشته است.

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

پیش از این ، ما دیدیم که چگونه JavaScript از یک رویکرد ترکیبی هوشمندانه به نام JIT Collection استفاده می کند و بهترین تدوین و تفسیر را ترکیب می کند. در حالی که من تاپ های پیتزا خود را آماده می کنم ، بیایید زیر کاپوت نگاهی بیندازیم و ببینیم که چگونه ترکیب JIT در داخل موتور JS است.

تدوین به موقع

هنگامی که کد برای اولین بار به موتور می رسد ، اتفاق جالب می افتد. موتور شروع به تجزیه کد شما به قطعات معنی دار می کند. این کد را برای جدا کردن نشانه های جداگانه در JavaScript ، به عنوان مثال ، “const” ، “var” و “for” تجزیه می کند. اما در اینجا متوقف نمی شود. موتور سپس این قطعات را به یک تبدیل می کند درخت نحوی انتزاعی (AST) – روشی ساختاری برای موتور برای درک هدف کد شما. بیایید یک مثال ساده بگیریم: برای خط const a = 10;، در اینجا به نظر می رسد AST.

{
  "type": "Program",
  "start": 0,
  "end": 13,
  "body": [
    {
      "type": "VariableDeclaration",
      "start": 0,
      "end": 13,
      "declarations": [
        {
          "type": "VariableDeclarator",
          "start": 6,
          "end": 12,
          "id": {
            "type": "Identifier",
            "start": 6,
            "end": 7,
            "name": "a"
          },
          "init": {
            "type": "Literal",
            "start": 10,
            "end": 12,
            "value": 10,
            "raw": "10"
          }
        }
      ],
      "kind": "const"
    }
  ],
  "sourceType": "module"
}

در حال حاضر بیش از حد در مورد جزئیات AST نگران نباشید – اما اگر کنجکاو هستید که عمیق تر شیرجه بزنید ، این مقاله را بررسی کنید.

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

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

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

زمینه اعدام

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

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

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

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

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

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

اجرای کد در عمل

در اینجا دستور العمل پیتزا ما است. بیایید ببینیم موتور JS ما چگونه آن را پردازش می کند.

function prepareDough() {
    console.log("Step 1: Preparing Dough");
    console.log(" - 2 cups all-purpose flour");
    console.log(" - 1 tsp yeast");
    console.log(" - 1/2 tsp salt");
    console.log(" - 1 tsp sugar");
    console.log(" - 3/4 cup warm water");
    console.log(" - 1 tbsp olive oil");
    console.log("Step 2: Mixing ingredients and kneading the dough.");
    console.log("Step 3: Letting the dough rest for 1 hour.");
}

function prepareSauce() {
    console.log("Step 4: Preparing Tomato Sauce");
    console.log(" - 1/2 cup tomato puree");
    console.log(" - 1/2 tsp salt");
    console.log(" - 1/2 tsp oregano");
    console.log(" - 1/4 tsp black pepper");
    console.log(" - 1/2 tsp garlic powder");
    console.log("Step 5: Cooking sauce for 10 minutes.");
}

function prepareToppings() {
    console.log("Step 6: Preparing Toppings");
    console.log(" - 1/2 cup grated mozzarella cheese");
    console.log(" - 1/2 cup sweet corn");
    console.log(" - 1/4 cup chopped bell peppers (optional)");
}

function assemblePizza() {
    prepareDough();
    prepareSauce();
    prepareToppings();
    console.log("Step 7: Rolling out the dough into a pizza base.");
    console.log("Step 8: Spreading the sauce over the dough.");
    console.log("Step 9: Adding cheese, corn, and other toppings.");
}

function bakePizza() {
    assemblePizza();
    console.log("Step 10: Baking Pizza");
    console.log(" - Preheating oven to 220C (430F).");
    console.log(" - Baking for 12-15 minutes until golden brown.");
}

bakePizza();

هنگامی که موتور کد شما را کامپایل می کند ، با قرار دادن زمینه اجرای جهانی (GEC) در پشته تماس ، کارها را خاموش می کند. در مرحله اول ، موتور از طریق کد شما اسکن می شود و حافظه را برای تمام عملکردهای ساخت پیتزا خود کنار می گذارد: prepareDough()با prepareSauce()با prepareToppings()با assemblePizza()وت bakePizza()بشر وقتی به bakePizza() تماس بگیرید ، موتور زمینه جهانی را مکث می کند ، زمینه اجرای تازه ای را برای آن ایجاد می کند bakePizza()، و آن را به پشته تماس اضافه می کند.

به عنوان bakePizza() چشمه در عمل ، نیاز دارد assemblePizza() برای انجام کار خود موتور زمینه اجرای دیگری را ایجاد می کند که به پشته تماس می رود. حالا ، assemblePizza() با شروع می شود prepareDough() – بله ، شما آن را حدس زده اید ، یک زمینه اعدام دیگر به پشته می پیوندد! پس از ورود به مراحل آماده سازی خمیر و اتمام کار خود ، prepareDough() زمینه بررسی می کند و پشته را ترک می کند و کنترل را به آن باز می گرداند assemblePizza()بشر همان دنباله برای prepareSauce() وت prepareToppings() – هرکدام زمینه اعدام خود را بدست می آورند ، کار خود را با تاپ ها انجام می دهند و در صورت انجام پشته از آن خارج می شوند.

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

هنگامی که پشته تماس بالاخره خالی شد ، می دانیم که برنامه ساخت پیتزا سفر خود را به پایان رسانده است – همه کارکردها کارهای خود را انجام داده و به خانه برگشته اند. و با این کار ، پیتزا من آماده است.

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

بسته بندی!

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

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

آیا می خواهید متصل شوید؟ مرا دنبال کن:

یادگیری مبارک !! 😊🙏