ไหนๆวันนี้ก็เป็นวันวาเลนไทน์ของใครหลายๆคนแล้วแต่สำหรับผมมันก็แค่วันพฤหัสบดีที่แสนธรรมดา... เอาเวลาที่อิจฉาคนมีคู่มาเขียนบทความดีกว่า =__+' สวัสดีครับกลับมาผมกับผมต้าคนเดิมคนดี วันนี้ผมรู้สึกคึ้กไปอ่านเรื่อง execution context กับ execution stack มาครับก็เลยมาเล่าให้ฟังครับ เริ่ม~~~

ขอเกริ่นก่อนว่ามันคือ Stack ใน data structure นั้นเองครับทีนี้มาเข้าเรื่องกันเลยดีกว่า

Execution Context

มันคือสภาพแวดล้อมสำหรับ Javascript ครับ สำหรับ running process ทั้งหมดโดยตัว execution context จะถูกแบ่งออกเป็น 3 ตัวครับ ตามนี้เลย

Global => เหมือนกับก้อน object ใหญ่ๆที่เก็บ function สำคัญๆเอาไว้ ถ้านึกไม่ออกก็คือมันคือ window หรือ this ใน javascript นั้นแหล่ะครับ

Functional => มันจะถูกสร้างเมื่อมีการเรียกใช้ function ครับ

Eval => ตัวนี้จะถูกสร้างก็ต้องเมื่อเรียกใช้ eval()

ตอนนี้ทุกคนก็พอรู้จัก execution context ในรูปแบบต่างๆแล้วนะครับ มาต่อกันที่ execution stack กันเลย 1 2 ฮึ้บ...

Execution Stack

ก่อนอื่นผมขออธิบายคร่าวๆเรื่อง stack ก่อนนะครับซึ่ง stack มันมี operation 2 อันคือ push กับ pop ซึ่งเป็นโครงสร้างการเก็บข้อมูลแบบนึงที่เป็นการทำงานแบบ LIFO(last in first) คือการเข้าทีหลังออกก่อนนั้นเอง ถ้าทุกคนยังไม่เข้าใจอยู่ ปริ้งภาพมา~~~

แค่รูปนี้ทุกคนคงเข้าใจกันแล้ว ง่ายๆเลยคือ push คือการเพิ่มข้อมูลไว้บนสุดส่วนเจ้า pop คือการเอาข้อมูลที่อยู่บนสุดออกไปครับ ตัว Execution stack คือการที่เราเอาการเรียก function ไปเก็บลง stack นั้นเองครับเพื่อรอให้เจ้านายเรียกไปใช้งานนั้นเอง มันเป็นทำนองคลองเดียวกันเลยครับ ลองมาดูโค๊ดตัวอย่างพร้อมรูปภาพการทำงานกันเลยครับ

let a = 5;
let b = 10
function add(x,y){
  return x + y;
}

const c = add(a,b);

ทุกคนจะเห็นว่าตัว add() จะถูกเก็บลง call stack ก่อนเพื่อรอเจ้านาย(Global execution) เรียกใช้งานหลังจากนั้น add() ก็ถูกเรียกใช้ครับ เอ๊ะ! ผมลืมบอกว่า function, variable จะถูกเก็บลง global memory ไว้ก่อนนะครับ มาต่อที่ภาพที่สองกันเลย

หลังจากที่ตัว global execution ได้ทำการใช้งานทาส add() เป็นที่สำเร็จเสร็จสิ้นแล้ว พี่ global ส่งผลลัพธ์ไปเก็บที่ตัวแปร C ใน global memory เพื่อใช้งานต่อไป

ก็จบไปแล้วสำหรับบทความนี้ถ้าใครค้างคาใจกับมาเรื่องก็มาคุยกับพวกเราได้ที่ Fanpage ได้นะครับ สำหรับวันนี้ก็ของลาไปก่อน สวัสดีวันวาเลนไทน์ครับ

Ref:

Execution context and stack

What Is The Execution Context?