บทความนี้วิเคราะห์แนวคิดและการใช้งานการปิด JavaScript แบ่งปันสำหรับการอ้างอิงของคุณ รายละเอียดมีดังนี้:
เมื่อพูดถึงการปิดฉันเชื่อว่าทุกคนเคยได้ยินพวกเขา ให้ฉันบอกความเข้าใจง่ายๆของฉันด้านล่าง
พูดตามตรงมีสถานการณ์ไม่มากนักสำหรับการเขียนด้วยตนเองในการทำงานประจำวัน แต่กรอบและส่วนประกอบของบุคคลที่สามที่ใช้ในโครงการใช้การปิดมากหรือน้อย
ดังนั้นจึงจำเป็นอย่างยิ่งที่จะต้องเข้าใจการปิด ฮิฮิ ...
1. การปิดคืออะไร
ในระยะสั้นมันเป็นฟังก์ชั่นที่สามารถอ่านตัวแปรภายในฟังก์ชั่นอื่น ๆ
เนื่องจากขอบเขตของตัวแปร JS จึงไม่สามารถเข้าถึงตัวแปรภายในภายนอกได้และตัวแปรภายนอกสามารถอยู่ภายนอกได้
2. ใช้สถานการณ์จำลอง
1. ใช้สมาชิกเอกชน
2. ปกป้องเนมสเปซเพื่อหลีกเลี่ยงการสร้างมลพิษตัวแปรทั่วโลก
3. ตัวแปรแคช
ก่อนอื่นให้ดูตัวอย่างของการห่อหุ้ม:
คัดลอกรหัสดังนี้: var person = function () {
// ขอบเขตของตัวแปรอยู่ภายในฟังก์ชั่นและไม่สามารถเข้าถึงได้ภายนอก
var name = "default";
กลับ {
getName: function () {
ชื่อคืน;
-
setName: function (newName) {
ชื่อ = newName;
-
-
-
console.log (person.name); // การเข้าถึงโดยตรงผลลัพธ์คือ: ไม่ได้กำหนด
console.log (person.getName ()); // ผลลัพธ์คือ: ค่าเริ่มต้น
console.log (person.setName ("langjt"));
console.log (person.getName ()); // ผลลัพธ์คือ: langjt
มาดูการปิดทั่วไปในลูปเพื่อแก้ปัญหาการอ้างอิงตัวแปรภายนอก:
การคัดลอกรหัสมีดังนี้: var Ali = document.getElementsByTagname ('li');
สำหรับ (var i = 0, len = Ali.length; i <len; i ++) {
Ali [i] .onclick = function () {
การแจ้งเตือน (i); // ไม่ว่าคุณจะคลิกองค์ประกอบใดค่าป๊อปอัพคือเลนแสดงว่าค่าของฉันที่นี่และค่าของฉันพิมพ์หลังจากนั้นเหมือนกัน
-
-
หลังจากใช้การปิด:
การคัดลอกรหัสมีดังนี้: var Ali = document.getElementsByTagname ('li');
สำหรับ (var i = 0, len = Ali.length; i <len; i ++) {
Ali [i] .onclick = (ฟังก์ชั่น (i) {
return function () {
การแจ้งเตือน (i); // คลิกองค์ประกอบ <li> ในเวลานี้และตัวห้อยที่เกี่ยวข้องจะปรากฏขึ้น
-
})(ฉัน);
-
3. สิ่งที่ควรทราบ
1. การรั่วไหลของหน่วยความจำ
เนื่องจากการปิดจะทำให้ตัวแปรทั้งหมดในฟังก์ชันถูกเก็บไว้ในหน่วยความจำและการใช้หน่วยความจำมีขนาดใหญ่มากการปิดไม่สามารถถูกทารุณกรรมไม่เช่นนั้นจะทำให้เกิดปัญหาประสิทธิภาพของหน้าเว็บ
ตัวอย่างเช่น:
คัดลอกรหัสดังนี้: function foo () {
var odiv = document.getElementById ('j_div');
var id = odiv.id;
odiv.onclick = function () {
// Alert (odiv.id); มีการอ้างอิงแบบวงกลมที่นี่ ODIV ยังคงอยู่ในหน่วยความจำหลังจากปิดหน้าเวอร์ชันต่ำ ดังนั้นแคชชนิดดั้งเดิมแทนที่จะเป็นวัตถุให้มากที่สุด
การแจ้งเตือน (ID);
-
odiv = null;
-
2. การตั้งชื่อตัวแปร
หากตัวแปรของฟังก์ชั่นภายในและชื่อตัวแปรของฟังก์ชั่นด้านนอกเหมือนกันฟังก์ชั่นด้านในไม่สามารถชี้ไปที่ตัวแปรที่มีชื่อเดียวกันกับฟังก์ชันด้านนอกได้อีกต่อไป
ตัวอย่างเช่น:
คัดลอกรหัสดังนี้: function foo (num) {
ฟังก์ชั่น return (num) {
console.log (num);
-
-
var f = new foo (9);
f (); // ไม่ได้กำหนด
ในความเป็นจริงการใช้งานข้างต้นเรียกว่าฟังก์ชั่น Currying ซึ่งเป็นเทคนิคของการแปลงฟังก์ชั่นที่ยอมรับพารามิเตอร์หลายตัวเป็นฟังก์ชันที่ยอมรับพารามิเตอร์เดียว (พารามิเตอร์แรกของฟังก์ชันดั้งเดิม) และส่งคืนฟังก์ชั่นใหม่ที่ยอมรับพารามิเตอร์ที่เหลือและส่งกลับผลลัพธ์ ในสาระสำคัญมันยังใช้คุณสมบัติที่ปิดสามารถแคชได้เช่น:
คัดลอกรหัสดังนี้: var adder = function (num) {
ฟังก์ชั่น return (y) {
ส่งคืน num+y;
-
-
var inc = เพิ่ม (1);
var dec = เพิ่ม (-1);
// Inc, DEC ตอนนี้เป็นฟังก์ชั่นใหม่สองฟังก์ชั่นซึ่งใช้ในการส่งผ่านในค่าพารามิเตอร์ (+/) 1
การแจ้งเตือน (Inc (99)); // 100
การแจ้งเตือน (ธ.ค. (101)); // 100
การแจ้งเตือน (adder (100) (2)); // 102
การแจ้งเตือน (adder (2) (100)); // 102
ตัวอย่างเช่นในซอร์สโค้ด SEAJS ของ Alibaba Yubo:
คัดลอกรหัสดังนี้:/**
* util -lang.js - การปรับปรุงภาษาขั้นต่ำ
-
ฟังก์ชั่น Istype (ประเภท) {
ฟังก์ชั่น return (obj) {
return {} .toString.call (obj) == "[object" + type + "]"
-
-
var isobject = istype ("วัตถุ");
var isstring = istype ("สตริง");
ฉันหวังว่าบทความนี้จะเป็นประโยชน์กับการเขียนโปรแกรม JavaScript ของทุกคน