𝗙𝗮𝗰𝘁𝗼𝗿𝘆 𝗙𝘂𝗻𝗰𝘁𝗶𝗼𝗻𝘀 𝗮𝗻𝗱 𝗖𝗼𝗻𝘀𝘁𝗿𝘂𝗰𝘁𝗼𝗿 𝗙𝘂𝗻𝗰𝘁𝗶𝗼𝗻𝘀 𝗶𝗻 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁

การสร้างออบเจกต์ทีละอันเป็นเรื่องที่ผิดพลาด

หากคุณมีเพื่อนร่วมชั้น 100 คน และต้องสร้างออบเจกต์ให้แต่ละคน การเขียนออบเจกต์แยกกันทีละอันจะนำไปสู่ปัญหา คุณต้องเขียนตรรกะเดิมซ้ำๆ มากเกินไป และยังเสี่ยงต่อการเกิดบั๊กอีกด้วย ตัวอย่างเช่น คุณอาจเผลอไปเขียนทับชื่อพร็อพเพอร์ตี้ (property name) ในภายหลังในโค้ดของคุณ

คุณต้องการวิธีที่ดีกว่าในการนำตรรกะกลับมาใช้ใหม่ (reuse logic)

Factory Functions ลองนึกถึงโรงงาน คุณใส่ วัตถุดิบเข้าไปแล้วจะได้ผลิตภัณฑ์ที่สำเร็จรูปออกมา Factory function ก็ทำงานแบบเดียวกัน โดยจะรับพารามิเตอร์ (parameters) และส่งคืน (return) ออบเจกต์ใหม่กลับมา

Example:

function classFactory(name) {
    return {
        reply() {
            return `${name} is present`
        }
    }
}

วิธีนี้ช่วยให้ name ปลอดภัย คุณไม่สามารถเผลอไปเปลี่ยนชื่อได้เพราะมันถูกเก็บไว้ภายในขอบเขตของฟังก์ชัน (function scope) คุณเขียนตรรกะเพียงครั้งเดียวและนำกลับมาใช้ใหม่ได้หลายครั้ง

Constructor Functions Constructor functions ก็ใช้สร้างออบเจกต์เช่นกัน โดยจะใช้คีย์เวิร์ด this และ new ตามธรรมเนียมปฏิบัติ ฟังก์ชันเหล่านี้จะเริ่มต้นด้วยตัวอักษรพิมพ์ใหญ่

Example:

function Classmate(name) {
    this.name = name
    this.reply = function() {
        return `${this.name} is present`
    }
}

เมื่อคุณใช้คีย์เวิร์ด new JavaScript จะจัดการงานส่วนที่เหลือให้คุณเอง โดยมันจะสร้างออบเจกต์ใหม่ กำหนดค่าให้กับ this และส่งคืนออบเจกต์นั้นกลับมาโดยอัตโนมัติ คุณจึงไม่จำเป็นต้องใช้คำสั่ง return

Scaling your code คุณสามารถนำวิธีการเหล่านี้ไปใช้ร่วมกับอาร์เรย์ (arrays) เพื่อจัดการกับข้อมูลจำนวนมากได้

const names = ['Kali', 'Andrew', 'Pearl', 'Percy']
const classmates = names.map(name => new Classmate(name))

classmates.forEach(c => console.log(c.reply()))

สิ่งนี้จะทำให้โค้ดของคุณสะอาดและรองรับการขยายตัวได้ดี (scalable)

เป้าหมายหลักนั้นเรียบง่าย:

Source: https://dev.to/pearlodi/factory-functions-and-constructor-functions-in-javascript-lmb