การปิดหมายถึงฟังก์ชั่นที่ได้รับอนุญาตให้เข้าถึงตัวแปรในขอบเขตฟังก์ชันอื่น แต่กลไกการกำหนดค่าขอบเขตจะต้องให้ความสนใจกับนั่นคือการปิดสามารถรับค่าสุดท้ายที่มีตัวแปรใด ๆ ในฟังก์ชัน
ในกรณีต่อไปนี้:
ฟังก์ชั่นสร้าง () {var arr = array ใหม่ (); สำหรับ (var i = 0; i <10; i ++) {arr [i] = function () {return i;}; } return arr;} var c_arr = create (); สำหรับ (var i = 0; i <c_arr.length; i ++) {document.write ("c_arr ["+i+"] ="+c_arr [i] ()+"<br />"); -ผลการดำเนินการ:
บนพื้นผิวดูเหมือนว่าค่า I ที่ส่งคืนโดยแต่ละฟังก์ชันจะแตกต่างกันตัวอย่างเช่นค่าของ c_arr [0] ควรเป็น 0 ค่าของ c_arr [1] ควรเป็น 1 และอื่น ๆ แต่ละฟังก์ชั่นสามารถรับได้โดยการคืน 10 ทำไม?
เนื่องจากโซ่ขอบเขตของแต่ละฟังก์ชั่นจัดเก็บวัตถุที่ใช้งานอยู่ของฟังก์ชัน create () พวกเขาทั้งหมดอ้างถึงตัวแปรเดียวกัน i หลังจากการวนรอบสิ้นสุดค่าของฉันจะกลายเป็น 10 ในเวลานี้แต่ละฟังก์ชั่นหมายถึงวัตถุตัวแปรเดียวกันที่ถือตัวแปร i
เราสามารถบังคับให้ปิดการทำงานตามที่คาดไว้โดยการสร้างฟังก์ชันโดเมนอื่นเพื่อให้แต่ละตำแหน่งสอดคล้องกับค่าที่สอดคล้องกัน
ฟังก์ชั่นสร้าง () {var arr = array ใหม่ (); สำหรับ (var i = 0; i <10; i ++) {arr [i] = function (num) {return function () {return num; };}(ฉัน); } return arr;} var c_arr = create (); สำหรับ (var i = 0; i <c_arr.length; i ++) {document.write ("c_arr ["+i+"] ="+c_arr [i] ()+"<br />"); -ผลการดำเนินการ:
กำหนดฟังก์ชั่นที่ไม่ระบุชื่อและดำเนินการฟังก์ชันที่ไม่ระบุชื่อทันทีเพื่อกำหนดให้กับอาร์เรย์ ที่นี่ฟังก์ชั่นที่ไม่ระบุชื่อมีพารามิเตอร์ NUM ซึ่งเป็นค่าที่จะส่งคืนโดยฟังก์ชั่นสุดท้าย เมื่อเรียกแต่ละฟังก์ชันเราจะผ่านในตัวแปร i เนื่องจากพารามิเตอร์ฟังก์ชันถูกส่งผ่านค่าค่าปัจจุบันของตัวแปรฉันจะถูกกำหนดให้กับพารามิเตอร์ NUM ภายในฟังก์ชั่นที่ไม่ระบุชื่อนี้การปิดการเข้าถึง NUM จะถูกสร้างและส่งคืนเพื่อให้แต่ละฟังก์ชั่นในอาร์เรย์ ARR มีสำเนาตัวแปร NUM ของตัวเองดังนั้นจึงสามารถส่งคืนค่าตัวเลขที่แตกต่างกันของตัวเอง
ตัวอย่างคลาสสิก
ลองดูตัวอย่างคลาสสิก สมมติว่าหน้ามีชุดแท็กปุ่ม เราใช้สคริปต์เพื่อผูกเหตุการณ์คลิกไปยังแท็กปุ่มชุดนี้และเมื่อคลิกมันจะปรากฏขึ้นแท็กนี้
<meta charset = "utf-8"/> <button> อันดับแรก </button> <button> วินาที </button> <button> </ปุ่มที่สาม </button> <button> ครั้งที่สี่ </button> <script type = "text/javascript"> var obj = document.getElementByTagname ('ปุ่ม'); สำหรับ (var i = 0; function () {Alert (i);}; } </script>คลิกแต่ละปุ่มเพื่อผลลัพธ์
บนพื้นผิวดูเหมือนว่าการคลิกที่แต่ละฉลากควรปรากฏขึ้นที่แตกต่างกัน
คนแรกควรปรากฏขึ้น 0;
อันที่สองควรปรากฏขึ้น 1;
และอื่น ๆ
แต่ผลลัพธ์ก็คือปุ่มทั้งหมดปรากฏขึ้น 4 ซึ่งเห็นได้ชัดว่าไม่ใช่ผลลัพธ์ที่เราต้องการ
มาเปลี่ยนโปรแกรมกันเถอะ
<meta charset = "utf-8"/> <button> อันดับแรก </button> <button> วินาที </button> <button> ที่สาม </button> <button> ที่สี่ </button> <script type = "text/javascript"> var obj = document.getElementByTagname ('ปุ่ม'); สำหรับ (var i = 0; function () {Alert (num);}} (i); } </script>คลิกที่อันที่สอง
คลิกที่อันที่สี่
เราจำเป็นต้องสร้างฟังก์ชั่นที่ไม่ระบุชื่อในฟังก์ชั่นซึ่งเหมือนกับกรณีข้างต้น สามารถใช้ฟังก์ชั่นที่ไม่ระบุชื่อเพื่อจับภาพตัวแปรภายนอก I และค่า I ของแต่ละปุ่มป๊อปแตกต่างกัน