ทำความเข้าใจการปิดใน JavaScript

สวัสดี geeks ฉันหวังว่าคุณทำได้ดี วันนี้ เราจะมาทำความเข้าใจแนวคิดที่สับสนแต่เรียบง่ายใน JavaScript เช่น การปิด นักพัฒนาส่วนใหญ่ที่มาจากภาษาโปรแกรมต่างๆ พบว่าแนวคิดของการปิดระบบนั้นแปลกมาก แต่เชื่อเถอะว่ามันไม่แปลกขนาดนั้น ฉันสามารถอธิบายการปิดในบรรทัด…แต่ฉันจะไม่ทำ😅. เราจะเข้าใจการปิดในบล็อกนี้อย่างลึกซึ้ง เลยดื่มกาแฟสักแก้ว

ข้อกำหนดเบื้องต้น:

มีข้อกำหนดเบื้องต้นใด ๆ ที่จะเชี่ยวชาญในการปิดหรือไม่? ดีคำตอบคือไม่ ฉันจะอธิบายให้คุณทราบทุกสิ่งในบล็อกเดียวนี้

แผ่นบอยเลอร์:

ดังนั้น ก่อนทำความเข้าใจการปิด เราจำเป็นต้องทำความเข้าใจขอบเขตคำศัพท์ให้มากขึ้น

ขอบเขตคำศัพท์: เป็นพื้นที่ทั้งหมดที่เราสามารถเข้าถึงตัวแปรได้

ให้เราดูรายละเอียดด้วยความช่วยเหลือของตัวอย่าง

ในตัวอย่างข้างต้น ความสามารถในการเข้าถึงของตัวแปรสามารถอธิบายขอบเขตศัพท์ได้เอง ตัวอย่างเช่น 'x' ถูกประกาศใน outerFunction และสามารถเข้าถึงฟังก์ชันและบล็อกทั้งหมดที่มีอยู่ในบล็อก outerFunction ในทำนองเดียวกัน 'y' ถูกประกาศใน innerFunction และสามารถเข้าถึงฟังก์ชันและบล็อกทั้งหมดที่มีอยู่ในบล็อก innerFunction ได้ แต่ 'y' ไม่สามารถเข้าถึงได้จากภายนอก innerFunction เนื่องจากมีการประกาศใน innerFunction และไม่สามารถใช้ได้กับโลกภายนอก นี่คือสาเหตุที่บรรทัดที่ 3 แสดงข้อผิดพลาด มันจะทำให้เกิดข้อผิดพลาดในการอ้างอิงเนื่องจาก outerFunction ไม่มีแนวคิดเกี่ยวกับตัวแปร 'y'

ฉันหวังว่าคุณจะเข้าใจแนวคิดของขอบเขตคำศัพท์ หากคุณยังคงมีปัญหาบางอย่างในขอบเขตคำศัพท์ ให้พยายามทำความเข้าใจอีกครั้งผ่านตัวอย่าง และฉันแน่ใจว่าคุณจะได้รับมันอย่างแน่นอน

ปิด:

มาที่หัวข้อหลักของเราเช่นการปิด ก่อนอื่นเราจะดูคำจำกัดความของการปิด

การปิดถูกกำหนดให้เป็นฟังก์ชันที่มาพร้อมกับขอบเขตคำศัพท์

ฟังดูง่าย! ใช่มั้ย? ใช่ มันง่ายมาก แต่จะซับซ้อนเมื่อเรามีฟังก์ชันที่ซ้อนกันอยู่ เราจะพิจารณาเรื่องนี้ด้วย แต่ก่อนอื่น มาทำความเข้าใจกับตัวอย่างนี้ก่อน

ในโค้ดด้านบนนี้ เราได้ประกาศฟังก์ชัน 2 ฟังก์ชันคือ outerFunction และ innerFunction เราเรียก innerFunction ภายในเนื้อความของ outerFunction และเมื่อเราเรียก outerFunction เราจะได้ค่าของ 'a' เช่น 10 มันง่ายมาก ใช่มั้ย? ลองดูอีกตัวอย่างหนึ่ง

ขั้นแรก พยายามทำความเข้าใจโค้ดนี้ในตอนท้าย จากนั้นฉันจะอธิบายให้คุณฟัง…

ฉันหวังว่าคุณจะลองดู

ดังนั้น ในที่นี้ เราได้กำหนดฟังก์ชัน outerFunction และเราได้ประกาศตัวแปร 'a' ภายในฟังก์ชัน นอกจากนี้ ในบรรทัดที่ 4 เราได้ส่งคืนฟังก์ชันจาก outerFunction ซึ่งเรากำลังปลอบใจค่าของ 'a' ในบรรทัดที่ 7 เราได้กำหนด outerFunction ให้กับ sampleFunction และดูสิ เมื่อเราพิมพ์ค่าของ sampleFunction เราจะได้ฟังก์ชันที่สมบูรณ์ เช่น '() => console.log(a)' มันไม่เจ๋งเหรอ?

เราสามารถคืนค่าฟังก์ชันทั้งหมดจากฟังก์ชันอื่นได้ แต่ ให้ฉันบอกคุณข้อเท็จจริงที่น่าสนใจอีกประการหนึ่งที่นี่ว่า ไม่เพียงแต่ฟังก์ชันถูกส่งคืนจาก outerFunction เท่านั้น แต่การปิดถูกส่งคืนจากฟังก์ชัน เช่น ฟังก์ชันที่มีขอบเขตคำศัพท์ ฟังดูสับสนมาก? ให้ฉันแสดงให้คุณเห็นหลักฐาน

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

การปิดให้พลังแก่ JavaScript อย่างมาก setTimeout() จดจำใน JavaScript สร้างวิธีการส่วนตัว ฯลฯ ทั้งหมดเป็นไปได้เพียงเพราะการปิด คุณจะค้นพบการปิดในโค้ด JavaScript ส่วนใหญ่ของคุณทั้งโดยรู้เท่าทันหรือไม่รู้ตัว

ฉันหวังว่าคุณจะเข้าใจการปิดที่ชัดเจน มีความสุขในการเรียนรู้ 😃!