Fungsi Factory dan Fungsi Constructor dalam JavaScript

Mencipta objek satu demi satu adalah satu kesilapan.

Jika anda mempunyai 100 rakan sekelas dan perlu mencipta satu objek untuk setiap orang, menulis objek secara individu akan menimbulkan masalah. Anda mengulang logik anda terlalu banyak kali. Anda juga berisiko menghadapi pepijat (bugs). Sebagai contoh, anda mungkin secara tidak sengaja menindih nama properti kemudian dalam kod anda.

Anda memerlukan cara yang lebih baik untuk menggunakan semula logik.

Factory Functions Bayangkan sebuah kilang. Anda memasukkan bahan mentah dan mendapat produk siap. Fungsi factory melakukan perkara yang sama. Ia menerima parameter dan mengembalikan objek baharu.

Contoh:

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

Pendekatan ini memastikan nama tersebut selamat. Anda tidak boleh mengubah nama tersebut secara tidak sengaja kerana ia kekal di dalam skop fungsi. Anda menulis logik sekali dan menggunakannya semula berkali-kali.

Constructor Functions Fungsi constructor juga mencipta objek. Ia menggunakan kata kunci this dan kata kunci new. Mengikut konvensyen, fungsi-fungsi ini bermula dengan huruf besar.

Contoh:

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

Apabila anda menggunakan kata kunci new, JavaScript melakukan kerja tersebut untuk anda. Ia mencipta objek baharu, menetapkannya kepada this, dan mengembalikannya secara automatik. Anda tidak memerlukan pernyataan return.

Menskalakan kod anda Anda boleh menggabungkan kaedah ini dengan tatasusunan (arrays) untuk mengendalikan jumlah data yang besar.

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

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

Ini menjadikan kod anda bersih dan boleh diskalakan.

Matlamat utamanya adalah mudah:

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