Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. JavaScript

Inheritance dan Extending Objek dengan JavaScript

by
Difficulty:IntermediateLength:MediumLanguages:

Indonesian (Bahasa Indonesia) translation by Muhammad Gufron (you can also view the original English article)

Jika kamu sudah familiar dengan pemrograman berorientasi obyek, kamu paling mungkin akrab dengan subclassing dan inheritance. Namun, inheritance telah mendapatkan rap buruk. Saya percaya itu karena beberapa pengembang melihatnya sebagai catch-all solusi ketika kamu perlu untuk memodifikasi sebuah program. Masalah ini adalah bahwa kelas hierarki dapat menjadi tidak dapat diatur.

Ada design patterns lain yang bisa kita gunakan untuk membuat aplikasi kita lebih mudah dipahami dan siap untuk diubah. Saya akan menunjukkan contoh bagaimana kamu bisa menggunakan inheritance. decorator dan comosite pattern untuk memperbaiki rancangan program mu.

Inheritance

Ide di balik inheritance adalah satu objek "is a" versi khusus dari objek lain. Ada parent class (juga dikenal sebagai superclass) yang mendefinisikan sifat dasar dari objek. Dan ada child class (subclass) yang mewarisi sifat-sifat parent class.

Contoh dari inheritance adalah seekor anjing dan pudel. Semua anjing memiliki fitur tertentu seperti empat kaki dan kemampuan untuk kulit. Pudel "adalah" jenis anjing. Sebuah SUV adalah kendaraan. Lingkaran A adalah bentuk. Ini adalah apa yang hirarki kelas kami akan terlihat seperti jika kita merancang program untuk membuat bentuk.

A basic inheritance diagram

Manfaat dari memiliki kelas Shape adalah bahwa kita dapat menggunakan kembali properti dan metode yang kami didefinisikan dalam kelas-kelas lain.

Perhatikan bahwa metode getArea adalah didefinisikan ulang setiap dari subclass kita. Kita tidak harus mendefinisikan kembali metode ini, tapi kami melakukannya untuk menggantikan metode penerapan pada parent. Itu karena masing-masing bentuk akan memiliki cara tersendiri untuk menghitung area tersebut.

Meng-override metode orangtua dalam anak kelas adalah contoh polimorfisme. Polimorfisme adalah kemampuan untuk objek untuk memiliki beberapa bentuk. Hal ini memungkinkan subclass untuk memiliki metode dengan nama yang sama sebagai superclass mereka tetapi dengan implementasi yang berbeda.

Ini adalah contoh dari apa yang kami kode akan terlihat seperti untuk membuat subclass bentuk dan lingkaran:

Salah satu kelemahan untuk pilihan desain ini adalah bahwa jika Anda memutuskan parent class harus berubah, maka subclass mungkin perlu mengubah juga, bersama dengan semua benda kita diciptakan.

Misalnya, kami kemudian memutuskan bahwa akan lebih baik untuk menggantikan x dan y parameter bentuk kelas dengan objek. Akibatnya, kita akan perlu mengubah constructor untuk semua subclass kami dan argumen untuk setiap objek yang kita instantiated.

Kita dapat melihat bagaimana hal ini dapat dengan mudah menjadi bermasalah. Kita harus memastikan bahwa kami punya waktu kita kanan pertama desain di sekitar sehingga kita bisa menghindari membuat perubahan. Namun yang tidak praktis, juga bukan apa yang kita harus berjuang untuk. Program adalah entitas yang selalu berkembang, dan lebih baik bagi pengembang jika kita memiliki fleksibilitas untuk melakukan perubahan dengan mudah. Paling tidak, kita seharusnya tidak memiliki lebih dari satu tingkat kelas anak.

Decorator Pattern

Dekorator memungkinkan kita melampirkan properti ke objek setelah diciptakan. Ini berarti kita bisa menambahkan fungsionalitas tanpa subclassing atau peduli dengan pelaksanaan objek kita.

Alih-alih memikirkan lingkaran adalah sebuah bentuk, kita bisa menggunakan kelas Shape untuk membuat lingkaran dan membungkusnya dengan properti tambahan yang kita inginkan. Berikut adalah alternatif untuk membuat objek lingkaran menggunakan dekorator:

