主導 JavaScript 中的物件導向程式設計 (OOP)。

介紹

物件導向程式設計 (OOP) 是建構結構良好、模組化和可重複使用程式碼的基礎。雖然 JavaScript 最初是過程性的，但 ES6 及更高版本引入了 OOP 語法，使其成為掌握函數式和物件導向範例的理想語言。本文涵蓋了 JavaScript 中的基本 OOP 概念，包括類別、繼承、多態性和抽象，以及 JavaScript 特定的功能，例如原型繼承和物件組合。

JavaScript 中 OOP 的關鍵概念

1.封裝：
封裝允許對物件內的資料和方法進行分組，限制對物件狀態的直接存取。這可以保護資料免受意外修改並允許受控互動。

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.繼承：
繼承允許基於父類別建立子類，允許程式碼重複使用和定義層次結構。

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.多態性：
多態性讓不同的類別響應相同的函數或方法呼叫。 JavaScript 透過方法重寫實現多態性。

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.摘要：
抽象透過僅暴露必要的部分來簡化複雜的系統。 ES2020引入了帶有#的私有字段，允許封裝在類別中。

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

JavaScript 中基於原型的繼承

JavaScript 是基於原型的，這意味著物件可以直接從其他物件而不是類別繼承。這是透過原型實現的，原型是其他物件繼承方法和屬性的物件。

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.

組合優於繼承

組合是繼承的替代方案，您無需在層次結構中建立類，而是建立包含較小的可重複使用物件的物件來實現所需的功能。

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!

JavaScript 中的高階 OOP 模式

1。工廠模式：
工廠模式是一種設計模式，您可以在不指定確切類別的情況下建立物件。它對於封裝物件的建立邏輯很有用。

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。單例模式：
Singleton 是一種設計模式，其中一個類別只有一個實例。它對於創建全域可存取的物件（例如配置或應用程式狀態）非常有用。

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。觀察者模式：
觀察者模式定義了一種依賴關係，其中一個物件（主題）的變更會導致其他物件（觀察者）的通知。

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.

挑戰和最佳實踐

1。避免繼承過度使用： 傾向於組合以獲得更好的靈活性和重複使用性。
2.盡量減少副作用： 保持資料封裝以防止意外變更。
3.使用 Object.freeze： 這可以防止不可變物件的意外修改。

在最後

JavaScript 的 OOP 方法提供了一個靈活的混合模型，結合了基於原型的繼承和經典的 OOP。借助 ES6 的進步（例如類別和私人字段），JavaScript 允許開發人員建立複雜的應用程序，同時保持乾淨的程式碼結構。透過掌握 JavaScript 中的 OOP，您可以為實際應用程式建立可擴充、可維護且高效能的程式碼。

---

我的個人網站：https://shafayet.zya.me

---

給你的表情包？ ？ ？

以上是主導 JavaScript 中的物件導向程式設計 (OOP)。的詳細內容。更多資訊請關注PHP中文網其他相關文章！