แต่ละไบต์ของโปรแกรม JavaScript จะดำเนินการในบริบทการดำเนินการนี้หรือบริบทการดำเนินการ คุณสามารถนึกถึงบริบทเหล่านี้เป็นเพื่อนบ้านของรหัสซึ่งสามารถระบุรหัสแต่ละบรรทัด: ที่มาจากไหนและใครคือเพื่อนและเพื่อนบ้าน ใช่นี่เป็นข้อมูลที่สำคัญมากเพราะสังคม JavaScript มีกฎที่เข้มงวดมากซึ่งกำหนดว่าใครสามารถโต้ตอบกับใครได้ บริบทการดำเนินงานเป็นชุมชนที่มีประตูแทนที่จะเป็นประตูเล็ก ๆ ที่เปิดอยู่ภายใน
โดยปกติเราสามารถอ้างถึงขอบเขตทางสังคมเหล่านี้ว่าเป็นขอบเขตและมีความสำคัญเพียงพอที่จะออกกฎหมายในกฎบัตรของเพื่อนบ้านแต่ละคนซึ่งเป็นห่วงโซ่ขอบเขตของบริบทที่เราต้องการพูดคุย ภายในความสัมพันธ์ที่เฉพาะเจาะจงรหัสสามารถเข้าถึงตัวแปรภายในห่วงโซ่ขอบเขตเท่านั้น เมื่อเปรียบเทียบกับตัวแปรที่อยู่นอกเหนือพื้นที่ใกล้เคียงรหัสชอบที่จะจัดการกับท้องถิ่น (ท้องถิ่นเช่นท้องถิ่น)
ภาษาการเขียนโปรแกรมใด ๆ มีแนวคิดของขอบเขต พูดง่ายๆคือขอบเขตคือขอบเขตที่เข้าถึงได้ของตัวแปรและฟังก์ชั่นนั่นคือขอบเขตควบคุมการมองเห็นและวงจรชีวิตของตัวแปรและฟังก์ชั่น ขอบเขตของ JavaScript เป็นจุดความรู้ที่ยากที่จะเข้าใจในการพัฒนาส่วนหน้า จำคำสองสามคำเพื่อแก้ปัญหาขอบเขตของจาวาสคริปต์ได้อย่างง่ายดาย
1. "ไม่มีขอบเขตระดับบล็อกใน JavaScript"
มีขอบเขตระดับบล็อกใน Java หรือ C#นั่นคือการจัดฟันเป็นขอบเขต
โมฆะคงที่สาธารณะ main () {ถ้า (1 == 1) {string name = "Seven"; } system.out.println (ชื่อ);} // รายงานข้อผิดพลาด โมฆะคงที่สาธารณะ main () {ถ้า (1 == 1) {string name = "Seven"; } Console.WriteLine (ชื่อ);} // รายงานข้อผิดพลาดไม่มีขอบเขตระดับบล็อกใน JavaScript
ฟังก์ชั่นหลัก () {ถ้า (1 == 1) {var name = 'Seven'; } console.log (ชื่อ);} // output: เจ็ด2. JavaScript ใช้ขอบเขตฟังก์ชัน
ใน JavaScript แต่ละฟังก์ชั่นทำหน้าที่เป็นขอบเขตและตัวแปรในขอบเขตภายในไม่สามารถเข้าถึงได้จากภายนอก
ฟังก์ชั่นหลัก () {var innerValue = 'เจ็ด';} main (); console.log (innerValue); // ข้อผิดพลาด: uncerference referenceRor: innerValue ไม่ได้กำหนดไว้3. โซ่ขอบเขต JavaScript
เนื่องจากแต่ละฟังก์ชั่นใน JavaScript เป็นขอบเขตหากฟังก์ชั่นที่ซ้อนกันปรากฏขึ้นห่วงโซ่ขอบเขตจะปรากฏขึ้น
xo = 'Alex'; ฟังก์ชั่น func () {var xo = "เจ็ด"; ฟังก์ชั่น inner () {var xo = 'alvin'; console.log (xo); } inner ();} func ();ตัวอย่างเช่นรหัสข้างต้นจะปรากฏในห่วงโซ่ขอบเขตประกอบด้วยสามขอบเขต หากห่วงโซ่ขอบเขตปรากฏขึ้นคำสั่งจะปรากฏขึ้นเมื่อมองหาตัวแปร สำหรับตัวอย่างข้างต้น:
เมื่อดำเนินการ console.log (XO) ลำดับการค้นหาคือการค้นหา根据作用域链从内到外หากไม่มีเลเยอร์ด้านในจะค่อยๆค้นหาจนกว่าจะไม่พบข้อยกเว้น
4. โซ่ขอบเขตของ JavaScript ได้ถูกสร้างขึ้นก่อนการดำเนินการ
ขอบเขตของ JavaScript ถูกสร้างขึ้นก่อนที่จะดำเนินการ เมื่อมีการดำเนินการในอนาคตคุณจะต้องค้นหาตามโซ่ขอบเขตเท่านั้น
ตัวอย่างที่ 1:
xo = 'Alex'; ฟังก์ชั่น func () {var xo = "เจ็ด"; ฟังก์ชั่น inner () {console.log (xo); } return inner;} var ret = func (); ret (); // ผลลัพธ์ผลลัพธ์: เจ็ดรหัสข้างต้นมีอยู่แล้วก่อนที่จะเรียกฟังก์ชัน:
ขอบเขตทั่วโลก -> ขอบเขตฟังก์ชัน func -> ขอบเขตฟังก์ชันภายในขอบเขต
เมื่อดำเนินการ [ret ();] เนื่องจากมันหมายถึงฟังก์ชันภายในห่วงโซ่ขอบเขตของฟังก์ชั่นนี้ได้รับการกำหนดเป็น: ขอบเขตทั่วโลก -> ขอบเขตฟังก์ชัน Func ขอบเขต -> ขอบเขตฟังก์ชันภายในดังนั้นเมื่อดำเนินการ [ret ();] ตัวแปรจะพบตามโซ่ขอบเขตที่มีอยู่
ตัวอย่างที่ 2:
xo = 'Alex'; ฟังก์ชั่น func () {var xo = "eirc"; ฟังก์ชั่น inner () {console.log (xo); } xo = 'Seven'; return inner;} var ret = func (); ret (); // ผลลัพธ์ผลลัพธ์: เจ็ดรหัสข้างต้นมีวัตถุประสงค์เดียวกันกับตัวอย่างที่ 1 และยังเน้นว่าห่วงโซ่ขอบเขตมีอยู่แล้วก่อนที่ฟังก์ชั่นจะเรียกว่า:
ขอบเขตทั่วโลก -> ขอบเขตฟังก์ชัน func -> ขอบเขตฟังก์ชันภายในขอบเขต
แตกต่างกันเมื่อดำเนินการ [var ret = func ();] ค่าของตัวแปร xo ในขอบเขต func ได้รับการรีเซ็ตเป็น "เจ็ด" จาก "Eric" ดังนั้นเมื่อดำเนินการ [ret ();] ในภายหลังคุณสามารถค้นหา "เจ็ด"
ตัวอย่างที่ 3:
xo = 'Alex'; function bar () {console.log (xo);} ฟังก์ชั่น func () {var xo = "เจ็ด"; Bar return;} var ret = func (); ret (); // ผลลัพธ์ผลลัพธ์: Alexในรหัสข้างต้นมีการสร้างโซ่ขอบเขตสองอย่างก่อนที่จะดำเนินการฟังก์ชั่น:
ขอบเขตทั่วโลก -> ขอบเขตฟังก์ชันบาร์
ขอบเขตทั่วโลก -> ขอบเขตฟังก์ชัน func
เมื่อดำเนินการ [RET ();], RET หมายถึงฟังก์ชั่นแท่งและขอบเขตของห่วงโซ่ของฟังก์ชันแท่งมีอยู่แล้ว: ขอบเขตทั่วโลก -> ขอบเขตฟังก์ชั่นบาร์ดังนั้นเมื่อดำเนินการมันจะถูกค้นหาตามห่วงโซ่ขอบเขตที่มีอยู่
5. คำสั่งล่วงหน้า
หากคุณไม่ได้สร้างตัวแปรและใช้โดยตรงใน JavaScript จะมีการรายงานข้อผิดพลาด:
console.log (xxoo); // ข้อผิดพลาด: uncerference referenceError: xxoo ไม่ได้กำหนดไว้
ใน JavaScript หากมีการสร้างค่าโดยไม่ต้องกำหนดค่าค่าจะไม่ถูกกำหนดเช่น:
var xxoo; console.log (xxoo); // output: undefined ในฟังก์ชั่นถ้าเขียนเช่นนี้: function foo () {console.log (xo); var xo = 'seven';} foo (); // output: undefinedรหัสข้างต้นไม่ได้รายงานข้อผิดพลาด แต่เอาต์พุตไม่ได้กำหนด เหตุผลก็คือก่อนที่จะดำเนินการฟังก์ชัน JavaScript พวกเขาจะประกาศตัวแปรทั้งหมดในนั้นโดยไม่ต้องกำหนดค่า ดังนั้นจึงเทียบเท่ากับตัวอย่างข้างต้นว่าฟังก์ชั่นได้ดำเนินการ var xo แล้วเมื่อ "precompiled"; ดังนั้นผลลัพธ์ของรหัสข้างต้นจึงไม่ได้กำหนด
JS เป็นภาษาที่น่าสนใจมาก เนื่องจากคุณสมบัติหลายอย่างของมันมุ่งเป้าไปที่การดำเนินงานของ DOM ใน HTML จึงดูเหมือนเป็นกันเองและเข้มงวดน้อยกว่าเล็กน้อย อย่างไรก็ตามด้วยความเจริญรุ่งเรืองอย่างต่อเนื่องและการพัฒนาของส่วนหน้าและการเพิ่มขึ้นของโหนด JS ไม่ได้เป็น "ภาษาของเล่น" หรือ "ส่วนขยาย CSS" ในยุค JQuery อีกต่อไป บทความที่กล่าวถึงในบทความนี้เป็นเรื่องง่ายที่จะสับสนหรือเข้าใจผิดสำหรับมือใหม่และนักพัฒนา JS ที่ผ่านการพัฒนาเว็บแบบดั้งเดิม ฉันหวังว่าบทความนี้จะเป็นประโยชน์