JavaScript - pewarisan

Hai sana, para ahli JavaScript masa depan! Hari ini, kita akan mengemban perjalanan yang menarik melalui dunia magis pewarisan di JavaScript. Jangan khawatir jika Anda baru saja memulai programming; saya akan menjadi panduan ramah Anda, dan kita akan meng eksplor konsep ini langkah demi langkah. Jadi, ambil keyboard virtual Anda (wands), dan mari kita masuk ke dalam!

Pewarisan di JavaScript

Pewarisan seperti menyampaikan kesenangan keluarga, tapi di dunia programming. Bayangkan Anda membuat pohon keluarga objek, di mana anak dapat mewarisi properti dan metode dari orang tuanya. Keren, kan?

Mari kita mulai dengan contoh sederhana:

class Animal {
constructor(name) {
this.name = name;
}

speak() {
console.log(`${this.name} membuat suara.`);
}
}

class Dog extends Animal {
bark() {
console.log(`${this.name} brak: Woof woof!`);
}
}

const myDog = new Dog("Buddy");
myDog.speak(); // Output: Buddy membuat suara.
myDog.bark();  // Output: Buddy brak: Woof woof!

Dalam contoh ini, Dog mewarisi dari Animal. Ini berarti Dog mendapatkan semua properti dan metode Animal, ditambah metode uniknya sendiri bark(). Itu seperti Buddy mewarisi kemampuan berbicara dari semua hewan, tetapi juga memiliki superpower braknya sendiri!

Pewarisan Single Class di JavaScript

Pewarisan single class adalah saat sebuah kelas mewarisi dari hanya satu kelas induk. Itu seperti memiliki satu orang tua yang super keren yang Anda ingin belajar segalanya dari.

Ini adalah contoh lainnya:

class Vehicle {
constructor(brand) {
this.brand = brand;
}

start() {
console.log(`Memulai ${this.brand}.`);
}
}

class Car extends Vehicle {
honk() {
console.log(`${this.brand} mobil bersuara beep beep!`);
}
}

const myCar = new Car("Toyota");
myCar.start(); // Output: Memulai Toyota.
myCar.honk();  // Output: Toyota mobil bersuara beep beep!

Di sini, Car mewarisi dari Vehicle. Itu seperti mobil Anda belajar bagaimana memulai dari konsep umum kendaraan, tapi juga tahu bagaimana mengocok karena, well, itu adalah mobil!

Keyword super() di JavaScript

Sekarang, mari bicarakan tentang kata kunci super(). Itu seperti memberi salam hormat kepada orang tua Anda, mengakui kontribusi mereka ke awesomeness Anda.

class Animal {
constructor(name) {
this.name = name;
}
}

class Dog extends Animal {
constructor(name, breed) {
super(name); // Memanggil constructor induk
this.breed = breed;
}

introduce() {
console.log(`Saya ${this.name}, anjing ${this.breed}.`);
}
}

const myDog = new Dog("Max", "Labrador");
myDog.introduce(); // Output: Saya Max, anjing Labrador.

Panggilan super(name) di constructor Dog seperti mengatakan, "Hey, induk Animal, bisakah Anda menangani pengaturan nama untuk saya?" Itu adalah cara untuk menggunakan logika constructor induk.

Pewarisan Multilevel di JavaScript

Pewarisan multilevel seperti pohon keluarga dengan beberapa generasi. mari lihat contoh:

class Animal {
constructor(name) {
this.name = name;
}

eat() {
console.log(`${this.name} makan.`);
}
}

class Dog extends Animal {
bark() {
console.log(`${this.name} berkata woof!`);
}
}

class Labrador extends Dog {
swim() {
console.log(`${this.name} sedang berenang.`);
}
}

const myDog = new Labrador("Charlie");
myDog.eat();  // Output: Charlie makan.
myDog.bark(); // Output: Charlie berkata woof!
myDog.swim(); // Output: Charlie sedang berenang.

