เริ่มจากตัวอย่างหนึ่งแล้วแยกย่อยว่าโค้ดนั้นทำงานอยู่เบื้องหลังอย่างไร

var x = 10;
var y = 20;

function add(a,b){
  return a+b;
}

var result = add(x,y);

console.log(result) //30

ขั้นแรก ให้ประกาศตัวแปร x & y และเริ่มต้นด้วย vlaue 10 & 20 ที่เกี่ยวข้อง

ประการที่สอง ประกาศฟังก์ชันเพิ่มที่ยอมรับอาร์กิวเมนต์และส่งคืนผลรวมของอาร์กิวเมนต์ เช่น 10 + 20 = 30

ประการที่สาม เรียกใช้ฟังก์ชันเพิ่มโดยมีอาร์กิวเมนต์เป็นค่าของตัวแปร x & y และเก็บผลลัพธ์ไว้ในผลลัพธ์ของตัวแปร

สุดท้าย เอาต์พุตของผลลัพธ์ตัวแปรพร้อมคอนโซล

ในขณะที่รันโค้ดด้านบน JavaScript ทำหลายสิ่งหลายอย่าง

เมื่อเอ็นจิ้น JavaScript เรียกใช้โค้ด JavaScript ในเวลานั้น จะสร้างบริบทการดำเนินการ

แต่ละบริบทการดำเนินการมีสองขั้นตอน

1. ขั้นตอนการสร้าง
2. ขั้นตอนการดำเนินการ

เมื่อเอ็นจิ้น JavaScript เรียกใช้โค้ดเป็นครั้งแรก จะสร้างบริบทการดำเนินการส่วนกลาง ในช่วงนี้ JavaScript ทำงานบางอย่าง

1. สร้างโกลบอลออบเจกต์ เช่น หน้าต่างในเว็บเบราว์เซอร์หรือโกลบอลใน Node.js
2. สร้างวัตถุนี้ (คำหลักนี้) และเชื่อมโยงกับวัตถุส่วนกลาง ในกรณีของเว็บเบราว์เซอร์ คำหลักนี้จะแนบกับวัตถุหน้าต่าง และในโหนด js คำหลักนี้จะแนบกับวัตถุส่วนกลาง
3. ตั้งค่าฮีปหน่วยความจำสำหรับจัดเก็บการอ้างอิงตัวแปรและฟังก์ชัน
4. จัดเก็บการประกาศฟังก์ชันในฮีปหน่วยความจำและตัวแปรภายในบริบทการดำเนินการทั่วโลกด้วยค่าเริ่มต้นที่ไม่ได้กำหนด

1. เก็บตัวแปร x, y & ผลลัพธ์และการประกาศฟังก์ชัน add() ในบริบทการดำเนินการทั่วโลก
2. เริ่มต้นตัวแปรด้วยค่าที่ไม่ได้กำหนด เช่น x = undefined , y = undefined และ result = undefined

ขั้นตอนการดำเนินการ

ในระหว่างขั้นตอนการดำเนินการ เอ็นจิ้น JavaScript จะรันโค้ดทีละบรรทัด กำหนดค่าให้กับตัวแปร และดำเนินการเรียกฟังก์ชัน

สำหรับการเรียกใช้ฟังก์ชันแต่ละครั้ง เอ็นจิ้น JavaScript จะสร้างการเรียกการดำเนินการตามฟังก์ชันใหม่

บริบทการดำเนินการของฟังก์ชันคล้ายกับบริบทการดำเนินการทั่วโลก แต่แทนที่จะสร้างออบเจกต์ส่วนกลาง เอ็นจิ้น JavaScript จะสร้างออบเจกต์อาร์กิวเมนต์ที่อ้างอิงถึงพารามิเตอร์ทั้งหมดของฟังก์ชัน

ในตัวอย่างของเรา เอ็นจิ้น JavaScript สร้างออบเจกต์อาร์กิวเมนต์ที่อ้างอิงพารามิเตอร์ทั้งหมดที่ส่งผ่านไปยังฟังก์ชัน และตั้งค่านี้เป็นออบเจกต์ส่วนกลาง ในกรณีของเว็บเบราว์เซอร์ ค่านี้จะแนบมากับออบเจ็กต์หน้าต่าง และในโหนด js ค่านี้จะแนบมากับโกลบอล วัตถุและยังเริ่มต้นพารามิเตอร์ a & b ด้วยค่าที่ไม่ได้กำหนด

ในระหว่างขั้นตอนการดำเนินการของบริบทการดำเนินการฟังก์ชัน เอ็นจิ้น JavaScript จะกำหนดค่า 10 & 20 ให้กับพารามิเตอร์ a & b และส่งคืนผลลัพธ์ (30) ไปยังบริบทการดำเนินการส่วนกลาง

เพื่อติดตามบริบทการดำเนินการทั้งหมด รวมถึงบริบทการดำเนินการส่วนกลางและบริบทการดำเนินการฟังก์ชัน เอ็นจิ้น JavaScript ใช้ call stack

มาติดต่อกันกันเถอะ

ฉันหวังว่าบทความนี้จะมีประโยชน์สำหรับคุณ แล้วพบกันใหม่บทความหน้า!