การปิดเป็นเรื่องยากในภาษาจาวาสคริปต์และคุณสมบัติของมัน แอปพลิเคชันขั้นสูงจำนวนมากพึ่งพาการปิดเพื่อนำไปใช้
การปิดมีสามลักษณะ:
1. ฟังก์ชั่นฟังก์ชั่นซ้อนกัน
2. ฟังก์ชั่นสามารถอ้างถึงพารามิเตอร์ภายนอกและตัวแปรภายใน
3. พารามิเตอร์และตัวแปรจะไม่ถูกรวบรวมโดยกลไกการรวบรวมขยะ
การปิดอ้างถึงฟังก์ชั่นที่มีการเข้าถึงตัวแปรในขอบเขตของฟังก์ชั่นอื่น วิธีที่พบบ่อยที่สุดในการสร้างการปิดคือการสร้างฟังก์ชั่นอื่นภายในฟังก์ชั่นหนึ่งและเข้าถึงตัวแปรท้องถิ่นของฟังก์ชั่นนี้ผ่านฟังก์ชั่นอื่น
มีข้อได้เปรียบในการใช้การปิดและมันก็เป็นข้อเสียของมันซึ่งก็คือมันสามารถอยู่ในตัวแปรท้องถิ่นในหน่วยความจำและหลีกเลี่ยงการใช้ตัวแปรทั่วโลก ตัวแปรทั่วโลกสามารถเรียกได้ในทุกโมดูลซึ่งเป็นหายนะ
ดังนั้นขอแนะนำให้ใช้ตัวแปรท้องถิ่นส่วนตัวที่ห่อหุ้ม
หลังจากดำเนินการฟังก์ชั่นทั่วไปวัตถุที่ใช้งานในท้องถิ่นจะถูกทำลายและมีเพียงขอบเขตทั่วโลกเท่านั้นที่บันทึกไว้ในหน่วยความจำ แต่สถานการณ์การปิดนั้นแตกต่างกัน!
ปิดฟังก์ชั่นซ้อนกัน:
ฟังก์ชั่น aaa () {var a = 1; return function () {Alert (A ++)}; } var fun = aaa (); fun (); // 1 หลังจากดำเนินการ A ++ ดังนั้น A ยังคงอยู่ใน ~ fun (); // 2 fun = null; // a รีไซเคิล! -ผลลัพธ์เอาต์พุตข้างต้นคือ 5;
การปิดจะทำให้ตัวแปรอยู่ในหน่วยความจำตลอดเวลาและหากใช้อย่างไม่เหมาะสมให้เพิ่มการใช้หน่วยความจำ
หลักการของการรวบรวมขยะใน JavaScript
(1) ใน JavaScript หากไม่มีการอ้างอิงวัตถุอีกต่อไปวัตถุจะถูกนำกลับมาใช้ใหม่โดย GC;
(2) หากวัตถุสองชิ้นอ้างถึงกันและกันและไม่ได้อ้างอิงจากบุคคลที่สามอีกต่อไปวัตถุทั้งสองนี้อ้างถึงกันและกันจะถูกนำกลับมาใช้ใหม่
แล้วการใช้การปิดคืออะไร? ประโยชน์ของการใช้งานปิดคือ:
1. ฉันหวังว่าตัวแปรจะอยู่ในความทรงจำเป็นเวลานาน
2. หลีกเลี่ยงการปนเปื้อนของตัวแปรทั่วโลก
3. การมีอยู่ของสมาชิกเอกชน
1. การสะสมของตัวแปรทั่วโลก
<script> var a = 1; ฟังก์ชั่น abc () {a ++; การแจ้งเตือน (a);} abc (); // 2ABC (); // 3 </script>2. ตัวแปรท้องถิ่น
<script> ฟังก์ชั่น abc () {var a = 1; A ++; การแจ้งเตือน (a);} abc (); // 2ABC (); // 2 </script>ดังนั้นตัวแปรสามารถทำได้อย่างไรทั้งตัวแปรท้องถิ่นและสามารถสะสมได้?
3. การสะสมของตัวแปรท้องถิ่น (การปิดที่สามารถทำได้)
<script> ฟังก์ชั่น OUTER () {var x = 10; return function () {// ฟังก์ชั่นฟังก์ชั่นซ้อนกัน x ++; การแจ้งเตือน (x); }} var y = outer (); // ฟังก์ชั่นภายนอกถูกกำหนดให้กับตัวแปร y; y (); ฟังก์ชั่น // y เรียกหนึ่งครั้งผลลัพธ์คือ 11y (); ฟังก์ชั่น // y เรียกว่าครั้งที่สองผลลัพธ์คือ 12 ตระหนักถึงการสะสม </script>การประกาศฟังก์ชั่นและการแสดงออกของฟังก์ชั่นใน JS:
ใน JS เราสามารถประกาศฟังก์ชั่นผ่านฟังก์ชันคำหลัก:
<script> ฟังก์ชั่น ABC () {Alert (123);} ABC (); </script>นอกจากนี้เรายังสามารถใช้ "()" เพื่อเปลี่ยนการประกาศนี้ให้เป็นนิพจน์:
<script> (function () {Alert (123);}) (); // จากนั้นเรียกนิพจน์ก่อนหน้าโดยตรงผ่าน () ดังนั้นฟังก์ชันไม่จำเป็นต้องเขียนชื่อ; </script>4. รหัสโมดูลาร์เพื่อลดมลพิษของตัวแปรทั่วโลก
<script> var abc = (function () {// abc คือค่าส่งคืนของฟังก์ชันที่ไม่ระบุชื่อภายนอก var a = 1; return function () {a ++; Alert (a);}}) (); abc (); // 2; การเรียกฟังก์ชั่น ABC ครั้งหนึ่งคือการเรียกค่าส่งคืนของฟังก์ชั่นภายใน ABC (); // 3 </script>5. การมีอยู่ของสมาชิกเอกชน
<script> var aaa = (function () {var a = 1; function bbb () {a ++; Alert (a);} function ccc () {a ++; Alert (a);} return {b: bbb, // json โครงสร้าง c: ccc}}) (); aaa.b (); //2aaa.c () // 3 </script>6. ค้นหาดัชนีขององค์ประกอบที่เกี่ยวข้องโดยตรงในลูป
<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns = "http://www.w3.org/1999/xhtml" xml: lang = "en"> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> document.getElementByTagname ('Li'); สำหรับ (var i = 0; i <ali.length; i ++) {Ali [i] .onclick = function () {// เมื่อคลิกการวนรอบได้สิ้นสุดลง (i); - }} </script> </head> <body> <ul> <li> <li> 123 </li> <li> 456 </li> <li> 789 </li> <li> 010 </li></ul> </body> </html>7. ใช้การปิดเพื่อเขียนรหัสข้างต้นใหม่:
<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns = "http://www.w3.org/1999/xhtml" xml: lang = "en"> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> document.getElementByTagname ('Li'); สำหรับ (var i = 0; i <ali.length; i ++) {(ฟังก์ชั่น (i) {Ali [i] .onclick = function () {Alert (i);};}) (i); - </script> </head> <body> <ul> <li> 123 </li> <li> 456 </li> <li> 789 </li></ul> </body> </html>