Di sini, Labrador mewarisi dari Dog, yang mewarisi dari Animal. Itu seperti Charlie the Labrador belajar makan dari semua hewan, brak dari anjing, dan memiliki kemampuan berenangnya sendiri.

Pewarisan Hierarkis di JavaScript

Pewarisan hierarkis adalah saat beberapa kelas mewarisi dari induk tunggal. Itu seperti saudara mendapatkan kesenangan dari orang tua yang sama.

class Vehicle {
constructor(brand) {
this.brand = brand;
}

start() {
console.log(`Memulai ${this.brand}.`);
}
}

class Car extends Vehicle {
drive() {
console.log(`Mengendarai ${this.brand} mobil.`);
}
}

class Motorcycle extends Vehicle {
wheelie() {
console.log(`Membuat wheelie di ${this.brand} motor!`);
}
}

const myCar = new Car("Toyota");
const myBike = new Motorcycle("Harley");

myCar.start();    // Output: Memulai Toyota.
myCar.drive();    // Output: Mengendarai Toyota mobil.

myBike.start();   // Output: Memulai Harley.
myBike.wheelie(); // Output: Membuat wheelie di Harley motor!

Kedua Car dan Motorcycle mewarisi dari Vehicle, tapi mereka masing-masing memiliki metode unik mereka sendiri.

Pewarisan Anggota Statis Kelas

Anggota statis milik kelas itu sendiri, bukan instance. Tetapi mereka masih dapat mewarisi! mari lihat bagaimana:

class MathOperations {
static PI = 3.14159;

static calculateCircleArea(radius) {
return this.PI * radius * radius;
}
}

class AdvancedMath extends MathOperations {
static calculateSphereVolume(radius) {
return (4/3) * this.PI * radius * radius * radius;
}
}

console.log(AdvancedMath.PI); // Output: 3.14159
console.log(AdvancedMath.calculateCircleArea(5)); // Output: 78.53975
console.log(AdvancedMath.calculateSphereVolume(3)); // Output: 113.09733

Di sini, AdvancedMath mewarisi properti statis PI dan metode calculateCircleArea dari MathOperations.

Pewarisan Berdasarkan Prototype di JavaScript

Sebelum kelas ES6, JavaScript menggunakan pewarisan berdasarkan prototype. Itu agak sulit, tapi tetap penting untuk dipahami:

function Animal(name) {
this.name = name;
}

Animal.prototype.speak = function() {
console.log(`${this.name} membuat suara.`);
};

function Dog(name) {
Animal.call(this, name);
}

Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

Dog.prototype.bark = function() {
console.log(`${this.name} brak: Woof woof!`);
};

const myDog = new Dog("Rex");
myDog.speak(); // Output: Rex membuat suara.
myDog.bark();  // Output: Rex brak: Woof woof!

Ini mencapai hasil yang sama seperti contoh kelas pertama kita, tapi menggunakan sintaksis prototype yang lebih tua.

Manfaat Pewarisan

Pewarisan di JavaScript menawarkan beberapa keuntungan:

1. Reusabilitas Kode
2. Ekstensi
3. Penyusunan
4. Polimorfisme

Berikut adalah tabel yang menggabungkan keuntungan ini:

Manfaat	Deskripsi
Reusabilitas Kode	Mewarisi properti dan metode dari kelas induk, mengurangi duplikasi
Ekstensi	Mudah menambahkan fitur baru ke kelas yang sudah ada
Penyusunan	Perubahan di kelas induk secara otomatis tercermin di kelas anak
Polimorfisme	Menggunakan objek kelas yang berbeda melalui interface yang sama

Ingat, dengan kekuatan yang besar datang tanggung jawab yang besar. Gunakan pewarisan bijak, dan kode Anda akan berterima kasih!

Dan itulah, teman-teman! Kita telah melakukan perjalanan melalui negeri pewarisan JavaScript. Saya harap panduan ini telah menerangi jalan bagi Anda. Tetap latih, tetap curiga, dan selamat coding!

Credits: Image by storyset