Execution Context چیست

1. تعریف Execution Context:

هر زمان که جاوااسکریپت شروع به اجرای یک قطعه کد (مانند یک تابع یا اسکریپت کلی صفحه) می‌کند، Execution Context جدیدی ایجاد می‌شود. این مفهوم شبیه به فضایی است که جاوااسکریپت برای اجرای کد از آن استفاده می‌کند و شامل متغیرها، توابع و قوانین دسترسی می‌شود.

2. انواع Execution Context:

جاوااسکریپت دو نوع اصلی Execution Context دارد:

Global Execution Context (زمینه اجرای سراسری):

• این زمینه اولین و مهم‌ترین نوع است که توسط موتور جاوااسکریپت هنگام شروع اسکریپت ایجاد می‌شود.
• در این زمینه، تمام متغیرها و توابع سراسری تعریف و مدیریت می‌شوند.
• در محیط مرورگر، این زمینه به شیء window متصل است.

Function Execution Context (زمینه اجرای تابع):

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

3. مراحل ایجاد Execution Context:

هر Execution Context دارای سه مرحله اصلی است:

Creation Phase (مرحله ایجاد):

• جاوااسکریپت ابتدا محیط Lexical (دایره لغات) را برای کد ایجاد می‌کند.
• تمام متغیرها، توابع و آرگومان‌ها شناسایی و فضا برای آن‌ها رزرو می‌شود، اما مقداردهی اولیه صورت نمی‌گیرد (برای متغیرها undefined تنظیم می‌شود).

Execution Phase (مرحله اجرا):

• در این مرحله، جاوااسکریپت کد را خط به خط اجرا می‌کند و متغیرها را مقداردهی می‌کند.

Cleaning Phase (مرحله پاک‌سازی):

• وقتی اجرای یک تابع به پایان می‌رسد، جاوااسکریپت زمینه اجرای آن تابع را از حافظه پاک می‌کند.

4. Component های Execution Context:

هر Execution Context سه بخش دارد:

1. Variable Object (VO): حاوی متغیرها، توابع و آرگومان‌های تابع است.
2. Scope Chain: زنجیره‌ای از محدوده‌ها که به جاوااسکریپت امکان دسترسی به متغیرها را می‌دهد.
3. this Binding: مقادیر this را مدیریت می‌کند که به شیء یا عنصر خاصی اشاره می‌کند.

مثال ساده:

 

var name = 'Ali';  // Global Execution Context

 

function greet() { 

    var greeting = 'Hello';  // Function Execution Context

    console.log(greeting + ' ' + name);

}

 

greet();  // خروجی: Hello Ali

در این مثال:

• اول Global Execution Context ایجاد می‌شود که شامل متغیر name است.
• سپس با فراخوانی تابع greet، یک Function Execution Context جدید ایجاد می‌شود که متغیر محلی greeting در آن قرار دارد.

اگر مفهوم Execution Context را به خوبی درک کنی، به راحتی می‌توانی مسائلی مانند Hoisting، Closure و this را بهتر بفهمی.