รูปแบบ JavaScript นี้เรียกว่าอะไรและเหตุใดจึงใช้

ฉันกำลังศึกษาTHREE.jsและสังเกตเห็นรูปแบบที่มีการกำหนดฟังก์ชันดังนี้:

var foo = ( function () {
    var bar = new Bar();

    return function ( ) {
        //actual logic using bar from above.
        //return result;
    };
}());

(ตัวอย่างดูวิธีการ raycast ที่นี่ )

ปกติรูปแบบของวิธีการดังกล่าวจะมีลักษณะเช่นนี้

var foo = function () {
    var bar = new Bar();

    //actual logic.
    //return result;
};

การเปรียบเทียบเวอร์ชันแรกกับรูปแบบปกติเวอร์ชันแรกดูเหมือนจะแตกต่างกันในสิ่งนั้น:

1. จะกำหนดผลลัพธ์ของฟังก์ชันที่ดำเนินการเอง
2. กำหนดตัวแปรท้องถิ่นภายในฟังก์ชันนี้
3. ส่งคืนฟังก์ชันจริงที่มีตรรกะที่ใช้ตัวแปรโลคัล

ดังนั้นความแตกต่างที่สำคัญก็คือในรูปแบบแรกแถบจะถูกกำหนดเพียงครั้งเดียวเมื่อเริ่มต้นในขณะที่รูปแบบที่สองจะสร้างตัวแปรชั่วคราวนี้ทุกครั้งที่มีการเรียก

ฉันเดาได้ดีที่สุดว่าเหตุใดจึงใช้สิ่งนี้คือ จำกัด จำนวนอินสแตนซ์สำหรับ bar (จะมีเพียงอันเดียว) จึงช่วยประหยัดค่าใช้จ่ายในการจัดการหน่วยความจำ

คำถามของฉัน:

1. สมมติฐานนี้ถูกต้องหรือไม่?
2. มีชื่อลายนี้ไหม
3. ทำไมถึงใช้?

สมมติฐานของคุณเกือบถูกต้อง ลองทบทวนสิ่งเหล่านี้ก่อน

1. มันกำหนดการกลับมาของฟังก์ชันที่ดำเนินการเอง

สิ่งนี้เรียกว่านิพจน์ฟังก์ชันที่เรียกใช้ทันทีหรือIIFE

2. กำหนดตัวแปรท้องถิ่นภายในฟังก์ชันนี้

นี่เป็นวิธีการมีฟิลด์ออบเจ็กต์ส่วนตัวใน JavaScript เนื่องจากไม่ได้ให้privateคำสำคัญหรือฟังก์ชันเป็นอย่างอื่น

3. ส่งคืนฟังก์ชันจริงที่มีตรรกะที่ใช้ตัวแปรโลคัล

อีกครั้งที่จุดหลักคือตัวแปรท้องถิ่นนี้เป็นส่วนตัว

มีชื่อลายนี้ไหม

AFAIK คุณสามารถเรียกรูปแบบนี้แบบโมดูล การอ้างอิง:

รูปแบบโมดูลสรุป "ความเป็นส่วนตัว" สถานะและองค์กรโดยใช้การปิด เป็นวิธีการผสมผสานระหว่างวิธีการและตัวแปรของภาครัฐและเอกชนเพื่อป้องกันชิ้นส่วนต่างๆไม่ให้รั่วไหลไปสู่ขอบเขตทั่วโลกและบังเอิญไปชนกับอินเทอร์เฟซของผู้พัฒนารายอื่น ด้วยรูปแบบนี้จะมีการส่งคืนเฉพาะ API สาธารณะทำให้ทุกอย่างเป็นแบบส่วนตัว

การเปรียบเทียบสองตัวอย่างนี้ฉันเดาได้ดีที่สุดว่าทำไมถึงใช้อันแรกคือ

1. กำลังใช้รูปแบบการออกแบบ Singleton
2. เราสามารถควบคุมวิธีสร้างออบเจ็กต์เฉพาะประเภทได้โดยใช้ตัวอย่างแรก การจับคู่ระยะใกล้กับจุดนี้อาจเป็นวิธีการโรงงานแบบคงที่ตามที่อธิบายไว้ใน Effective Java
3. จะมีประสิทธิภาพหากคุณต้องการสถานะวัตถุเดียวกันทุกครั้ง

แต่ถ้าคุณต้องการวัตถุวานิลลาทุกครั้งรูปแบบนี้อาจไม่เพิ่มมูลค่าใด ๆ

