บทความนี้วิเคราะห์วิธีการสร้างและการโทรของฟังก์ชั่นที่ไม่ระบุชื่อใน JS แบ่งปันสำหรับการอ้างอิงของคุณ วิธีการใช้งานเฉพาะมีดังนี้:
ฟังก์ชั่นที่ไม่ระบุชื่อเป็นฟังก์ชั่นที่ไม่มีชื่อเรียกว่าการปิดซึ่งอนุญาตให้สร้างฟังก์ชั่นชั่วคราวโดยไม่มีชื่อที่ระบุ ส่วนใหญ่มักใช้เป็นค่าสำหรับพารามิเตอร์การโทรกลับสามเณรหลายคนไม่รู้เกี่ยวกับฟังก์ชั่นที่ไม่ระบุชื่อ มาวิเคราะห์ที่นี่
ชื่อฟังก์ชั่นฟังก์ชั่น (รายการพารามิเตอร์) {function body;}
หากคุณกำลังสร้างฟังก์ชั่นที่ไม่ระบุชื่อควรเป็น:
function () {function body;}
เนื่องจากเป็นฟังก์ชันที่ไม่ระบุชื่อจึงไม่มีพารามิเตอร์ใด ๆ ที่ส่งถึงเขา
ทำไมต้องสร้างฟังก์ชั่นที่ไม่ระบุชื่อ? จะใช้ฟังก์ชั่นที่ไม่ระบุชื่อภายใต้สถานการณ์ใด มีสองสถานการณ์ทั่วไปสำหรับฟังก์ชั่นที่ไม่ระบุชื่อหนึ่งคือฟังก์ชั่นการโทรกลับและอีกสถานการณ์หนึ่งคือการเรียกใช้ฟังก์ชันโดยตรง
ฟังก์ชั่นการโทรกลับเช่นการดำเนินการแบบอะซิงโครนัส AJAX ต้องใช้ฟังก์ชั่นการโทรกลับ ฉันจะไม่อธิบายรายละเอียดที่นี่ เกี่ยวกับการเรียกใช้ฟังก์ชั่นโดยตรงฉันจะเข้าใจหลังจากดูตัวอย่าง:
คัดลอกรหัสดังต่อไปนี้: <ภาษาสคริปต์ = "JavaScript">
var a = "a";
(การทำงาน(){
var a = "b";
การแจ้งเตือน (a);
-
การแจ้งเตือน (a);
</script>
ในรหัสข้างต้นกล่องแจ้งเตือนสองกล่องจะถูกส่งออกตามลำดับ เนื้อหาของกล่องแจ้งเตือนแรกคือ B และอันที่สองคือ คุณเคยเห็นผลประโยชน์หรือไม่? ขวาการใช้ฟังก์ชั่นการดำเนินการสามารถ จำกัด ขอบเขตของตัวแปรเพื่อให้ตัวแปรเดียวกันในสคริปต์ที่แตกต่างกันสามารถอยู่ร่วมกันได้
ด้านล่างก่อนอื่นให้เข้าใจแนวคิดที่เกี่ยวข้องกับฟังก์ชั่นที่ไม่ระบุชื่อ
คำสั่งฟังก์ชั่น ในการใช้ฟังก์ชั่นเราต้องประกาศการดำรงอยู่ก่อน วิธีที่พบบ่อยที่สุดที่เราใช้คือการกำหนดฟังก์ชั่นโดยใช้คำสั่งฟังก์ชั่นเช่น:
คัดลอกรหัสดังนี้: ฟังก์ชั่น abc () {
// รหัสเพื่อดำเนินการ
-
ฟังก์ชั่น abc () {// รหัสเพื่อประมวลผล}
แน่นอนว่าฟังก์ชั่นของคุณสามารถอยู่กับพารามิเตอร์หรือแม้กระทั่งกับค่าส่งคืน
การคัดลอกรหัสมีดังนี้: ดู plaincopy to clipboardprint?
ฟังก์ชั่น abc (x, y) {
ส่งคืน x+y;
-
ฟังก์ชั่น abc (x, y) {return x+y; -
อย่างไรก็ตามไม่ว่าคุณจะกำหนดฟังก์ชั่นของคุณอย่างไรล่าม JS จะแปลเป็นวัตถุฟังก์ชัน ตัวอย่างเช่นคุณกำหนดหมายเลขฟังก์ชั่นของหนึ่งในตัวอย่างข้างต้นและป้อนรหัสต่อไปนี้:
คัดลอกรหัสดังนี้: การแจ้งเตือน (typeof abc); // "ฟังก์ชั่น"
เบราว์เซอร์ของคุณจะปรากฏกล่องพรอมต์พร้อมแจ้งให้คุณทราบว่า ABC เป็นวัตถุฟังก์ชั่น วัตถุฟังก์ชันคืออะไร?
วัตถุฟังก์ชัน
วัตถุฟังก์ชันเป็นวัตถุโดยธรรมชาติใน JavaScript และฟังก์ชั่นทั้งหมดเป็นวัตถุฟังก์ชัน ก่อนอื่นให้ดูว่าวัตถุฟังก์ชั่นสามารถใช้ตัวสร้างโดยตรงเพื่อสร้างฟังก์ชั่นใหม่ได้หรือไม่ คำตอบคือใช่ ตัวอย่างเช่น:
การคัดลอกรหัสมีดังนี้: var abc = ฟังก์ชันใหม่ ("x", "y", "return x*y;");
การแจ้งเตือน (ABC (2,3)); // "6"
ฉันเชื่อว่าทุกคนควรมีความเข้าใจเกี่ยวกับวิธีการประกาศฟังก์ชั่นในตอนนี้ แล้วฟังก์ชั่นที่ไม่ระบุชื่อคืออะไร?
ประกาศฟังก์ชั่นที่ไม่ระบุชื่อ
ตามชื่อหมายถึงฟังก์ชั่นที่ไม่ระบุชื่อเป็นฟังก์ชั่นที่ไม่มีชื่อจริง ตัวอย่างเช่นเราลบชื่อของฟังก์ชั่นในตัวอย่างด้านบนแล้วพิจารณาว่าเป็นฟังก์ชัน:
คัดลอกรหัสดังนี้: การแจ้งเตือน (typeof function () {}); // "ฟังก์ชั่น"
การแจ้งเตือน (ฟังก์ชั่น typeof (x, y) {return x+y;}); // "ฟังก์ชั่น"
การแจ้งเตือน (ฟังก์ชั่นใหม่ ("x", "y", "return x*y;")) // "ฟังก์ชั่น"
การแจ้งเตือน (typeof function () {}); // "ฟังก์ชั่น"
การแจ้งเตือน (ฟังก์ชั่น typeof (x, y) {return x+y;}); // "ฟังก์ชั่น"
การแจ้งเตือน (ฟังก์ชั่นใหม่ ("x", "y", "return x*y;")) // "ฟังก์ชั่น"
เราสามารถเห็นได้อย่างง่ายดายว่าพวกเขาเป็นวัตถุฟังก์ชั่นทั้งหมดกล่าวอีกนัยหนึ่งพวกเขาเป็นฟังก์ชั่นทั้งหมด แต่พวกเขาทั้งหมดมีลักษณะหนึ่ง - ไม่มีชื่อ ดังนั้นเราจึงเรียกพวกเขาว่า "ฟังก์ชั่นนิรนาม" อย่างไรก็ตามอย่างแม่นยำเพราะพวกเขาไม่มี "ชื่อ" เราไม่มีทางหาพวกเขาได้ สิ่งนี้ขยายคำถามว่าจะเรียกฟังก์ชันที่ไม่ระบุชื่อได้อย่างไร
เรียกฟังก์ชันที่ไม่ระบุชื่อ
ในการเรียกใช้ฟังก์ชั่นเราต้องมีวิธีการค้นหาและอ้างอิง ดังนั้นเราจะต้องหาชื่อมัน ตัวอย่างเช่น:
คัดลอกรหัสดังนี้: var abc = function (x, y) {
ส่งคืน x+y;
-
การแจ้งเตือน (ABC (2,3)); // "5"
การดำเนินการข้างต้นนั้นเทียบเท่ากับการกำหนดฟังก์ชั่นในวิธีที่แตกต่างกัน การใช้งานนี้เป็นสิ่งที่เราพบบ่อยขึ้น ตัวอย่างเช่นเมื่อเราตั้งค่าฟังก์ชั่นตัวจัดการเหตุการณ์องค์ประกอบ DOM เรามักจะไม่ตั้งชื่อพวกเขา แต่ให้การอ้างอิงเหตุการณ์ที่เกี่ยวข้องกับฟังก์ชันที่ไม่ระบุชื่อแทน
มีอีกวิธีหนึ่งในการเรียกฟังก์ชั่นที่ไม่ระบุชื่อซึ่งเป็นชิ้นส่วน jQuery ที่เราเห็น - ใช้ () เพื่อแนบฟังก์ชั่นที่ไม่ระบุชื่อแล้วเพิ่มคู่ของวงเล็บ (รวมถึงรายการพารามิเตอร์) ลองดูตัวอย่างต่อไปนี้:
คัดลอกรหัสดังนี้: การแจ้งเตือน ((ฟังก์ชั่น (x, y) {return x+y;}) (2,3)); // "5"
การแจ้งเตือน ((ฟังก์ชั่นใหม่ ("x", "y", "return x*y;")) (2,3)); // "6"
หลายคนอาจสงสัยว่าทำไมวิธีนี้จึงสามารถเรียกได้ว่าประสบความสำเร็จ? หากคุณคิดว่าแอปพลิเคชันนี้แปลกโปรดตรวจสอบคำอธิบายของฉันด้านล่าง
คุณรู้จักบทบาทของวงเล็บหรือไม่? วงเล็บสามารถแบ่งการแสดงออกของเราออกเป็นชิ้นและแต่ละชิ้นนั่นคือการจัดฟันแต่ละคู่มีค่าคืน ค่าส่งคืนนี้เป็นค่าส่งคืนของนิพจน์ในวงเล็บ ดังนั้นเมื่อเราแนบฟังก์ชั่นที่ไม่ระบุชื่อกับคู่ของวงเล็บคู่วงเล็บจะส่งคืนวัตถุฟังก์ชันของฟังก์ชันที่ไม่ระบุชื่อ ดังนั้นการเพิ่มฟังก์ชั่นที่ไม่ระบุชื่อให้กับคู่วงเล็บจึงเป็นเหมือนฟังก์ชั่นที่มีชื่อและเราได้รับตำแหน่งอ้างอิง ดังนั้นหากคุณเพิ่มรายการพารามิเตอร์หลังจากตัวแปรอ้างอิงนี้รูปแบบการโทรของฟังก์ชันสามัญจะถูกนำไปใช้
ฉันไม่รู้ว่าคุณสามารถเข้าใจข้อความข้างต้นได้หรือไม่ หากคุณยังไม่เข้าใจโปรดดูที่รหัสต่อไปนี้และลองใช้
คัดลอกรหัสดังนี้: var abc = function (x, y) {return x+y;}; // กำหนดวัตถุฟังก์ชันที่ไม่ระบุชื่อให้กับ ABC
// ตัวสร้างของ ABC นั้นเหมือนกับตัวสร้างของฟังก์ชั่นที่ไม่ระบุชื่อ กล่าวคือการใช้งานของทั้งสองฟังก์ชั่นเหมือนกัน
การแจ้งเตือน ((abc) .constructor == (ฟังก์ชั่น (x, y) {return x+y;}). constructor);
PS: ตัวสร้างหมายถึงฟังก์ชั่นที่สร้างวัตถุ นั่นคือร่างกายฟังก์ชั่นที่แสดงโดยวัตถุฟังก์ชั่น
ในระยะสั้นเข้าใจ (ฟังก์ชั่นที่ไม่ระบุชื่อที่มีอยู่ในวงเล็บ) เป็นวัตถุฟังก์ชั่นที่ส่งคืนโดยนิพจน์วงเล็บจากนั้นคุณสามารถทำการเรียกรายการพารามิเตอร์ปกติไปยังวัตถุฟังก์ชันนี้ (ฉันทำผิดพลาดที่นี่มาก่อนการแสดงออกของฟังก์ชั่นเท่านั้นไม่สามารถเรียกได้โดยตรงลบวงเล็บฟังก์ชันที่ไม่ระบุชื่อและต้องได้รับการกำหนดด้วยนิพจน์นั่นคือ (ฟังก์ชัน () {แจ้งเตือน (1)}) () ควรเทียบเท่ากับฟังก์ชัน = () {การแจ้งเตือน (1)} ()
การปิด
การปิดคืออะไร? การปิดอ้างถึงบล็อกโค้ดในภาษาการเขียนโปรแกรมบางอย่างที่อนุญาตให้มีการดำรงอยู่ของฟังก์ชันระดับแรกและตัวแปรอิสระที่กำหนดไว้ในฟังก์ชันระดับแรกไม่สามารถปล่อยออกมาได้ จนกว่าจะมีการปล่อยฟังก์ชั่นระดับแรกตัวแปรฟรีที่ยังไม่เผยแพร่เหล่านี้สามารถใช้นอกฟังก์ชั่นระดับแรกได้
ยังไง? มันเหงื่อออก ... มันก็โอเคฉันก็เช่นกัน (แม้ว่าฉันจะเข้าใจมันมันเป็นเพียงเรื่องของความสามารถในการแสดงออก) เรามาอธิบายด้วยวิธีที่ง่ายกว่า: การปิดเป็นคุณสมบัติภาษา มันหมายถึงภาษาการเขียนโปรแกรมที่อนุญาตให้ฟังก์ชั่นถือเป็นวัตถุและจากนั้นตัวแปรอินสแตนซ์ (ท้องถิ่น) สามารถกำหนดในฟังก์ชั่นเช่นการดำเนินการในวัตถุ ตัวแปรเหล่านี้สามารถบันทึกในฟังก์ชั่นจนกว่าวัตถุอินสแตนซ์ของฟังก์ชั่นจะถูกทำลาย บล็อกรหัสอื่น ๆ สามารถรับค่าของตัวแปรอินสแตนซ์ (ท้องถิ่น) เหล่านี้ในบางวิธีและนำไปใช้กับแอปพลิเคชัน
ฉันไม่รู้ว่ามันจะชัดเจนขึ้นหลังจากอธิบายด้วยวิธีนี้ หากคุณยังไม่เข้าใจลองลดความซับซ้อน: การปิดจริง ๆ แล้วอ้างถึงตัวแปรท้องถิ่นที่กำหนดไว้ในฟังก์ชั่นการทำงานในภาษาการเขียนโปรแกรม
ตอนนี้มาดูตัวอย่าง:
คัดลอกรหัสดังนี้: var abc = function (y) {
var x = y; // นี่คือตัวแปรท้องถิ่น
return function () {
การแจ้งเตือน (x ++); // นี่คือที่ที่ X ถูกเรียกในฟังก์ชันตัวแปรท้องถิ่นระดับแรกในคุณสมบัติการปิดและทำงานกับมัน
การแจ้งเตือน (y-); // ตัวแปรพารามิเตอร์อ้างอิงเป็นตัวแปรฟรี
}} (5); // การเริ่มต้น
abc (); // "5" "5"
abc (); // "6" "4"
abc (); // "7" "3"
แจ้งเตือน (x); // ข้อผิดพลาด! ไม่ได้กำหนด "x"!
หลังจากเห็นสิ่งนี้คุณสามารถบอกได้ว่ารหัสตัวอย่างของ jQuery ปิดอยู่หรือไม่?
ในความคิดของฉันเรามาพูดถึงเรื่องนี้ ไม่ว่าจะใช้คุณสมบัติการปิดหรือไม่จำเป็นต้องพิจารณาว่าองค์ประกอบที่สำคัญที่สุดของรหัสนี้คือ: ตัวแปรท้องถิ่นที่ไม่ถูกทำลายหรือไม่ จากนั้นก็เห็นได้ชัดว่าเป็นไปไม่ได้ที่จะใช้คุณสมบัติการปิดโดยไม่มีการใช้งานใด ๆ แต่ถ้ามีการใช้งานในฟังก์ชั่นที่ไม่ระบุชื่อล่ะ? นอกจากนี้ยังต้องพิจารณาว่ามีตัวแปรท้องถิ่นที่ไม่ถูกทำลายในการดำเนินการหรือไม่ ดังนั้นหากคุณถามคุณสมบัติใดใน JS ที่ใช้ในการเริ่มต้นของตัวอย่างรหัส jQuery? จากนั้นมันก็เป็นเพียงการเรียกใช้ฟังก์ชั่นที่ไม่ระบุชื่อและฟังก์ชั่นที่ไม่ระบุชื่อ อย่างไรก็ตามมันแสดงถึงลักษณะของการปิดและสามารถนำไปใช้ได้ตลอดเวลา
การใช้งานที่พบบ่อยที่สุด:
คัดลอกรหัสดังนี้: (ฟังก์ชัน () {
การแจ้งเตือน ('น้ำ');
-
แน่นอนว่าพารามิเตอร์สามารถรวม:
คัดลอกรหัสดังนี้: (ฟังก์ชั่น (o) {
การแจ้งเตือน (O);
})('น้ำ');
ต้องการใช้การโทรที่ถูกล่ามโซ่ด้วยฟังก์ชั่นที่ไม่ระบุชื่อหรือไม่? ง่ายมาก:
คัดลอกรหัสดังนี้: (ฟังก์ชั่น (o) {
การแจ้งเตือน (O);
คืนอาร์กิวเมนต์ Callee;
}) ('น้ำ') ('ลง');
คุณรู้ว่าฟังก์ชั่นที่ไม่ระบุชื่อทั่วไปทั้งหมดมาดูสิ่งที่ผิดปกติ:
คัดลอกรหัสดังต่อไปนี้: ~ (ฟังก์ชัน () {
การแจ้งเตือน ('น้ำ');
}) (); // การเขียนค่อนข้างเย็น ~
ฟังก์ชั่นโมฆะ () {
การแจ้งเตือน ('น้ำ');
} (); // มีการกล่าวว่ามีประสิทธิภาพมากที่สุด ~
+ฟังก์ชัน () {
การแจ้งเตือน ('น้ำ');
-
-การทำงาน(){
การแจ้งเตือน ('น้ำ');
-
~ function () {
การแจ้งเตือน ('น้ำ');
-
!การทำงาน(){
การแจ้งเตือน ('น้ำ');
-
(การทำงาน(){
การแจ้งเตือน ('น้ำ');
} ()); // การประหารชีวิตเล็กน้อย ~
ฉันหวังว่าบทความนี้จะเป็นประโยชน์กับการเขียนโปรแกรม JavaScript ของทุกคน