Kita dapat menambahkan atau memodifikasi anggota kelas Shape kita dengan dekorator yang bertentangan dengan subkelasnya. Dengan contoh bentuk kita, kamu mungkin menemukan bahwa kamu hanya ingin membuat lingkaran objek yang memiliki semua properti kamu butuhkan dan melakukan hal yang sama untuk bentuk lainnya. Itu baik-baik saja. Tapi decorator memungkinkan kita untuk menggunakan kembali kode dalam Shape class dan memodifikasinya dengan fungsionalitas yang berbeda dengan setiap shape. Sebagai hasilnya, kita akan memiliki obyek yang lebih, tetapi benda-benda lain lebih mudah untuk mengelola daripada subclass lain.

Pola ini tidak dibatasi untuk menciptakan grafis. Kamu dapat menggunakannya dalam situasi di mana kamu ingin menambahkan tanggung-jawab ke objek.

Sebagai contoh, kita mungkin memiliki kelas yang menangani sign up pengguna ke rekening kita. Sebelum kita menyimpan informasi mereka ke database kita, akan bijaksana untuk memeriksa bahwa input yang valid dan tidak berisi skrip berbahaya apapun. Kita bisa menghias class dengan method untuk memvalidasi informasi pertama. Dekorator yang sama ini dapat digunakan kembali di manapun dalam aplikasi kita saat kita menerima inputan pengguna.

Composite Pattern

Objek dapat terdiri dari objek lainnya. Tampilan untuk aplikasi dapat dianggap sebagai komponen yang terdiri dari tampilan lain. Jika kita membuat game, dunia game kita akan menampilkan semua grafis kita yang kita buat seperti lingkaran dan kotak. Setiap kali kita memperbarui tampilan kita, kita perlu menggambar ulang setiap elemen. Kita membutuhkan cara untuk mengelola semua elemen sebagai sebuah kelompok.

Karena itulah composite pattern dapat membantu kita. Kita dapat membuat sebuah class yang bertanggung jawab untuk semua elemen. Ketika kita ingin menggambar ulang elemen, kita menyebutnya method class ini draw, dan itu akan memanggil method draw pada masing-masing element.

Halaman web dapat juga dianggap sebagai komponen. Komponen ini dapat memiliki menu, sidebar dan posting blog. Posting akan menjadi sub komponen yang memiliki gambar, judul, dan body. Metode draw untuk komponen aplikasi utama kami akan memanggil draw pada menu, sidebar, dan post. Komponen post pada gilirannya di panggil untuk menarik pada post gambar, judul, dan body.

Berikut adalah tampilan tentang halaman web yang akan dibagi menjadi beberapa komponen:

The Composite Pattern

Pola ini tidak terbatas untuk menciptakan tampilan. Sebagai contoh, jika kita membuat sebuah game, kita mungkin memiliki komponen untuk mengelola elemen pada layar, komponen untuk mengelola audio dan sebuah komponen untuk mengelola status game.

Ini semua akan dalam komponen aku sebut game engine. Game engine akan memiliki metode inisialisasi yang akan memanggil metode inisialisasi pada masing-masing komponen sub. Itulah kekuatan dalam menggunakan pola komposit. Alih-alih berurusan dengan objek individu, kita dapat memperlakukan mereka sebagai objek.

Kesimpulan

Inheritance mari kita menggunakan kembali kode dengan mendefinisikan objek dalam objek lain. Pola dekorator memungkinkan kita untuk menambahkan responsibilities ke objek tanpa mengubah kode asli atau subclassing. Composite pattern model bagian-seluruh hubungan. Pola-pola ini tidak dimaksudkan untuk digunakan dalam isolasi.

JavaScript telah menjadi bahasa yang bekerja di web. Ini bukan tanpa kurva belajarnya, dan ada banyak kerangka kerja dan perpustakaan untuk membuat kamu sibuk, juga. Jika Anda sedang mencari sumber daya tambahan untuk belajar atau menggunakan dalam pekerjaan mu, cek apa yang kita miliki tersedia di Envato Market.

Mereka dapat dikombinasikan seperti yang kamu lihat cocok. Contoh-contoh yang saya berikan juga tidak boleh dianggap sebagai satu-satunya aplikasi untuk menggunakan patterns. Itu adalah hanya panduan. Jangan ragu untuk menggunakan kreativitas mu untuk menerapkannya. Tidak ada satu cara untuk menerapkannya atau satu use case

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.