อันดับแรกต่อไปนี้เป็นสามรหัสที่อธิบายขอบเขต
// =========== ตัวอย่าง 1 =============== var scope = 'Global'; function fn () {Alert (ขอบเขต); var scope = 'local'; การแจ้งเตือน (ขอบเขต);} fn (); // ผลลัพธ์ผลลัพธ์? การแจ้งเตือน (ขอบเขต); // ผลลัพธ์ผลลัพธ์? // ============ ตัวอย่าง 2 ============= var scope = 'global'; function fn () {Alert (ขอบเขต); ขอบเขต = 'ท้องถิ่น'; การแจ้งเตือน (ขอบเขต);} fn (); // ผลลัพธ์ผลลัพธ์? การแจ้งเตือน (ขอบเขต); // ผลลัพธ์ผลลัพธ์? // ============ ตัวอย่าง 3 ============ var scope = 'global'; ฟังก์ชั่น fn (ขอบเขต) {Alert (ขอบเขต); ขอบเขต = 'ท้องถิ่น'; การแจ้งเตือน (ขอบเขต);} fn (); // ผลลัพธ์ผลลัพธ์? การแจ้งเตือน (ขอบเขต); // ผลลัพธ์ผลลัพธ์?รหัสทั้งสามนี้มีความแตกต่างเพียงเล็กน้อย แต่ผลลัพธ์นั้นแตกต่างกันอย่างสิ้นเชิง ตัวอย่างที่ 1 เอาต์พุต [ไม่ได้กำหนด, ท้องถิ่น, ทั่วโลก], ตัวอย่างที่ 2 เอาต์พุต [ทั่วโลก, ท้องถิ่น, ท้องถิ่น], ตัวอย่างที่ 3 เอาต์พุต [ไม่ได้กำหนด, ท้องถิ่น, ทั่วโลก] หากคุณไม่สามารถตอบได้อย่างถูกต้องนั่นหมายความว่าคุณยังไม่เข้าใจลักษณะขอบเขตของ JavaScript
ขอบเขตคืออะไร?
บางคนอาจถามว่า: ขอบเขตของตัวแปร A คืออะไร? ฉันถามอีกครั้งในภายหลัง: ขอบเขตของฟังก์ชั่น A คืออะไร? ขอบเขตของตัวแปรและฟังก์ชั่นคืออะไร?
ก่อนอื่นให้ดูว่า "ขอบเขต" หมายถึงอะไร เมื่อ“ ขอบเขต” ถูกทำลายลงมันหมายถึง“ ฟังก์ชั่น” และ“ โดเมน”
ขอบเขตคือช่วงที่เข้าถึงได้ของตัวแปรและฟังก์ชั่นหรือพื้นที่ที่ตัวแปรหรือฟังก์ชั่นทำงานได้
1.Scope ของฟังก์ชัน JavaScript:
พื้นที่ภายในฟังก์ชั่นคือขอบเขตของฟังก์ชั่นและทั้งตัวแปรและฟังก์ชั่นสามารถเข้าถึงการดำเนินการในพื้นที่นี้ พื้นที่นอกฟังก์ชั่นด้านนอกสุดเรียกว่าขอบเขตทั่วโลกและพื้นที่ภายในฟังก์ชั่นเรียกว่าขอบเขตท้องถิ่น
2. ขอบเขตของตัวแปร JavaScript:
ในภูมิภาคที่ตัวแปรอยู่ในซอร์สโค้ดขอบเขตของตัวแปรนี้คือและตัวแปรสามารถเข้าถึงและดำเนินการภายในพื้นที่นี้ ตัวแปรที่กำหนดไว้ในขอบเขตส่วนกลางเรียกว่าตัวแปรทั่วโลกและตัวแปรที่กำหนดไว้ในฟังก์ชั่นเรียกว่าตัวแปรท้องถิ่น
เพื่อให้เข้าใจง่ายๆซอร์สโค้ด JS จะถูกแบ่งออกเป็นพื้นที่ของบล็อกโดยฟังก์ชั่น {} หากพื้นที่เหล่านี้เปลี่ยนตัวตนของพวกเขาพวกเขาจะเป็นขอบเขตของฟังก์ชั่นบางอย่างหรือตัวแปรที่แน่นอน ขอบเขตของตัวแปรและขอบเขตของฟังก์ชันอาจอ้างถึงพื้นที่เดียวกันในซอร์สโค้ด
ห่วงโซ่ขอบเขต
โซ่ขอบเขตเป็นกลไกการค้นหาตัวแปรและฟังก์ชั่นภายใน JavaScript มันกำหนดขอบเขตของตัวแปรและฟังก์ชั่นนั่นคือขอบเขต ทำความเข้าใจกับหลักการของห่วงโซ่ขอบเขตและคุณสามารถเข้าใจตัวอย่างทั้งสามในบทความก่อนหน้านี้เพื่อให้คุณสามารถรู้เหตุผลและเหตุผล
โซ่ขอบเขตเป็นแนวคิดในเอกสาร ECMAScript-262 เอ็นจิ้น JavaScript ถูกนำไปใช้ตามเอกสาร ECMASCript-262 การทำความเข้าใจหลักการการทำงานของเครื่องยนต์จาวาสคริปต์นั้นเอื้อต่อความเข้าใจของเราเกี่ยวกับลักษณะของ JavaScript แต่โปรแกรมเมอร์ JS ส่วนใหญ่จะไม่เข้าใจเทคโนโลยีพื้นฐาน ดังนั้นเมื่ออ่านเอกสาร ECMASCript-262 เราสามารถมีวิธีที่ใช้งานง่ายในการจำลองหลักการทำงานของเครื่องยนต์ JavaScript
บทความนี้จะอธิบายหลักการของการสร้างขอบเขตขอบเขตผ่าน ECMASCript-262-3 รุ่นที่สามในปี 2542 และจะแนะนำแนวคิดหลายประการเช่นสภาพแวดล้อมการดำเนินการวัตถุตัวแปรและวัตถุที่ใช้งานวัตถุอาร์กิวเมนต์โซ่ขอบเขต ฯลฯ ในปี 2009 ความแตกต่างคือแนวคิดเช่นวัตถุตัวแปรและวัตถุที่ใช้งานถูกยกเลิกและมีการแนะนำแนวคิดใหม่เช่นสภาพแวดล้อมคำศัพท์และบันทึกสภาพแวดล้อมดังนั้นอย่าสับสนกับแนวคิดของทั้งสองเวอร์ชัน
1. การดำเนินการบริบท
บริบทการดำเนินการจะถูกแปลเป็นบริบทการดำเนินการ เมื่อ Parser เข้าสู่รหัสที่เรียกใช้งานของ ECMASCript ตัวแยกวิเคราะห์จะเข้าสู่สภาพแวดล้อมการดำเนินการ สภาพแวดล้อมการดำเนินการที่ใช้งานอยู่นั้นจะสร้างสแต็กแบบลอจิคัล สภาพแวดล้อมการดำเนินการที่ด้านบนของสแต็กตรรกะนี้คือสภาพแวดล้อมการดำเนินการที่กำลังทำงานอยู่ในปัจจุบัน
หมายเหตุ: มีรหัสปฏิบัติการสามประเภทใน ECMASCript, Global, Function และ Eval สภาพแวดล้อมทั่วโลกเป็นรหัสปฏิบัติการทั่วโลกและฟังก์ชั่นเป็นรหัสปฏิบัติการฟังก์ชั่น Logic Stack เป็นรูปแบบการจัดเก็บข้อมูลพิเศษที่โดดเด่นด้วย 'ครั้งแรกเข้าและออกจากนั้นเข้าและออก' การเพิ่มข้อมูลจะถูกผลักไปที่ด้านบนของสแต็กตรรกะและการลบข้อมูลจะต้องถูกลบออกจากด้านบน
วัตถุตัวแปรวัตถุที่ใช้งานและอาร์กิวเมนต์วัตถุ
แต่ละสภาพแวดล้อมการดำเนินการมีวัตถุตัวแปรที่เกี่ยวข้อง เมื่อตัวแยกวิเคราะห์เข้าสู่สภาพแวดล้อมการดำเนินการวัตถุตัวแปรจะถูกสร้างขึ้นซึ่งจะมีการอ้างอิงถึงตัวแปรและฟังก์ชั่นที่ประกาศในสภาพแวดล้อมการดำเนินการปัจจุบัน
วัตถุตัวแปรเป็นแนวคิดนามธรรม ในสภาพแวดล้อมการดำเนินการที่แตกต่างกันวัตถุตัวแปรมีตัวตนที่แตกต่างกัน ก่อนที่ตัวแยกวิเคราะห์จะเข้าสู่สภาพแวดล้อมการดำเนินการใด ๆ วัตถุระดับโลกจะถูกสร้างขึ้น เมื่อตัวแยกวิเคราะห์เข้าสู่สภาพแวดล้อมการดำเนินการทั่วโลกวัตถุทั่วโลกจะทำหน้าที่เป็นวัตถุตัวแปร เมื่อตัวแยกวิเคราะห์เข้าสู่ฟังก์ชั่นวัตถุที่ใช้งานจะถูกสร้างเป็นวัตถุตัวแปร
2. สองขั้นตอนเมื่อตัวแยกวิเคราะห์ประมวลผลรหัส
เราทุกคนรู้ว่า JavaScript Parser แยกวิเคราะห์รหัสทีละตัวมันเป็นเสื่อหรือไม่? สิ่งนี้เกี่ยวข้องกับสองขั้นตอนเมื่อตัวแยกวิเคราะห์ประมวลผลรหัสแยกวิเคราะห์รหัสและเรียกใช้รหัส
เมื่อตัวแยกวิเคราะห์เข้าสู่สภาพแวดล้อมการดำเนินการวัตถุตัวแปรจะเพิ่มตัวแปรและฟังก์ชั่นที่ประกาศไว้ในสภาพแวดล้อมการดำเนินการเป็นคุณสมบัติซึ่งหมายความว่าตัวแปรและฟังก์ชั่นมีอยู่ก่อนการประกาศและค่าตัวแปรจะไม่ถูกกำหนด นี่คือเหตุผลในการส่งเสริมตัวแปรและการประกาศฟังก์ชั่น (Hoisting) ในเวลาเดียวกันโซ่ขอบเขตและสิ่งนี้จะถูกกำหนด กระบวนการนี้เป็นขั้นตอนการแยกวิเคราะห์ซึ่งเป็นที่รู้จักกันทั่วไปว่าเป็นระยะก่อน จากนั้นตัวแยกวิเคราะห์จะเริ่มเรียกใช้รหัสเพิ่มการอ้างอิงไปยังค่าที่เกี่ยวข้องกับตัวแปรและได้รับผลการดำเนินการ กระบวนการนี้เป็นขั้นตอนการดำเนินการ
มาตั้งชื่อเกาลัดแสนอร่อยสองอัน:
var a = 123; var b = "abc"; ฟังก์ชั่น c () {แจ้งเตือน ('11 ');}หลังจากการแยกวิเคราะห์รหัสและการดำเนินการในสภาพแวดล้อมทั่วโลกข้างต้นวัตถุส่วนกลางจะถูกใช้เป็นวัตถุตัวแปรและข้อมูลต่อไปนี้จะถูกบันทึก
ฟังก์ชั่น testfn (a) {var b = "123"; ฟังก์ชัน C () {Alert ("ABC"); }} testfn (10);เมื่อตัวแยกวิเคราะห์เข้าสู่สภาพแวดล้อมการดำเนินการฟังก์ชั่นวัตถุที่ใช้งานจะถูกสร้างขึ้นเป็นวัตถุตัวแปร วัตถุที่ใช้งานจะสร้างวัตถุอาร์กิวเมนต์ วัตถุอาร์กิวเมนต์คือการตั้งค่าพารามิเตอร์เพื่อบันทึกพารามิเตอร์ นี่คือเหตุผลที่เราสามารถใช้อาร์กิวเมนต์ [0] และอื่น ๆ เมื่อเขียนฟังก์ชั่น
3. โซ่ขอบเขต
แต่ละสภาพแวดล้อมการดำเนินการมีห่วงโซ่ขอบเขตที่เกี่ยวข้อง มันถูกกำหนดเมื่อตัวแยกวิเคราะห์เข้าสู่สภาพแวดล้อมการดำเนินการ โซ่ขอบเขตเป็นรายการวัตถุที่ใช้ในการดึงตัวแปรและฟังก์ชั่นในแต่ละวัตถุตัวแปร สิ่งนี้ทำให้มั่นใจได้ว่าสภาพแวดล้อมการดำเนินการมีสิทธิ์ในการเข้าถึงตัวแปรและฟังก์ชั่น ตัวอย่างเช่นมันเป็นเกาลัด
var a = '123'; ฟังก์ชัน testfn (b) {var c = 'abc'; ฟังก์ชั่น testfn2 () {var d = 'efg'; การแจ้งเตือน (a); } testfn2 ();} testfn (10);ตัวแปร A ไม่ได้ประกาศใน TestFN2 ทำไม TestFN2 ถึงเรียกตัวแปรส่วนกลาง A ได้? กระบวนการทั้งหมดเกิดขึ้นได้อย่างไร? โปรดดูภาพด้านล่าง
เมื่อตัวแยกวิเคราะห์เข้าสู่สภาพแวดล้อมการดำเนินการทั่วโลกตัวแปรและฟังก์ชั่นจะพบได้เฉพาะในวัตถุทั่วโลกเมื่อเรียกพวกเขา
เมื่อตัวแยกวิเคราะห์เข้าสู่สภาพแวดล้อมการทำงานของฟังก์ชั่น TestFN คุณสมบัติภายในของฟังก์ชัน [[ขอบเขต]] จะถูกกรอกข้อมูลเป็นครั้งแรกในวัตถุทั่วโลกและจากนั้นวัตถุที่ใช้งาน TestFN จะถูกเพิ่มเข้าไปในวัตถุทั่วโลกเพื่อสร้างโซ่ขอบเขต
เมื่อตัวแยกวิเคราะห์เข้าสู่สภาพแวดล้อมการทำงานของฟังก์ชั่น TestFN2 คุณสมบัติภายในของฟังก์ชัน [[ขอบเขต]] จะถูกกรอกข้อมูลเป็นครั้งแรกในห่วงโซ่ขอบเขตหลักและจากนั้นวัตถุที่ใช้งาน TestFN2 ปัจจุบันจะถูกเพิ่มเข้าไปในปลายด้านหน้าของห่วงโซ่ขอบเขตเพื่อสร้างโซ่ขอบเขตใหม่
เมื่อ TestFN2 เรียกตัวแปร A การค้นหาครั้งแรกในวัตถุ TestFN2 ปัจจุบันที่ใช้งานอยู่ หากไม่พบให้ทำตามโซ่ขอบเขตขึ้นไป หากไม่พบให้ค้นหาห่วงโซ่ขอบเขต หากไม่พบให้ค้นหาห่วงโซ่ขอบเขตจนกว่าจะพบในวัตถุทั่วโลกล่าสุดมิฉะนั้นจะมีการรายงานข้อผิดพลาด ดังนั้นตัวแปรของสภาพแวดล้อมภายนอกสามารถเรียกได้ภายในฟังก์ชั่นและตัวแปรของสภาพแวดล้อมภายนอกไม่สามารถเรียกได้ภายในฟังก์ชั่น นี่คือหลักการของลักษณะขอบเขต