JavaScript ทำงานเบื้องหลังอย่างไร

เรามาเจาะลึกและทำความเข้าใจการทำงานของ JavaScript ภายในเอ็นจิ้นเบราว์เซอร์กัน:

อย่างที่เราทราบกันดีว่าJavaScript เป็นภาษาการเขียนโปรแกรมแบบเธรดเดี่ยวระดับสูงที่ใช้ต้นแบบเชิงวัตถุ ตีความหรือคอมไพล์แบบทันเวลา พร้อมฟังก์ชันระดับเฟิร์สคลาสและโมเดลการทำงานพร้อมกันของลูปเหตุการณ์ที่ไม่ปิดกั้น

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

ภาพรวม

บล็อกโพสต์นี้เป็นมิตรกับผู้เริ่มต้น และยังมีประโยชน์สำหรับนักพัฒนา JS ที่มีประสบการณ์อีกด้วย
เราจะพูดถึงแนวคิดเหล่านี้อย่างละเอียดและอธิบายว่า JavaScript ทำงานอย่างไร

ในโพสต์นี้ เราจะพูดถึงบริบทการดำเนินการ (ขั้นตอนการสร้างหน่วยความจำและขั้นตอนการดำเนินการโค้ด) การดำเนินการของ CallStack และเครื่องมือ JavaScript และสภาพแวดล้อมรันไทม์ นอกจากนี้ เข้าใจแนวคิดของ Event loop และ Stack Flow

นี่จะเป็นภาพรวมขององค์ประกอบหลักทั้งหมดที่เกี่ยวข้องกับการดำเนินการของสคริปต์
ที่นี่เราจะหารือเกี่ยวกับส่วนประกอบต่อไปนี้:

1. เครื่องมือจาวาสคริปต์
2. สภาพแวดล้อมรันไทม์ของ JavaScript
3. บริบทการดำเนินการ
4. เรียกใช้ Stack Execution & Stack Flow
5. วนรอบเหตุการณ์

ดังที่คุณอาจเคยได้ยินมาก่อนว่า JavaScript เป็น ภาษาการเขียนโปรแกรม แบบตีความ หมายความว่าซอร์สโค้ดไม่ได้ถูกคอมไพล์เป็นไบนารี่โค้ดก่อนดำเนินการ
ซึ่งหมายความว่าจะดำเนินการทีละบรรทัดแต่ไม่เป็นความจริง 100%
JS เป็นภาษาคอมไพล์แบบทันเวลาพอดี (JIT) พฤติกรรมสมัยใหม่นี้ทำให้รวดเร็วในเว็บแอปพลิเคชัน มิฉะนั้น ตามประเภทที่ตีความ มันทำให้แอปพลิเคชันแสดงผลช้า ดังนั้นเราจึงถือว่าJS เป็นภาษาคอมไพล์แบบ Just-in-time (JIT)

เอ็นจิ้น JavaScript เป็นเพียงโปรแกรมคอมพิวเตอร์ที่รันโค้ด JavaScript เครื่องมือ JavaScript ถูกฝังอยู่ในเบราว์เซอร์สมัยใหม่ทั้งหมดในปัจจุบัน

ชอบ : (มีไม่กี่เอ็นจิ้น)
# V8 เป็น JavaScript Engine สำหรับ Chrome
# ลิงแมงมุมสำหรับ Mozilla Firefox
# Chakra สำหรับ Microsoft Edge
# แกน JavaScript สำหรับ Safari และอื่น ๆ

อย่างที่เราทราบกันดีว่า Chrome browser engine “V8” นั้นเป็นที่นิยมมากสำหรับ JavaScript
มันประกอบด้วย 2 องค์ประกอบหลัก:
1: Call Stack ( ค่อย คุยกันในรายละเอียดในภายหลัง ใจเย็นๆ.. )
2: Heap : เป็นพื้นที่หน่วยความจำที่ไม่มีโครงสร้างซึ่งมีวัตถุที่มีประโยชน์ทั้งหมดอยู่ เก็บไว้

ท่า JavaScript Runtime Environment (JRE) :

ตามที่เราคุยกันเกี่ยวกับเครื่องยนต์ JS แต่เครื่องยนต์ JS- ทำงานภายใน JRE พร้อมกับส่วนประกอบอื่นๆ เช่นเดียวกับคำขอและการโทรแบบอะซิงโครนัส
ส่วนประกอบมีการระบุไว้เป็น:

1. เจ เอส เอ็นจิ้น
2. API ของเว็บ
3. คิวโทรกลับหรือคิวข้อความ
4. วนรอบเหตุการณ์

เมื่อโค้ด JS ถูกรันบริบทการดำเนินการส่วนกลาง (GEC)จะถูกสร้างขึ้น
การดำเนินการนี้สร้างขึ้นใน 2 เฟส:
1: เฟสการสร้างหน่วยความจำ &
2: เฟสการดำเนินการโค้ด

ลองมาตัวอย่าง ;

สำหรับข้อมูลโค้ดด้านบนนี้
ขั้นแรกGEC จะถูกสร้างขึ้น & ซึ่งเฟสหน่วยความจำจะถูกสร้างขึ้นและกำหนดค่าที่ไม่ได้กำหนดสำหรับตัวแปรทั้งหมด & ใส่บล็อกฟังก์ชันทั้งหมด {}เป็นค่า fnxn ในพื้นที่หน่วยความจำ

