โพสต์นี้มีขึ้นเพื่อเจาะลึกแนวคิดจาวาสคริปต์ที่สำคัญบางส่วนเพื่อช่วยให้คุณเขียนโค้ดได้ดีขึ้น

หากคุณชอบโหมดมืด คุณสามารถอ่านบทความนี้ได้ที่นี่

callstack เป็น โครงสร้างข้อมูลแบบ LIFO ( Last In First Out ) ทุกครั้งที่เรียกใช้ฟังก์ชัน บริบทการดำเนินการจะถูกสร้างขึ้นและถูกผลักไปที่ด้านบนของ callstack เมื่อการดำเนินการเสร็จสิ้น บริบทการดำเนินการจะถูกดึงออกจากcallstack

Javascript เป็นภาษาแบบเธรดเดียว หมายความว่ามี call stack หนึ่งชุด ดังนั้นจึงทำได้ครั้งละหนึ่งอย่างเท่านั้น ตอนนี้สิ่งสำคัญอย่างหนึ่งที่ฉันต้องการพูดถึงอย่างรวดเร็วคือจาวาสคริปต์แบบอะซิงโครนัสเป็นไปได้เนื่องจากชุดของเบราว์เซอร์ apis เช่นคิวการโทรกลับ มันไม่ได้เป็นส่วนหนึ่งของภาษาจาวาสคริปต์

เมื่อเรียกใช้ฟังก์ชัน บริบทการดำเนินการจะถูกสร้างขึ้นและวางไว้บน callstack และเมื่อฟังก์ชันเสร็จสิ้น ฟังก์ชันนั้นจะถูกดึงออกจากสแต็ก

แต่ละรายการใน call stack เรียกว่าStack Frame

วิธีเพิ่มบริบทการดำเนินการลงในสแต็ก

ลองใช้ฟังก์ชั่นง่ายๆ:

function foo() {
  bar()
}

function bar() {
  console.log('bar')
}

foo()

      
                

                    
                    
                
            

มาดูกันว่าข้อผิดพลาดเหล่านั้นมีลักษณะอย่างไรที่เรามักจะพบในคอนโซลของเราเมื่อมีสิ่งผิดปกติ:

function foo() {
  bar()
}

function bar() {
  baz()
}

function baz() {
  throw new Error('this is an error')
}

foo()

เป่ากอง

สิ่งนี้เกิดขึ้นในบางครั้งด้วยการวนซ้ำหรือการเรียกซ้ำ และทั้งหมดนี้หมายความว่า callstack ล้น สิ่งนี้เกิดขึ้นเนื่องจากบริบทการดำเนินการถูกต่อท้ายและมีข้อ จำกัด

function foo() {
  foo()
}

foo()

ตัวอย่างสุดท้ายที่จะผลักดันจุดกลับบ้าน

ให้ความสนใจกับแต่ละสแต็กเฟรมในภาพประกอบด้านล่าง

function foo() {
  console.log('hi')
  bar()
  console.log('bye')
}

function bar() {
  console.log('bar')
  baz()
}

function baz() {
  console.log('baz')
}

foo()