JavaScript - Polimorfisme

Halo sana, para ahli JavaScript masa depan! Hari ini, kita akan memulai perjalanan menarik ke dunia polimorfisme dalam JavaScript. Jangan khawatir jika kata itu terdengar menakutkan - pada akhir pelajaran ini, Anda akan bisa menggunaikan polimorfisme seperti seorang pro!

JavaScript - Polymorphism

Polimorfisme dalam JavaScript

mari mulai dari dasar. Polimorfisme adalah kata yang indah yang berasal dari Yunani, berarti "banyak bentuk." Dalam pemrograman, itu merujuk kepada kemampuan objek untuk mengambil bentuk atau perilaku yang berbeda. Pikirkan seperti kadal yang mengubah warnanya untuk menyesuaikan diri dengan lingkungan yang berbeda.

Dalam JavaScript, polimorfisme memungkinkan kita untuk menggunakan satu antarmuka untuk mewakili jenis objek yang berbeda. Itu seperti memiliki remote universal yang dapat mengoperasikan berbagai perangkat - TV Anda, pemutar DVD, dan sistem suara - semua dengan tombol yang sama.

Berikut adalah contoh sederhana untuk mengilustrasikan konsep ini:

function makeSound(animal) {
console.log(animal.sound());
}

let dog = {
sound: function() {
return "Woof!";
}
};

let cat = {
sound: function() {
return "Meow!";
}
};

makeSound(dog); // Output: Woof!
makeSound(cat); // Output: Meow!

Dalam contoh ini, kita memiliki fungsi makeSound yang dapat bekerja dengan objek hewan yang berbeda. Kedua dog dan cat memiliki metode sound, tapi mereka menghasilkan output yang berbeda. Ini adalah polimorfisme dalam aksi!

Overriding Metode

Salah satu aspek kunci dari polimorfisme adalah overriding metode. Hal ini terjadi saat kelas anak menyediakan implementasi khusus untuk metode yang sudah didefinisikan dalam kelas induknya.

mari lihat contoh:

class Animal {
makeSound() {
return "The animal makes a sound";
}
}

class Dog extends Animal {
makeSound() {
return "The dog barks";
}
}

class Cat extends Animal {
makeSound() {
return "The cat meows";
}
}

let animal = new Animal();
let dog = new Dog();
let cat = new Cat();

console.log(animal.makeSound()); // Output: The animal makes a sound
console.log(dog.makeSound());    // Output: The dog barks
console.log(cat.makeSound());    // Output: The cat meows

Di sini, kita memiliki kelas Animal dengan metode makeSound. Kelas Dog dan Cat meng-extend Animal dan meng-overriding metode makeSound dengan implementasi mereka sendiri. Hal ini memungkinkan setiap hewan memiliki suara yang unik tetapi tetap menjadi bagian dari keluarga Animal.

Contoh

mari masuk lebih mendalam dengan lebih banyak contoh untuk memperkuat pemahaman kita tentang polimorfisme dalam JavaScript.

Contoh 1: Kalkulator Bentuk

Bayangkan kita sedang membangun kalkulator bentuk. Kita ingin menghitung luas bentuk yang berbeda menggunakan nama metode yang sama.

class Shape {
calculateArea() {
return 0;
}
}

class Circle extends Shape {
constructor(radius) {
super();
this.radius = radius;
}

calculateArea() {
return Math.PI * this.radius * this.radius;
}
}

class Rectangle extends Shape {
constructor(width, height) {
super();
this.width = width;
this.height = height;
}

calculateArea() {
return this.width * this.height;
}
}

function printArea(shape) {
console.log("The area is: " + shape.calculateArea());
}

let circle = new Circle(5);
let rectangle = new Rectangle(4, 6);

printArea(circle);    // Output: The area is: 78.53981633974483
printArea(rectangle); // Output: The area is: 24

Dalam contoh ini, kita memiliki kelas dasar Shape dan dua kelas turunan, Circle dan Rectangle. Setiap kelas mengimplementasikan metode calculateArea mereka sendiri. Fungsi printArea dapat bekerja dengan objek bentuk apa pun, menunjukkan polimorfisme.

Contoh 2: Sistem Gaji Karyawan

mari buat sistem gaji karyawan sederhana untuk mengilustrasikan polimorfisme lebih lanjut:

class Employee {
constructor(name, salary) {
this.name = name;
this.salary = salary;
}

calculateBonus() {
return this.salary * 0.1;
}
}

class Manager extends Employee {
calculateBonus() {
return this.salary * 0.2;
}
}

class Developer extends Employee {
calculateBonus() {
return this.salary * 0.15;
}
}

function printBonus(employee) {
console.log(`${employee.name}'s bonus is: $${employee.calculateBonus()}`);
}

let john = new Employee("John", 50000);
let jane = new Manager("Jane", 70000);
let bob = new Developer("Bob", 60000);

printBonus(john); // Output: John's bonus is: $5000
printBonus(jane); // Output: Jane's bonus is: $14000
printBonus(bob);  // Output: Bob's bonus is: $9000

Dalam contoh ini, kita memiliki jenis karyawan berbeda dengan aturan perhitungan bonus yang berbeda. Fungsi printBonus dapat bekerja dengan objek karyawan apa pun, menunjukkan polimorfisme.

Manfaat Penggunaan Polimorfisme dalam JavaScript

Sekarang kita telah melihat polimorfisme dalam aksi, mari bicarakan mengapa ini sangat bagus:

  1. Kemandirian Kode: Polimorfisme memungkinkan kita menulis kode yang lebih umum dan dapat digunakan kembali. Fungsi printArea dan printBonus kita dapat bekerja dengan objek bentuk apa pun atau karyawan apa pun, masing-masing.

  2. Flexibilitas: Lebih mudah menambah jenis objek baru tanpa mengubah kode yang sudah ada. Kita dapat menambah kelas Triangle ke kalkulator bentuk kita tanpa memodifikasi fungsi printArea.

  3. Kemudahan Pemeliharaan: Polimorfisme dapat mengarah ke kode yang lebih bersih, lebih terorganisir, dan mudah dipelihara dan diperluas.

  4. Abstraksi: Itu memungkinkan kita bekerja dengan objek pada tingkat abstraksi yang lebih tinggi, fokus pada apa yang dilakukan objek daripada bagaimana mereka melakukannya.

Berikut adalah tabel yang menggabungkan metode utama yang kita gunakan dalam contoh kita:

Metode Deskripsi
calculateArea() Menghitung luas bentuk
calculateBonus() Menghitung bonus karyawan
makeSound() Mengembalikan suara yang dihasilkan oleh hewan
sound() Mengembalikan suara yang dihasilkan oleh hewan (dalam contoh object literal)

Ingat, para padawan muda, polimorfisme seperti memiliki pisau瑞士 Army knife di dalam kotak alat pemrograman Anda. Itu multifungsi, kuat, dan dapat membuat kode Anda lebih elegan dan efisien. Terus berlatih, dan segera Anda akan menjadi ahli JavaScript dengan polimorfisme!

Credits: Image by storyset