ฟังก์ชัน, เธรด และการทำงานแบบ Asynchronous ใน JavaScript
คุณจำเป็นต้องเข้าใจว่า JavaScript ทำงานอย่างไรในเบื้องหลัง
นี่คือรายละเอียดของฟังก์ชัน, โปรเซส (processes), เธรด (threads) และรูปแบบการทำงาน (execution styles)
ประเภทของฟังก์ชันใน JavaScript
- Named Function: มีการใช้ชื่อเฉพาะ ซึ่งช่วยให้การดีบั๊ก (debugging) ทำได้ง่าย
- Anonymous Function: ไม่มีชื่อ มักใช้เป็น callback
- Function Expression: การกำหนดฟังก์ชันให้กับตัวแปร
- Arrow Function: ไวยากรณ์ที่สั้นลงโดยใช้สัญลักษณ์ =>
- IIFE: ย่อมาจาก Immediately Invoked Function Expression ซึ่งจะทำงานทันทีที่คุณกำหนดค่ามันขึ้นมา
Process vs. Thread
Process คือโปรแกรมที่กำลังทำงานบนคอมพิวเตอร์ของคุณ
- แต่ละ process จะมีหน่วยความจำ (memory) เป็นของตัวเอง
- หาก process หนึ่งค้างหรือหยุดทำงาน (crash) process อื่นๆ จะยังคงทำงานต่อไปได้
- ตัวอย่างเช่น Chrome และ Spotify คือคนละ process กัน
Thread คือหน่วยย่อยที่อยู่ภายใน process
- Threads จะใช้หน่วยความจำร่วมกัน
- ช่วยให้โปรแกรมเดียวสามารถทำงานหลายอย่างได้พร้อมกัน
- ตัวอย่างเช่น ภายใน Chrome เธรดหนึ่งจะทำหน้าที่เรนเดอร์หน้าเว็บ ในขณะที่อีกเธรดหนึ่งจัดการกับการคลิกเมาส์ของคุณ
Synchronous vs. Asynchronous
JavaScript ทำงานแบบ single-threaded โดยจะจัดการงานทีละอย่างผ่าน call stack
Synchronous Execution:
- งานจะทำงานเรียงต่อกันไป
- แต่ละงานต้องรอให้งานก่อนหน้าทำงานเสร็จสิ้นก่อน
- งานที่ทำงานช้าจะไปขัดขวาง (block) ไม่ให้โค้ดส่วนอื่นทำงานได้
Asynchronous Execution:
- งานจะทำงานอยู่เบื้องหลัง
- โค้ดจะไม่หยุดชะงักในขณะที่รอให้งานใดงานหนึ่งเสร็จสิ้น
- สิ่งนี้ทำงานโดยใช้ Web APIs, Callback Queue และ Event Loop
หลักการทำงานของ Asynchronous:
- JavaScript ส่งงาน (เช่น ตัวจับเวลา) ไปยัง Web API
- โค้ดหลักจะทำงานต่อไปเรื่อยๆ
- เมื่อทำงานเสร็จแล้ว งานนั้นจะถูกส่งไปยัง Callback Queue
- Event Loop จะย้ายงานนั้นไปยัง Call Stack เมื่อ Call Stack ว่างลง
สิ่งนี้ช่วยให้เว็บแอปพลิเคชันของคุณทำงานได้อย่างรวดเร็วและตอบสนองได้ดี