1. การเขียนและการใช้งานปิดและปิดคืออะไร
1. การปิดคืออะไร
การปิดคำอธิบายอย่างเป็นทางการของการปิดคือ: การแสดงออก (โดยปกติจะเป็นฟังก์ชัน) ที่มีตัวแปรมากมายและสภาพแวดล้อมที่ผูกพันกับตัวแปรเหล่านี้ดังนั้นตัวแปรเหล่านี้จึงเป็นส่วนหนึ่งของการแสดงออก คุณสมบัติของการปิด:
1). เป็นการอ้างอิงถึงตัวแปรฟังก์ชันมันจะอยู่ในสถานะที่ใช้งานอยู่เมื่อฟังก์ชั่นส่งคืน
2). การปิดเป็นพื้นที่สแต็กที่ไม่มีทรัพยากรถูกปล่อยออกมาเมื่อฟังก์ชั่นกลับมา
พูดง่ายๆ JavaScript อนุญาตให้ใช้ฟังก์ชั่นภายใน - นั่นคือคำจำกัดความของฟังก์ชั่นและการแสดงออกของฟังก์ชั่นอยู่ในฟังก์ชันของฟังก์ชั่นอื่น ยิ่งไปกว่านั้นฟังก์ชั่นภายในเหล่านี้สามารถเข้าถึงตัวแปรท้องถิ่นพารามิเตอร์และฟังก์ชั่นภายในอื่น ๆ ที่ประกาศในฟังก์ชั่นภายนอกที่พวกเขาอาศัยอยู่ เมื่อหนึ่งในฟังก์ชั่นภายในเหล่านี้เรียกว่านอกฟังก์ชั่นภายนอกที่มีอยู่การปิดจะเกิดขึ้น
2. หลายวิธีในการเขียนและใช้การปิด
ก่อนอื่นเราต้องเข้าใจว่าใน JS ทุกอย่างเป็นวัตถุและฟังก์ชั่นเป็นประเภทของวัตถุ ก่อนอื่นให้ดูที่ 5 วิธีในการเขียนปิดและเข้าใจสั้น ๆ ว่าการปิดคืออะไร คำอธิบายโดยละเอียดจะได้รับในภายหลัง
// ฟังก์ชันวิธีการเขียนวิธีการเขียนครั้งแรก (r) {this.r = r; } circle.pi = 3.14159; circle.prototype.area = function () {return circle.pi * this.r * this.r; } var c = วงกลมใหม่ (1.0); การแจ้งเตือน (c.area ());วิธีการเขียนนี้ไม่มีอะไรพิเศษมันเพิ่มคุณสมบัติบางอย่างให้กับฟังก์ชั่น
// วิธีที่สองของการเขียน var circle = function () {var obj = วัตถุใหม่ (); obj.pi = 3.14159; obj.area = function (r) {return this.pi * r * r; } return obj; } var c = วงกลมใหม่ (); การแจ้งเตือน (C.AREA (1.0));วิธีการเขียนนี้คือการประกาศตัวแปรและกำหนดฟังก์ชันให้กับตัวแปรเป็นค่า
// วิธีที่สามในการเขียน var circle = new Object (); circle.pi = 3.14159; circle.area = function (r) {return this.pi * r * r; } Alert (circle.area (1.0));วิธีนี้เข้าใจได้ดีที่สุดซึ่งเป็นวัตถุใหม่จากนั้นเพิ่มคุณสมบัติและวิธีการลงในวัตถุ
// วิธีที่สี่ในการเขียน var circle = {"pi": 3.14159, "พื้นที่": ฟังก์ชัน (r) {return this.pi * r * r; - การแจ้งเตือน (circle.area (1.0));วิธีนี้ใช้บ่อยขึ้นและสะดวกที่สุด var obj = {} คือการประกาศวัตถุที่ว่างเปล่า
// วิธีที่ห้าของการเขียน var circle = ฟังก์ชั่นใหม่ ("this.pi = 3.14159; this.area = function (r) {return r*r*this.pi;}"); การแจ้งเตือน ((วงกลมใหม่ ()) พื้นที่ (1.0));พูดตามตรงฉันไม่เคยใช้วิธีการเขียนนี้ดังนั้นคุณสามารถอ้างถึงได้
โดยทั่วไปวิธีการข้างต้นเป็นเรื่องธรรมดามากขึ้นในครั้งที่สองและสี่และคุณสามารถเลือกตามนิสัยของคุณ
ต้นแบบที่ใช้กันทั่วไปใน JS จะปรากฏในรหัสด้านบนดังนั้นการใช้ต้นแบบคืออะไร? ลองดูที่ด้านล่าง:
var dom = function () {}; dom.show = function () {alert ("แสดงข้อความ"); - dom.prototype.display = function () {alert ("ข้อความคุณสมบัติ"); - dom.display (); // ข้อผิดพลาด dom.show (); var d = new dom (); D.Display (); D.SHOW (); //ข้อผิดพลาดก่อนอื่นเราจะประกาศตัวแปรและกำหนดฟังก์ชันให้กับมันเพราะใน JavaScript แต่ละฟังก์ชั่นมีคุณสมบัติ portotype และวัตถุไม่ได้ เพิ่มสองวิธีเพิ่มและทำลายต้นแบบด้านบนโดยตรงและดูสถานการณ์การโทร ผลการวิเคราะห์มีดังนี้:
1. วิธีการวัตถุที่กำหนดโดยแอตทริบิวต์ต้นแบบเป็นวิธีการคงที่และสามารถเรียกได้โดยตรงด้วยชื่อคลาส! นอกจากนี้ตัวแปรนี้ไม่สามารถใช้ในวิธีการคงที่นี้เพื่อเรียกคุณสมบัติอื่น ๆ ของวัตถุ!
2. วิธีการวัตถุที่กำหนดโดยใช้แอตทริบิวต์ต้นแบบเป็นวิธีที่ไม่คงที่และสามารถใช้งานได้หลังจากการสร้างอินสแตนซ์เท่านั้น! สิ่งนี้สามารถอ้างถึงคุณสมบัติอื่น ๆ ในวัตถุเองภายในวิธีการ!
มาดูรหัสอื่น:
var dom = function () {var name = "default"; this.sex = "boy"; this.success = function () {alert ("ความสำเร็จ"); - - การแจ้งเตือน (dom.name); การแจ้งเตือน (dom.sex);ลองมาดูกันก่อนสิ่งที่จะแสดง คำตอบคือทั้งคู่แสดงไม่ได้กำหนดทำไม? นี่เป็นเพราะใน JavaScript แต่ละฟังก์ชั่นจะมีขอบเขตและตัวแปรเหล่านี้จะถูกประกาศในฟังก์ชั่นดังนั้นพวกเขาจึงอยู่ในขอบเขตของฟังก์ชั่นนี้และไม่สามารถเข้าถึงได้จากภายนอก ในการเข้าถึงตัวแปรคุณต้องมีอินสแตนซ์ใหม่
var html = {ชื่อ: 'วัตถุ', ความสำเร็จ: function () {this.say = function () {Alert ("Hello, World"); - การแจ้งเตือน ("OBJ Success"); -มาดูวิธีการเขียนนี้กันเถอะ ในความเป็นจริงนี่คือ“ น้ำตาลไวยากรณ์” ในจาวาสคริปต์ วิธีการเขียนนี้เทียบเท่ากับ:
var html = วัตถุใหม่ (); html.name = 'object'; html.success = function () {this.say = function () {Alert ("Hello, World"); - การแจ้งเตือน ("OBJ Success");ตัวแปร HTML เป็นวัตถุไม่ใช่ฟังก์ชั่นดังนั้นจึงไม่มีแอตทริบิวต์ต้นแบบและวิธีการของมันเป็นวิธีการสาธารณะทั้งหมดและ HTML ไม่สามารถสร้างอินสแตนซ์ได้ มิฉะนั้นข้อผิดพลาดต่อไปนี้จะปรากฏขึ้น:
แต่มันสามารถกำหนดให้กับตัวแปรอื่น ๆ เป็นค่าเช่น var o = html; เราสามารถใช้มันได้เช่นนี้:
การแจ้งเตือน (html.name);
html.success ();
พูดถึงสิ่งนี้มันจบแล้วเหรอ? ผู้คนอย่างระมัดระวังอาจถามว่าจะเข้าถึงวิธีการพูดในวิธีการประสบความสำเร็จได้อย่างไร? มันคือ html.success.say () หรือไม่?
ไม่แน่นอน ดังที่ได้กล่าวมาแล้วเนื่องจากข้อ จำกัด ขอบเขตจึงไม่สามารถเข้าถึงได้ ดังนั้นคุณต้องเข้าถึงโดยใช้วิธีการต่อไปนี้:
var s = ใหม่ html.success (); s.say (); // คุณยังสามารถเขียนไปยัง html.success.prototype.show = function () {alert ("haha");}; var s = new html.success (); s.show ();เกี่ยวกับขอบเขตของ JavaScript ไม่สามารถอธิบายได้อย่างชัดเจนในหนึ่งประโยคหรือสองประโยค หากคุณสนใจคุณสามารถค้นหาข้อมูลออนไลน์ได้
2. จุดประสงค์ของการปิด JavaScript
ในความเป็นจริงโดยใช้การปิดเราสามารถทำสิ่งต่าง ๆ ได้มากมาย ตัวอย่างเช่นจำลองรูปแบบรหัสเชิงวัตถุ Express Code อย่างสง่างามและรัดกุมมากขึ้น และปรับปรุงประสิทธิภาพการดำเนินการโค้ดในบางด้าน
1. ฟังก์ชั่นการดำเนินการตนเองที่ไม่ระบุชื่อ
เรารู้ว่าหากตัวแปรทั้งหมดไม่ได้ถูกเพิ่มด้วยคำหลัก VAR ค่าเริ่มต้นจะถูกเพิ่มลงในคุณสมบัติของวัตถุทั่วโลก มีข้อเสียมากมายในการเพิ่มตัวแปรชั่วคราวลงในวัตถุทั่วโลก
ตัวอย่างเช่น: ฟังก์ชั่นอื่น ๆ อาจใช้ตัวแปรเหล่านี้ในทางที่ผิด ทำให้วัตถุทั่วโลกมีขนาดใหญ่เกินไปและส่งผลต่อความเร็วในการเข้าถึง (เนื่องจากค่าของตัวแปรจะต้องถูกข้ามจากห่วงโซ่ต้นแบบ)
นอกเหนือจากการใช้คำหลัก VAR ทุกครั้งที่เราใช้ตัวแปรเรามักจะพบกับสถานการณ์ที่บางฟังก์ชั่นจำเป็นต้องดำเนินการเพียงครั้งเดียวและตัวแปรภายในของพวกเขาไม่จำเป็นต้องได้รับการบำรุงรักษาเช่นการเริ่มต้นของ UI ดังนั้นเราจึงสามารถใช้การปิดได้:
var data = {table: [], tree: {}}; (ฟังก์ชั่น (dm) {สำหรับ (var i = 0; i <dm.table.rows; i ++) {var row = dm.table.rows [i]; สำหรับ (var j = 0; j <row.cells; i ++) {drawcell (i, j);}}}) (data);เราสร้างฟังก์ชั่นที่ไม่ระบุชื่อและดำเนินการทันที เนื่องจากภายนอกไม่สามารถอ้างถึงตัวแปรที่อยู่ภายในทรัพยากรจะถูกปล่อยออกมาทันทีหลังจากดำเนินการฟังก์ชั่น กุญแจสำคัญคือการไม่ก่อให้เกิดมลพิษจากวัตถุระดับโลก
2. ผลลัพธ์แคช
เราจะพบกับสถานการณ์ต่าง ๆ ในการพัฒนา ลองนึกภาพว่าเรามีวัตถุฟังก์ชั่นที่ใช้เวลานานมากซึ่งใช้เวลานานในการประมวลผลการโทรแต่ละครั้ง
จากนั้นเราต้องเก็บค่าที่คำนวณไว้ เมื่อเรียกใช้ฟังก์ชั่นนี้ก่อนอื่นเราค้นหาในแคช หากไม่สามารถพบได้เราจะคำนวณแล้วอัปเดตแคชและส่งคืนค่า หากพบเราสามารถส่งคืนค่าที่พบได้โดยตรง การปิดทำสิ่งนี้อย่างแน่นอนเพราะมันไม่ได้ปล่อยการอ้างอิงภายนอกเพื่อให้ค่าภายในฟังก์ชั่นสามารถเก็บรักษาไว้ได้
var cachedSearchbox = (function () {var cache = {}, count = []; return {attachSearchBox: ฟังก์ชัน (dSID) {ถ้า (dSID ในแคช) {// ถ้าผลลัพธ์อยู่ในแคชส่งคืนแคช [dSID]; // ส่งคืนวัตถุในแคชโดยตรง CACHE [DSID] = FSB; // UPDATE CACHE IF (Count.length> 100) {// ความปลอดภัยขนาดแคช <= 100 ลบแคช [count.shift ()]; cachedsearchbox.attachsearchbox ("อินพุต");ด้วยวิธีนี้เราจะอ่านวัตถุจากแคชในการโทรครั้งที่สอง
3. บรรจุภัณฑ์
var person = function () {// ขอบเขตของตัวแปรอยู่ในฟังก์ชันและไม่สามารถเข้าถึงชื่อ VAR ได้นอก var name = "default"; return {getName: function () {return name; }, setName: function (newName) {name = newName; - print (person.name); // การเข้าถึงโดยตรงผลลัพธ์คือการพิมพ์ที่ไม่ได้กำหนด (person.getName ()); person.setName ("Abruzzi"); พิมพ์ (person.getName ());ผลลัพธ์มีดังนี้:
ไม่ได้กำหนด
ค่าเริ่มต้น
ปักกรุซซี่
4. ใช้คลาสและการสืบทอด
ฟังก์ชันบุคคล () {var name = "default"; return {getName: function () {return name; }, setName: function (newName) {name = newName; - var p = คนใหม่ (); P.SetName ("Tom"); การแจ้งเตือน (p.getName ()); var jack = function () {}; // สืบทอดมาจาก Jack.prototype = คนใหม่ (); // เพิ่มวิธีการส่วนตัว jack.prototype.say = function () {Alert ("สวัสดีชื่อของฉันคือ Jack"); - var j = new Jack (); J.SetName ("Jack"); J.Say (); การแจ้งเตือน (j.getName ());เรากำหนดบุคคลมันเป็นเหมือนชั้นเรียนเราใหม่วัตถุบุคคลเข้าถึงวิธีการของมัน
ด้านล่างเรากำหนดแจ็คบุคคลที่สืบทอดมาและเพิ่มวิธีการของเราเอง
สรุปส่วนตัว:
ฉันเคยคิดว่า JavaScript เป็นเพียงสาขาหนึ่งของ Java ภาษาสคริปต์และมันง่ายที่จะเรียนรู้ แต่ตอนนี้ฉันพบว่ามีหลายสิ่งหลายอย่างที่ต้องเรียนรู้ JavaScript มีพลังมากกว่าที่เราคิด
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น