ทำความเข้าใจกับ JavaScript Call Stack ผ่านภาพประกอบ
กล่าวอย่างง่ายที่สุด call stack คือ stack ที่ควบคุมลำดับการดำเนินการของฟังก์ชัน นั่นแหละ. เป็นกลไกที่ควบคุมว่าฟังก์ชันใดจะถูกดำเนินการและเมื่อใด
Stack เป็นโครงสร้างข้อมูลแบบ LIFO — Last in, first out ซึ่งหมายความว่าฟังก์ชันสุดท้ายที่ป้อนใน call stack จะเป็นฟังก์ชันแรกที่ดำเนินการ
ฟังก์ชันจะเข้าไปอยู่ใน call stack ได้อย่างไร
เมื่อโค้ดได้รับการประเมิน การดำเนินการตามฟังก์ชันแต่ละรายการจะเข้าสู่ call stack อีกคำถามที่น่าสนใจ (น่าสนใจยิ่งกว่า) คือ ฟังก์ชันจะออกจาก call stack เมื่อใด ที่จะเกิดขึ้นหลังจากการดำเนินการของฟังก์ชันทั้งหมดที่ถูกทริกเกอร์ (ถ้ามี) เสร็จสิ้น และเมื่อบรรทัดของโค้ดทั้งหมดภายในนั้นได้รับการประเมินแล้วเท่านั้น
คดีเล็กน้อย
ในกรณีนี้ เราจะเห็นว่าแต่ละฟังก์ชันจะเสร็จสมบูรณ์เมื่อบรรทัดของโค้ดข้างในถูกดำเนินการทั้งหมด
กรณีที่น่าสนใจมากขึ้น
ในกรณีนี้ เราจะเรียกใช้ฟังก์ชันจากภายในฟังก์ชันอื่น
สิ่งที่เราจะเห็นใน call stack ในกรณีนี้คือ:
ในตัวอย่างนี้ เราสามารถเข้าใจคำว่า 'กอง' ได้ดีขึ้น ด้วยการเรียกใช้ฟังก์ชันภายในฟังก์ชันอื่น เราจึงเห็นได้ว่า 'กล่อง' เหล่านั้นวางซ้อนทับกันและสร้าง 'กล่อง' ซ้อนกันอย่างไร
แต่ละกล่องรันโค้ดที่อยู่ภายใน หากมีการเรียกใช้ฟังก์ชัน 'กล่อง' ใหม่จะถูกสร้างขึ้นภายใน หากมีคำสั่งง่ายๆ เช่น console.log คำสั่งนั้นจะถูกเรียกใช้งาน เมื่อรันโค้ดทั้งหมดเสร็จแล้ว 'กล่อง' จะออกจากสแต็ก
'กล่อง' เหล่านั้นคืออะไร?
ดีใจที่คุณถาม กล่องเหล่านี้เป็นบริบทการดำเนินการของฟังก์ชัน ทุกครั้งที่มีการเรียกใช้ฟังก์ชัน บริบทการดำเนินการฟังก์ชันใหม่จะถูกสร้างขึ้น บริบทการดำเนินการมีหน้าที่รับผิดชอบในการเก็บสมาชิกและการประกาศทั้งหมดที่ทำภายในฟังก์ชันหรือส่งผ่านไปยังมัน
ตัวอย่างนี้แสดงในภาพเคลื่อนไหวด้านบน ฟังก์ชันcallingToWitnessได้รับพารามิเตอร์witnessNumberพารามิเตอร์นี้ถูกเก็บไว้ในบริบทการดำเนินการ เราจะเห็นว่ามีการเรียกใช้ฟังก์ชันนี้หลายครั้ง แต่บริบทของฟังก์ชันจะแตกต่างกันในแต่ละครั้ง
ทำไมเราต้องการบริบทการดำเนินการเหล่านั้น
จะเกิดอะไรขึ้นหากเราพยายามพิมพ์สมาชิกที่ไม่ได้ประกาศในบริบทการดำเนินการของเรา มาดูกัน:
ดังนั้นบริบทการดำเนินการแรกคือบริบทการดำเนินการทั่วไปและเก็บโค้ดทั้งหมดที่อยู่นอกฟังก์ชันที่ประกาศไว้ ภายในนั้น เราจะเห็นบริบทการดำเนินการสำหรับการดำเนินการแต่ละฟังก์ชัน
ในตัวอย่างด้านบน เราจะเห็นว่าในขณะที่ เรียกใช้ฟังก์ชัน callWitnessบริบทการดำเนินการนั้นไม่มีสมาชิกชื่อJudgNameหรือProuderNameแต่หนึ่งในบริบทการดำเนินการก่อนหน้ามีสมาชิกเหล่านั้นอยู่
มาทำความเข้าใจ การทำงานของฟังก์ชัน callWitness กันดีกว่า :
- การพิมพ์whoAmI : พารามิเตอร์นี้ถูกประกาศในขอบเขตการดำเนินการของฟังก์ชัน และในบริบทการดำเนินการของบรรพบุรุษแต่ละรายการ มันจะถูกอ่านจากบริบทการดำเนินการของฟังก์ชัน เราจะมองหาบริบทการดำเนินการที่ใกล้เคียงที่สุดเสมอซึ่งมีการประกาศสมาชิก ซึ่งในกรณีนี้คือบริบทการดำเนินการของฟังก์ชันปัจจุบัน
- การพิมพ์proxyName : พารามิเตอร์นี้ไม่ได้ถูกประกาศในฟังก์ชันเอง เราเห็นได้ว่ามีการประกาศใน ฟังก์ชัน การฟ้องร้องนี่คือบริบทการดำเนินการที่เรียกใช้ฟังก์ชันของเรา ดังนั้นฟังก์ชันของเราจึงสามารถอ่านสมาชิกของมันได้
- การพิมพ์JudgName : พารามิเตอร์นี้ก็เช่นกัน ไม่ได้ประกาศในฟังก์ชันเอง มันถูกประกาศในบริบทการดำเนินการทั่วไปซึ่งเป็นหนึ่งในบรรพบุรุษของหน้าที่ของเรา ดังนั้นจึงสามารถอ่านสมาชิกของมันได้
ฉันหวังว่าตัวอย่างที่ให้มาจะช่วยให้คุณเข้าใจ call stack ลำดับการดำเนินการ และพารามิเตอร์ที่มีให้สำหรับโค้ดที่ดำเนินการในปัจจุบันได้ดียิ่งขึ้น ตอนนี้คุณควรมีพื้นฐานที่แข็งแกร่งสำหรับการทำความเข้าใจบริบทการดำเนินการและลำดับที่โค้ดถูกเรียกใช้





































![รายการที่เชื่อมโยงคืออะไร? [ส่วนที่ 1]](https://post.nghiatu.com/assets/images/m/max/724/1*Xokk6XOjWyIGCBujkJsCzQ.jpeg)