อย่างที่สอง ตอนนี้อยู่ในเฟสที่ 2 คือขั้นตอนการรันโค้ดมันจะเริ่มผ่านโค้ดทั้งหมดทีละบรรทัด
และพบว่า var a = 3 จึงกำหนด3 ให้กับตัวแปรที่ไม่ได้กำหนดและ
เลื่อนไปยังบรรทัดถัดไปและกำหนด4 ให้กับตัวแปร bซึ่งไม่ได้กำหนด ตอนนี้ย้ายไปที่บรรทัดถัดไปสำหรับฟังก์ชัน add() ไม่มีอะไรต้องดำเนินการ ดังนั้นมันจึงยังคงเหมือนเดิม และย้ายไปที่บรรทัดถัดไปสำหรับvar c

ที่บรรทัดนี้บริบทการดำเนินการใหม่จะถูกสร้างขึ้น ชื่อเป็นบริบทการดำเนินการในเครื่องสำหรับฟังก์ชัน add(3,4)ตอนนี้สร้าง 2 เฟสอีกครั้ง
สำหรับเฟสการสร้างหน่วยความจำจะกำหนดundefinedสำหรับตัวแปร num1, num2 & result จากนั้นในขั้นตอนการเรียกใช้โค้ดจะเริ่มทีละบรรทัดในบล็อกฟังก์ชัน { } ของ add()
พบการกำหนด 3 สำหรับ num1 & 4 สำหรับ num2
จากนั้นสำหรับ var result = num1+num2 และกำหนด 7 เป็นตัวแปรผลลัพธ์
หลังจากนั้นส่งคืนผลลัพธ์ และการควบคุมการดำเนินการจะย้ายกลับไปที่บรรทัดที่ 9 ที่
var c = 7

เมื่อ พบคีย์เวิร์ด returnจะส่งคืนการควบคุมไปยังบรรทัดที่เรียก และบริบทการทำงานของฟังก์ชันจะถูกลบด้วย
มันย้ายไปที่บรรทัดถัดไป บรรทัดที่ 10 : มันปลอบใจค่าของ c

นี่คือบริบทของการดำเนินการจริงที่ทำงานอยู่เบื้องหลัง

Javascript จัดการการสร้างและลบบริบทการดำเนินการโค้ดด้วยความช่วยเหลือของCall Stack (เราจะพูดถึงในภายหลังใน call stack )

กองโทร:

Call Stack รักษาลำดับการดำเนินการของบริบทการดำเนินการ เรียกอีกอย่างว่า Program Stack, Control Stack, Runtime stack, Machine Stack, Execution context stack
และเรารู้ว่า JS เป็นภาษาการเขียนโปรแกรมแบบเธรดเดียวหมายความว่ามีสแต็กเดียวและรันทีละบรรทัด

เพียงแค่ใช้การอ้างอิงโค้ดด้านบนและอธิบายว่า Call stack ทำงานอย่างไรสำหรับข้อมูลโค้ดเดียวกัน

ที่นี่ GEC สร้างขึ้นและอยู่ในสแต็ก จากนั้นบริบทการดำเนินการในเครื่องถัดไปจะปรากฏขึ้นในสแต็ก จากนั้นหลังจากดำเนินการ บริบทดังกล่าวจะเด้งออกและกลับไปที่ GEC
จากนั้น console.log(c) จะปรากฏขึ้นและหลังจากดำเนินการ ป๊อปอัปจากนั้น pinter กลับไปที่ GEC
หลังจากดำเนินการเสร็จสิ้น GEC ก็จะเด้งออกจากสแต็กและสแต็กจะว่างเปล่าเป็นเงื่อนไข IDLE

วนรอบเหตุการณ์:

ภาษาจาวาสคริปต์สามารถเห็นได้สองแบบ — ซิงโครนัสและอะซิงโครนัส

ใน JS แบบซิงโครนัส โค้ดจะดำเนินการทีละบรรทัด ซึ่งหมายถึงในลักษณะที่เป็นลำดับ และ
ใน JS แบบอะซิงโครนัส ไม่มีอะไรที่เป็นลำดับ ซึ่งหมายความว่าโค้ดหลายบรรทัดจะถูกละเว้นและดำเนินการในภายหลังตามพฤติกรรมที่ส่วนใหญ่เรียกว่า API ของเว็บ

ดังนั้น event loop จึงใช้เพื่อจัดการกับ async part ด้วยการเรียกกลับคิว และรอให้สแต็กว่างแล้วจึงส่งไปยังสแต็กเพื่อดำเนินการ

Event Loop เป็นคุณสมบัติใน JS ซึ่งจะตรวจสอบอย่างต่อเนื่องว่าสแต็กหลักว่างเปล่าหรือไม่ และเมื่อว่างก็จะตรวจสอบคิวการโทรกลับ หากมีรหัสในคิวที่ต้องดำเนินการ รหัสเหล่านั้นจะถูกโอนทีละรหัสไปยัง call stack หลังจากดำเนินการโค้ดแล้ว จะออกจากสแต็กและอันถัดไปในคิวจะขึ้นมาจนกว่าคิวจะว่าง

พวกเรามาสรุปสิ่งต่างๆและติดตามคุณในโพสต์ต่อไป……….