Execution Context في JavaScript — إيه اللي بيحصل وراء الكود؟

أولاً — قبل أي حاجة، خلينا نفهم المشكلة

لما بتكتب كود JavaScript وبتشغله، بتحس إن في "حاجة ما" بتشغل الكود ده وبتتحكم فيه. مش بس "بيتنفذ وخلاص"، لأ — في نظام كامل شغال في الخفاء

الـ Execution Context ده هو الجواب على السؤال ده.

بكل بساطة: الـ Execution Context هو البيئة اللي بيتشغل فيها الكود.

تخيله زي أوضة فيها كل حاجة محتاجها عشان تشتغل — متغيراتك، الـ functions بتاعتك، وقيمة this. كل مرة JavaScript بتشغل كود، بتعمل أوضة جديدة وبتدخل جوّاها.

 

في كام نوع من الـ Execution Context؟

 

1. Global Execution Context (GEC)

 

ده اللي بيتعمل أول ما الكود يبدأ يشتغل. في المتصفح بيبقى window، في Node.js بيبقى global. في البرنامج كله بيكون في GEC واحد بس.

2. Function Execution Context (FEC)

كل مرة بتستدعي function، JavaScript بتعمل Execution Context جديد خصيصاً لها. يعني لو عندك 3 functions واستدعيتهم، هيتعملوا 3 contexts مختلفة.

3. Eval Execution Context

ده خاص بالـ eval() function اللي مش بنستخدمها عادةً — فمتقلقش منه دلوقتي.

 

إزاي الـ Execution Context بيتعمل؟

 

أي Execution Context بيمر بـ مرحلتين:

المرحلة الأولى — Creation Phase (مرحلة التجهيز)

 

قبل ما أي سطر كود يتشغل، JavaScript بتعمل التالي:

بتحجز مكان للمتغيرات (وبتديها قيمة undefined مبدئياً)

بتحط الـ functions كاملة في الذاكرة

بتحدد قيمة this

مثال:

console.log(myName); // undefined مش error!

console.log(sayHello); // بتطبع الـ function كاملة!

var myName = "أحمد";

function sayHello() {

  console.log("أهلاً!");

}

ليه myName طلعت undefined ومش error؟ لأن في مرحلة التجهيز، JavaScript شافت إن في متغير اسمه myName وحجزتله مكان، بس ما حطتش فيه القيمة بعد. الظاهرة دي اسمها Hoisting.

 

المرحلة التانية — Execution Phase (مرحلة التنفيذ)

دلوقتي JavaScript بتبدأ تشغل الكود سطر بسطر وبتحط القيم الصح في المتغيرات.

var myName = "أحمد"; // دلوقتي اتحطت القيمة

console.log(myName); // “أحمد”

 

الـ Call Stack — الموضوع بيتعمق

 

عشان JavaScript تتابع "أنا دلوقتي جوّا إيه؟"، بتستخدم حاجة اسمها Call Stack.

تخيل Call Stack زي كومة صحون. كل مرة بتدخل function، بتحط صحن فوق. لما الـ function تخلص، بتشيل الصحن من فوق.

مثال عملي:

function multiply(a, b) {

  return a * b;

}

function square(n) {

  return multiply(n, n);

}

function printSquare(n) {

  var result = square(n);

  console.log(result);

}

printSquare(5);

 

إيه اللي بيحصل خطوة بخطوة؟

1. Global EC يتحط في الـ Stack
2. printSquare(5) اتستدعت → printSquare EC يتحط فوق
3. جوّاها استدعت square(5) → square EC يتحط فوق
4. جوّاها استدعت multiply(5, 5) → multiply EC يتحط فوق
5. multiply رجعت 25 → اتشالت من الـ Stack
6. square رجعت 25 → اتشالت من الـ Stack
7. printSquare طبعت 25 واتشالت من الـ Stack
8. فضل بس الـ Global EC

| multiply EC   |  ← فوق

| square EC     |

| printSquare EC|

| Global EC     |  ← تحت

الـ Scope — وعلاقته بالـ Execution Context

كل Execution Context عنده Scope Chain — يعني بيقدر يوصل للمتغيرات بتاعته، وكمان للمتغيرات اللي في الـ context اللي فوقه (اللي عمله).

var name = "سارة"; // في الـ Global EC

function greet() {

  var greeting = "أهلاً"; // في الـ greet EC بس

  console.log(greeting + " " + name); // ← بيوصل لـ name من الـ Global

}

greet(); // “أهلاً سارة”

console.log(greeting); // ❌ Error! greeting مش موجودة في الـ Global

الـ greet function تقدر تشوف name من الـ Global، لأنها "جوّاها". بس الـ Global مش تقدر تشوف greeting لأنها جوّا الـ function.

 

مثال شامل يجمع كل الكلام

 

var x = 10;

function add(a, b) {

  var result = a + b;

  return result;

}

function calculate() {

  var y = 20;

  var total = add(x, y);

  console.log(total);

}

calculate(); // 30

 

اللي بيحصل:

 

1. Global EC يتعمل:

• x = undefined (Creation Phase)
• add و calculate اتحطوا كاملين في الذاكرة
• بعدين x = 10 (Execution Phase)

1. calculate() اتستدعت:

• calculate EC يتعمل
• y = undefined (Creation)، بعدين y = 20 (Execution)
• استدعت add(10, 20)

1. add() اتستدعت:

• add EC يتعمل
• a = 10، b = 20، result = undefined (Creation)
• result = 30 (Execution)
• رجعت 30 واتشالت من الـ Stack

 

1. calculate طبعت 30 واتشالت
2. فضل الـ Global EC بس

 

الخلاصة — اللي لازم تفتكره