มัน จำกัด ต้นทุนการเริ่มต้นอ็อบเจ็กต์และนอกจากนี้ยังช่วยให้มั่นใจได้ว่าการเรียกใช้ฟังก์ชันทั้งหมดจะใช้เหมือนกันอ็อบเจ็กต์สิ่งนี้ทำให้สามารถจัดเก็บสถานะในออบเจ็กต์เพื่อใช้ในการเรียกใช้ในอนาคตได้

แม้ว่าจะเป็นไปได้ว่าจะ จำกัด การใช้งานหน่วยความจำ แต่โดยปกติ GC จะรวบรวมวัตถุที่ไม่ได้ใช้งานอย่างไรก็ตามรูปแบบนี้ไม่น่าจะช่วยได้มากนัก

รูปแบบนี้เป็นรูปแบบเฉพาะของการปิด

ฉันไม่แน่ใจว่ารูปแบบนี้มีชื่อที่ถูกต้องกว่าหรือไม่ แต่ดูเหมือนว่าโมดูลสำหรับฉันและเหตุผลที่ใช้คือทั้งการห่อหุ้มและเพื่อรักษาสถานะ

การปิด (ระบุโดยฟังก์ชันภายในฟังก์ชัน) ทำให้มั่นใจได้ว่าฟังก์ชันภายในสามารถเข้าถึงตัวแปรภายในฟังก์ชันด้านนอกได้

ในตัวอย่างที่คุณให้ฟังก์ชั่นด้านในจะถูกส่งกลับ (และได้รับมอบหมายให้foo) โดยการดำเนินการฟังก์ชั่นด้านนอกซึ่งหมายความว่าtmpObjectยังคงอาศัยอยู่ภายในปิดและสายหลายฟังก์ชั่นภายในจะดำเนินการในกรณีเดียวกันของfoo()tmpObject

ความแตกต่างที่สำคัญระหว่างรหัสของคุณและรหัส Three.js คือในโค้ด Three.js ตัวแปรtmpObjectจะเริ่มต้นเพียงครั้งเดียวจากนั้นแชร์โดยทุกการเรียกใช้ฟังก์ชันที่ส่งคืน

สิ่งนี้จะมีประโยชน์ในการรักษาสถานะบางอย่างระหว่างการเรียกเช่นเดียวกับการใช้staticตัวแปรในภาษาคล้าย C

tmpObject เป็นตัวแปรส่วนตัวที่มองเห็นได้เฉพาะกับฟังก์ชันภายในเท่านั้น

มันเปลี่ยนการใช้หน่วยความจำ แต่ไม่ได้ออกแบบมาเพื่อบันทึกหน่วยความจำ

ฉันต้องการมีส่วนร่วมในเธรดที่น่าสนใจนี้โดยขยายไปสู่แนวคิดของรูปแบบโมดูลที่เปิดเผยซึ่งทำให้มั่นใจได้ว่าวิธีการและตัวแปรทั้งหมดจะถูกเก็บไว้เป็นส่วนตัวจนกว่าจะเปิดเผยอย่างชัดเจน

ในกรณีหลังนี้วิธีการบวกจะถูกเรียกว่า Calculator.add ();

ในตัวอย่างที่ให้มาตัวอย่างแรกจะใช้อินสแตนซ์เดียวกันของ tmpObject สำหรับทุกการเรียกใช้ฟังก์ชัน foo () โดยที่ในตัวอย่างข้อมูลที่สอง tmpObject จะเป็นอินสแตนซ์ใหม่ทุกครั้ง

เหตุผลหนึ่งที่อาจมีการใช้ snippet แรกคือตัวแปร tmpObject สามารถใช้ร่วมกันระหว่างการเรียกไปยัง foo () โดยที่ค่าของมันไม่รั่วไหลออกไปในขอบเขตที่ประกาศ foo ()

เวอร์ชันฟังก์ชันที่ไม่ได้ดำเนินการทันทีของข้อมูลโค้ดแรกจะมีลักษณะดังนี้:

var tmpObject = new Bar();

function foo(){
    // Use tmpObject.
}

อย่างไรก็ตามโปรดทราบว่าเวอร์ชันนี้มี tmpObject ในขอบเขตเดียวกันกับ foo () ดังนั้นจึงสามารถจัดการได้ในภายหลัง

วิธีที่ดีกว่าในการใช้งานฟังก์ชันเดียวกันคือการใช้โมดูลแยกต่างหาก:

โมดูล 'foo.js':

var tmpObject = new Bar();

module.exports = function foo(){
    // Use tmpObject.
};

โมดูล 2:

var foo = require('./foo');

การเปรียบเทียบระหว่างประสิทธิภาพของ IEF และฟังก์ชันผู้สร้าง foo ที่มีชื่อ: http://jsperf.com/ief-vs-named-function