我的 React 之旅：第 15 天

物件導向程式設計（OOP）
物件導向程式設計是一種基於物件概念的程式設計範式。

物件導向程式設計的關鍵原則
1.封裝：

• 將相關變數和函數分組到一個物件中。
• 鼓勵減少函數中的參數，降低複雜性。 例子：

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

2.摘要：

隱藏細節和複雜性，僅暴露物件的必要部分。
簡化介面並減少底層程式碼變更的影響。
範例：抽象方法，同時隱藏內部邏輯。

3.繼承：

允許一個類別（子類別）繼承另一個類別（父類別）的屬性和方法。
減少冗餘程式碼。
例：

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();

4.多態性：

指具有多種形式的物體。
允許為不同的物件類型提供統一的接口，從而實現程式碼重用和靈活性。
例：

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.

OOP 的重要性

• 封裝：降低複雜性並增強可重複使用性。
• 抽象：隱藏實作細節，簡化互動。
• 繼承：消除程式碼重複並促進重複使用。
• 多態性：實作彈性和簡化的程式碼結構。

實際範例
類別與建構子

• 以結構化、簡潔的方式建立物件。
• 範例：

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)}`);

與動物的傳承

• 展示可重複使用性和方法重寫。
• 範例：

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();

反思
我學到了什麼：

• 核心 OOP 原則：封裝、抽象、繼承、多型性。
• 降低程式碼複雜性和增強可重複使用性的實際用例。
• 應用建構子、方法和繼承來解決現實世界的問題。

OOP 是另一個層次。

明天我們再去！

以上是我的 React 之旅：第 15 天的詳細內容。更多資訊請關注PHP中文網其他相關文章！