Menguasai Pengaturcaraan Berorientasikan Objek (OOP) dalam JavaScript.

pengenalan

Pengaturcaraan Berorientasikan Objek (OOP) adalah asas untuk membina kod berstruktur, modular dan boleh digunakan semula. Walaupun JavaScript pada mulanya adalah prosedural, ES6 dan seterusnya memperkenalkan sintaks untuk OOP, menjadikannya bahasa yang ideal untuk menguasai kedua-dua paradigma berfungsi dan berorientasikan objek. Artikel ini merangkumi konsep OOP asas dalam JavaScript, termasuk kelas, warisan, polimorfisme dan abstraksi, bersama-sama dengan ciri khusus JavaScript seperti warisan prototaip dan komposisi objek.

Konsep Utama OOP dalam JavaScript

1. Enkapsulasi:
Enkapsulasi membenarkan pengumpulan data dan kaedah dalam objek, menyekat akses terus kepada keadaan objek. Ini memastikan data dilindungi daripada pengubahsuaian yang tidak diingini dan membenarkan interaksi terkawal.

class Car {
    constructor(make, model) {
        this.make = make;
        this.model = model;
        this._engineOn = false;
    }

    startEngine() {
        this._engineOn = true;
        console.log(`${this.make} ${this.model} engine started.`);
    }

    stopEngine() {
        this._engineOn = false;
        console.log(`${this.make} ${this.model} engine stopped.`);
    }
}

const myCar = new Car("Toyota", "Corolla");
myCar.startEngine(); // Output: Toyota Corolla engine started.

2.Warisan:
Warisan membolehkan membuat kelas anak berdasarkan kelas induk, membenarkan penggunaan semula kod dan menentukan hierarki.

class Animal {
    constructor(name) {
        this.name = name;
    }
    speak() {
        console.log(`${this.name} makes a sound.`);
    }
}

class Dog extends Animal {
    speak() {
        console.log(`${this.name} barks.`);
    }
}

const myDog = new Dog("Max");
myDog.speak(); // Output: Max barks.

3. Polimorfisme:
Polimorfisme membolehkan kelas yang berbeza bertindak balas kepada fungsi atau panggilan kaedah yang sama. JavaScript mencapai polimorfisme melalui kaedah mengatasi.

class Printer {
    print() {
        console.log("Printing document...");
    }
}

class PDFPrinter extends Printer {
    print() {
        console.log("Printing PDF document...");
    }
}

const printer = new Printer();
const pdfPrinter = new PDFPrinter();

printer.print(); // Printing document...
pdfPrinter.print(); // Printing PDF document...

4. Abstraksi:
Abstraksi memudahkan sistem yang kompleks dengan mendedahkan bahagian yang diperlukan sahaja. ES2020 memperkenalkan medan peribadi dengan #, membenarkan enkapsulasi dalam kelas.

class Account {
    #balance;
    constructor(initialBalance) {
        this.#balance = initialBalance;
    }
    deposit(amount) {
        this.#balance += amount;
    }
    getBalance() {
        return this.#balance;
    }
}

const myAccount = new Account(1000);
myAccount.deposit(500);
console.log(myAccount.getBalance()); // Output: 1500

Warisan Berasaskan Prototaip dalam JavaScript

JavaScript adalah berasaskan prototaip, bermakna objek boleh mewarisi secara langsung daripada objek lain dan bukannya kelas. Ini dicapai melalui prototaip, iaitu objek dari mana objek lain mewarisi kaedah dan sifat.

function Vehicle(type) {
   this.type = type;
}

Vehicle.prototype.start = function() {
   console.log(`${this.type} is starting.`);
};

const car = new Vehicle("Car");
car.start(); // Car is starting.

Komposisi atas Warisan

Komposisi ialah alternatif kepada warisan di mana bukannya mencipta kelas dalam hierarki, anda mencipta objek yang mengandungi objek yang lebih kecil dan boleh digunakan semula untuk mencapai kefungsian yang diingini.

const canFly = {
   fly() {
       console.log("Flying!");
   }
};

const canSwim = {
   swim() {
       console.log("Swimming!");
   }
};

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

Object.assign(Fish.prototype, canSwim);

const fish = new Fish("Nemo");
fish.swim(); // Swimming!

Corak OOP Lanjutan dalam JavaScript

1. Corak Kilang:
Corak Kilang ialah corak reka bentuk di mana anda mencipta objek tanpa menyatakan kelas yang tepat. Ia berguna untuk merangkum logik penciptaan objek.

function createUser(name, role) {
    return {
        name,
        role,
        describe() {
            console.log(`${this.name} is a ${this.role}`);
        }
    };
}

const admin = createUser("Alice", "Administrator");
admin.describe(); // Alice is an Administrator

2. Corak Singleton:
Singleton ialah corak reka bentuk di mana kelas hanya mempunyai satu contoh. Ia berguna untuk mencipta objek yang boleh diakses secara global seperti konfigurasi atau keadaan aplikasi.

const Singleton = (function () {
    let instance;
    function createInstance() {
        return new Object("I am the instance");
    }
    return {
        getInstance: function () {
            if (!instance) {
                instance = createInstance();
            }
            return instance;
        }
    };
})();

const instance1 = Singleton.getInstance();
const instance2 = Singleton.getInstance();

console.log(instance1 === instance2); // true

3. Corak Pemerhati:
Corak Pemerhati mentakrifkan hubungan pergantungan di mana perubahan dalam satu objek (subjek) membawa kepada pemberitahuan untuk objek lain (pemerhati).

class Car {
    constructor(make, model) {
        this.make = make;
        this.model = model;
        this._engineOn = false;
    }

    startEngine() {
        this._engineOn = true;
        console.log(`${this.make} ${this.model} engine started.`);
    }

    stopEngine() {
        this._engineOn = false;
        console.log(`${this.make} ${this.model} engine stopped.`);
    }
}

const myCar = new Car("Toyota", "Corolla");
myCar.startEngine(); // Output: Toyota Corolla engine started.

Cabaran dan Amalan Terbaik

1. Mengelakkan Penggunaan Berlebihan Warisan: Pilih komposisi untuk fleksibiliti dan penggunaan semula yang lebih baik.
2. Meminimumkan Kesan Sampingan: Simpan data dalam kapsul untuk mengelakkan perubahan yang tidak diingini.
3. Menggunakan Object.freeze: Ini menghalang pengubahsuaian yang tidak disengajakan dalam objek tidak berubah.

Di Akhir

Pendekatan JavaScript terhadap OOP menyediakan model hibrid yang fleksibel yang menggabungkan pewarisan berasaskan prototaip dan OOP klasik. Dengan kemajuan ES6 seperti kelas dan medan persendirian, JavaScript membenarkan pembangun membina aplikasi yang kompleks sambil mengekalkan struktur kod yang bersih. Dengan menguasai OOP dalam JavaScript, anda boleh membina kod berskala, boleh diselenggara dan berprestasi untuk aplikasi dunia sebenar.

---

Tapak web peribadi saya: https://shafayet.zya.me

---

Meme untuk anda???

Atas ialah kandungan terperinci Menguasai Pengaturcaraan Berorientasikan Objek (OOP) dalam JavaScript.. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!