Pola ini adalah inti dari JavaScript dan “harus dimiliki” untuk diketahui oleh setiap pengembang JS. Hari ini kita akan melihat beberapa contoh dan saran tentang cara menerapkan & menggunakannya.

Halo, pecinta bit favorit saya .

Hari ini kami melanjutkan Pattern Saga kami . Bagi yang ketinggalan artikel saya sebelumnya dari Pattern Saga , Anda bisa melihat daftarnya di bawah ini:

• Pola tunggal
• Pola Pabrik
• Pola Pabrik Abstrak

Artikel ini akan menyertakan contoh untuk JavaScript dan TypeScript .

Definisi

Kita akan mulai dengan definisi:

Pola prototipe dalam JavaScript adalah pola desain kreasional yang memungkinkan Anda membuat objek yang mewarisi properti dan metode dari objek prototipe. Ini mirip dengan pewarisan berbasis kelas dalam pemrograman berorientasi objek.

Beberapa sumber menyatakan bahwa setiap implementasi prototipe HARUS menyertakan pembuatan clonemetode, yang lain mengatakan bahwa jika bahasa pemrograman menyertakan cara lain untuk membuat salinan objek — Anda dapat menggunakannya, dan ini masih akan dihitung sebagai implementasi dari Pola prototipe .

Saya sudah mengatakan di awal bahwa pola ini adalah inti dari JavaScript karena semua yang ada di JS didasarkan pada Pola Prototipe .

Implementasi Kelas

Ini dianggap sebagai implementasi klasik, Anda dapat menemukannya di setiap buku tentang pemrograman.

Ide intinya adalah untuk mengimplementasikan kelas dengan sekumpulan metode yang Anda butuhkan untuk dibuat prototipenya, dan memiliki clonemetode untuk menskalakan implementasi dengan menambahkan metode atau properti tambahan.

Contoh JavaScript

Mari beralih ke pengkodean.

Dalam contoh ini, kami memiliki kelas sederhana yang memiliki 2 metode yang menjelaskan perilaku kelas ini, greetingdan metode greet. Tapi keajaiban ada di balik clonemetode ini, yang pada dasarnya membuat instance baru dari kelas kita.

Perhatikan, bahwa Anda dapat mengganti pendekatan dengan new this.constructor()dengan new Prototype().

Kami menggunakan pola ini sebagai berikut:

const object = new Prototype()

object.greet();

const cloned = object.clone();

cloned.greeting = "Hi there!";

cloned.greet();

Contoh TypeScript

Ketika datang ke TypeScript , agak sulit untuk memodifikasi antarmuka yang sudah ada. Kami ingin menghindari penggunaan askata kunci karena dianggap praktik yang buruk dan hanya dapat digunakan jika Anda tidak dapat menangani pengetikan dengan alat TypeScript lainnya .

Implementasi kelas kami tidak berbeda dengan implementasi JavaScript :

Kami menambahkan sedikit tipifikasi di sini, tetapi juga perlu diingat, bahwa Anda dapat memodifikasi properti dengan readonlyjika kami ingin menghindari properti ditimpa pada turunan.

Penggunaan:

const object: Prototype = new Prototype();

object.greet();

const cloned: Prototype = object.clone();

cloned.greeting = "Hi there!";

cloned.greet();

interface Prototype {
    farewell: () => void;
}

const withNewProperties: Prototype = object.clone();

withNewProperties.farewell = function(): void {
    console.log('Bye')
}

Tapi itu menjadi lebih rumit ketika kita menambahkan dekomposisi tambahan ke basis kode kita. Jika kita membayangkan bahwa kita telah mengekspor Prototypekelas kita, dan kemudian mengimpornya, kita tidak lagi dapat membuat antarmuka baru dengan nama yang sama, karena anggota yang diimpor tidak lagi dianggap sebagai tipe. Itu artinya kita tidak bisa lagi menggunakan fitur TypeScript ini.

Yah, kita bisa menggunakan askata kunci dan memaksanya untuk mengetik apa yang kita inginkan, tetapi sekali lagi, kita memiliki trik lain untuk mencapai tujuan kita.

Tidak semua dari Anda menyadari bahwa ada alternatif askata kunci untuk awalan variabel kita dengan tipe yang kita inginkan dengan sintaks berikut const example = <Array>variable. Perbedaan antara pendekatan ini dan asadalah bahwa dengan pendekatan berikut hanya tipe yang dapat diwariskan secara langsung yang dapat ditetapkan, misalnya, jika kita variableadalah string— kita akan memiliki kesalahan tipe, tetapi jika variabel kita adalah object— kita akan baik-baik saja.

Mari telusuri kodenya.

Seperti yang Anda lihat, kami membuat antarmuka baru yang memperluas Prototypedan menambahkan properti tambahan yang kami inginkan. Kemudian kami mengkloning instance kami, tetapi Anda melihat bahwa kami <Modified>prototype.clone()menetapkan antarmuka yang baru kami buat ke objek yang dikloning, begitulah TypeScript akan mempertimbangkan variabel kami clonedengan tipe yang benar.

Implementasi Objek

Implementasi objek dianggap sebagai pendekatan yang lebih tua dalam JavaScript . Lucunya di sini adalah jika Anda mengkompilasi implementasi kelas ke dalam ES3 , pada akhirnya — Anda akan menerima implementasi objek.

Contoh JavaScript

Implementasi ini dekat, dengan apa yang Anda lihat dalam classimplementasi, dengan sedikit perbedaan, saat kami membuat instance baru dari objek kami, kami menggunakan Object.create. Ini menciptakan instance baru dari objek kita.

Penggunaan tidak berbeda dengan classpendekatan.

const object = prototype.clone();

object.greet();

object.name = "John";

object.greet = function() {
    console.log(this.greeting + " My name is " + this.name);
};

object.greet();

Contoh naskah

Mari ketik membuat deskripsi untuk objek kita terlebih dahulu:

Dan implementasinya sendiri:

Penggunaannya tidak berbeda dengan yang Anda lihat sebelumnya:

const object: Prototype = prototype.clone();

object.greet();

interface Prototype {
    name: string;
}

object.name = "John";

object.greet = function() {
    console.log(this.greeting + " My name is " + this.name);
};

object.greet();

Tips dan Trik

Di awal artikel saya katakan, bahwa implementasi berjalan dianggap sebagai implementasi yang memiliki clonemetode di dalamnya.

TETAPI!

JavaScript memiliki pendekatan lain tentang cara membuat instance objek baru. Mari kita lihat daftar cara bagaimana Anda bisa melakukan ini:

• Object.create(prototype)
• Object.assign({}, prototype)
• {...prototype}

Pola yang cukup fleksibel.

Sayangnya, itu tidak tersebar luas di seluruh pengembang JavaScript.

Pro

• Anda dapat menghilangkan inisialisasi berulang dari instance baru hanya dengan mengkloning objek yang telah ditentukan sebelumnya
• Alternatif fleksibel untuk warisan
• Mudah dapat didefinisikan properti baru

• Membutuhkan sihir voodoo untuk membuatnya bekerja dengan TypeScript
• Sulit untuk mendukung ketika datang ke hierarki objek yang kompleks
• Beberapa orang mungkin menganggap pola ini tidak efisien dalam hal performa dan efisiensi memori

• Tautan ke repositori

Jangan lupa follow, clap dan live comment!

Bagian Anda. XO XO