Rumah > hujung hadapan web > tutorial js > Perjalanan Reaksi Saya: Hari 15

Perjalanan Reaksi Saya: Hari 15

DDD
Lepaskan: 2024-12-16 00:47:09
asal
561 orang telah melayarinya

My React Journey: Day 15

Pengaturcaraan Berorientasikan Objek (OOP)
Pengaturcaraan berorientasikan objek ialah paradigma pengaturcaraan berdasarkan konsep objek.

Prinsip Utama OOP
1. Enkapsulasi:

  • Kumpulkan pembolehubah dan fungsi yang berkaitan ke dalam objek.
  • Menggalakkan lebih sedikit parameter dalam fungsi, mengurangkan kerumitan. Contoh:
function Circle(radius) {
    this.radius = radius;
    this.draw = function() {
        console.log('draw');
    };
}
const circle = new Circle(5);
console.log(circle.radius); // Access encapsulated property
circle.draw(); // Call encapsulated method
Salin selepas log masuk

2. Abstraksi:

Menyembunyikan butiran dan kerumitan, mendedahkan bahagian objek yang diperlukan sahaja.
Memudahkan antara muka dan mengurangkan kesan perubahan dalam kod asas.
Contoh: Kaedah abstrak sambil menyembunyikan logik dalaman.

3.Warisan:

Membenarkan kelas (anak) mewarisi sifat dan kaedah daripada kelas lain (ibu bapa).
Mengurangkan kod berlebihan.
Contoh:

class Animal {
    eat() {
        console.log("This animal is eating.");
    }
}
class Dog extends Animal {
    bark() {
        console.log("The dog is barking.");
    }
}
const dog = new Dog();
dog.eat(); // Inherited from Animal
dog.bark();
Salin selepas log masuk

4. Polimorfisme:

Merujuk kepada objek dalam pelbagai bentuk.
Membenarkan antara muka bersatu untuk jenis objek yang berbeza, membolehkan penggunaan semula kod dan fleksibiliti.
Contoh:

class Animal {
    sound() {
        console.log("This animal makes a sound.");
    }
}
class Dog extends Animal {
    sound() {
        console.log("The dog barks.");
    }
}
const animal = new Animal();
const dog = new Dog();
animal.sound(); // Output: This animal makes a sound.
dog.sound();    // Output: The dog barks.
Salin selepas log masuk

Kepentingan OOP

  • Encapsulation: Mengurangkan kerumitan dan meningkatkan kebolehgunaan semula.
  • Abstraksi: Menyembunyikan butiran pelaksanaan, memudahkan interaksi.
  • Warisan: Menghapuskan pertindihan kod dan menggalakkan penggunaan semula.
  • Polymorphism: Mendayakan fleksibiliti dan struktur kod diperkemas.

Contoh Praktikal
Kelas dan Pembina

  • Cara berstruktur dan bersih untuk mencipta objek.
  • Contoh:
class Product {
    constructor(name, price) {
        this.name = name;
        this.price = price;
    }

    displayProduct() {
        console.log(`Product: ${this.name}`);
        console.log(`Price: $${this.price.toFixed(2)}`);
    }

    calculateTotal(salesTax) {
        return this.price + this.price * salesTax;
    }
}

const product1 = new Product("Laptop", 1200);
product1.displayProduct();
console.log(`Total Price: $${product1.calculateTotal(0.1).toFixed(2)}`);
Salin selepas log masuk

Warisan dengan Haiwan

  • Menunjukkan kebolehgunaan semula dan mengatasi kaedah.
  • Contoh:
class Animal {
    eat() {
        console.log("This animal eats food.");
    }
}

class Bird extends Animal {
    fly() {
        console.log("This bird can fly.");
    }
}

const bird = new Bird();
bird.eat();
bird.fly();
Salin selepas log masuk

Refleksi
Apa yang Saya Belajar:

  • Prinsip OOP Teras: Enkapsulasi, Abstraksi, Pewarisan, Polimorfisme.
  • Kes penggunaan praktikal untuk mengurangkan kerumitan kod dan meningkatkan kebolehgunaan semula.
  • Menggunakan pembina, kaedah dan warisan untuk menyelesaikan masalah dunia sebenar.

OOP adalah tahap lain.

Kita pergi lagi esok!

Atas ialah kandungan terperinci Perjalanan Reaksi Saya: Hari 15. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:dev.to
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan