JavaScript - Polymorphism

Hai there, bakal-bakal ahli JavaScript! Hari ini, kita akan memulakan sebuah perjalanan yang menarik ke dalam dunia polimorfisme dalam JavaScript. Jangan bimbang jika kata itu mendengarkan menakutkan - menjelang akhir pelajaran ini, anda akan menjalankan polimorfisme seperti seorang pro!

Polimorfisme dalam JavaScript

Mari kita mulakan dengan dasar. Polimorfisme adalah kata yang keren yang berasal dari Yunani, berarti "bentuk banyak." Dalam pengkomputeran, ia merujuk kepada kemampuan objek untuk mengambil bentuk atau tingkah laku yang berbeza. Ber fikir tentang ia seperti seekor kameleon yang mengubah warnanya untuk menyesuaikan diri dengan persekitaran yang berbeza.

Dalam JavaScript, polimorfisme membolehkan kita menggunakan satu antara muka untuk mewakili jenis objek yang berbeza. Ia seperti mempunyai remote univers yang boleh mengendalikan pelbagai peranti - TV anda, pemain DVD, dan sistem bunyi - semua dengan tombol yang sama.

Ini adalah contoh mudah 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 ada fungsi makeSound yang boleh bekerja dengan objek haiwan yang berbeza. Kedua-dua dog dan cat ada method sound, tetapi mereka menghasilkan output yang berbeza. Ini adalah polimorfisme dalam tindakan!

Penimbalan Method

Salah satu aspek utama polimorfisme adalah penimbalan method. Ini berlaku apabila kelas anak memberikan implementasi khusus untuk method yang sudah ditakrifkan dalam kelas induknya.

Mari kita lihat contoh ini:

class Animal {
makeSound() {
return "Haiwan membuat bunyi";
}
}

class Dog extends Animal {
makeSound() {
return "Anjing mengeong";
}
}

class Cat extends Animal {
makeSound() {
return "Kucing meong";
}
}

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

console.log(animal.makeSound()); // Output: Haiwan membuat bunyi
console.log(dog.makeSound());    // Output: Anjing mengeong
console.log(cat.makeSound());    // Output: Kucing meong

Di sini, kita ada kelas Animal dengan method makeSound. Kelas Dog dan Cat menyertai Animal dan menimbal method makeSound dengan implementasi mereka sendiri. Ini membolehkan setiap haiwan untuk mempunyai bunyi yang unik manakala masih menjadi sebahagian daripada keluarga Animal.

Contoh

Mari kita masuk lebih mendalam dengan lebih banyak contoh untuk memperkukuh pengetahuan kita tentang polimorfisme dalam JavaScript.

Contoh 1: Kalkulator Bentuk

Imaginasi kita sedang membina kalkulator bentuk. Kita mahu mengira luas bentuk yang berbeza menggunakan nama method 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("Luasnya adalah: " + shape.calculateArea());
}

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

printArea(circle);    // Output: Luasnya adalah: 78.53981633974483
printArea(rectangle); // Output: Luasnya adalah: 24

Dalam contoh ini, kita ada kelas dasar Shape dan dua kelas turunan, Circle dan Rectangle. Setiap kelas mengimplementasikan method calculateArea mereka sendiri. Fungsi printArea boleh bekerja dengan mana-mana objek bentuk, menunjukkan polimorfisme.

Contoh 2: Sistem Payroll Pekerja

Mari kita buat sistem payroll pekerja mudah 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} bonus adalah: $${employee.calculateBonus()}`);
}

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

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

Dalam contoh ini, kita ada jenis pekerja yang berbeza dengan peraturan kira bonus yang berbeza. Fungsi printBonus boleh bekerja dengan mana-mana objek pekerja, menunjukkan polimorfisme.

Manfaat Menggunakan Polimorfisme dalam JavaScript

Sekarang kita telah melihat polimorfisme dalam tindakan, mari kita berbicara tentang mengapa ia begitu menakjubkan:

1. Keserasian Kod: Polimorfisme membolehkan kita menulis kod yang lebih generik dan boleh digunakan semula. Fungsi printArea dan printBonus kita boleh bekerja dengan mana-mana objek bentuk atau objek pekerja, masing-masing.

2. Keserasian: Ia lebih mudah untuk menambah jenis objek baru tanpa mengubah kod yang ada. Kita boleh menambah kelas Triangle ke kalkulator bentuk kita tanpa mengubah fungsi printArea.

3. Kemudahan Penyelenggaraan: Polimorfisme boleh membawa kepada kod yang lebih bersih, lebih teratur, dan mudah dipelihara dan diperluas.

4. Abstraksi: Ia membolehkan kita bekerja dengan objek di tahap abstrak tinggi, memfokuskan kepada apa yang objekbuat daripada bagaimana ia melakukannya.

Di sini ada jadual yang menggabungkan method utama yang kita gunakan dalam contoh kita:

Method	Description
calculateArea()	Mengira luas bentuk
calculateBonus()	Mengira bonus pekerja
makeSound()	Mengembalikan bunyi haiwan
sound()	Mengembalikan bunyi haiwan (dalam contoh object literal)

Ingat, padawans muda, polimorfisme adalah seperti mempunyai pisau瑞士 Army di dalam kotak alat pengkomputeran anda. Ia universal, kuat, dan boleh membuat kod anda lebih indah dan efisien. Terus berlatih, dan segera anda akan menjadi ahli JavaScript dengan polimorfisme!

Credits: Image by storyset