首頁 > web前端 > js教程 > 物件導向程式設計(OOP):透過清晰的範例來理解支柱

物件導向程式設計(OOP):透過清晰的範例來理解支柱

Barbara Streisand
發布: 2024-10-28 16:16:02
原創
350 人瀏覽過

Object-Oriented Programming (OOP): Understand the illars with Clear Examples

嘿開發者!今天我們要討論的是物件導向程式設計(OOP)。這種範例對於使用「對象」組織資料和行為至關重要。如果您正在準備求職面試,掌握這些概念會讓一切變得不同。

我們將以清晰實用的方式探索 OOP 的四大支柱,並舉例幫助您輕鬆理解一切。

什麼是物件導向程式設計?

OOP 基於四個主要支柱:

  1. 封裝
  2. 繼承
  3. 多態性
  4. 抽象

讓我們透過 JavaScript 範例仔細研究一下每個支柱。

1. 封裝

封裝就像將您的物品存放在一個盒子裡。您將所需的一切放入其中並控制誰可以訪問它。這有助於保護儲存的資料並確保物件的內部狀態保持安全。

例子:

class User {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }

    // Public method
    displayInfo() {
        return `${this.name}, ${this.age} years old`;
    }

    // Private method
    _checkAge() {
        return this.age >= 18 ? 'an adult' : 'a minor';
    }

    displayStatus() {
        return `${this.name} is ${this._checkAge()}.`;
    }
}

const user = new User('Alice', 22);
console.log(user.displayInfo()); // Alice, 22 years old
console.log(user.displayStatus()); // Alice is an adult
登入後複製

在此範例中,_checkAge 是不應直接存取的方法。它在內部用於幫助確定使用者的狀態,同時保持邏輯有序。

2. 繼承

繼承允許一個類別(子類別)從另一個類別(超類別)繼承屬性和方法。這使得重複使用程式碼和建立類別層次結構變得更加容易。

例子:

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

    makeSound() {
        return `${this.name} makes a sound.`;
    }
}

class Dog extends Animal {
    makeSound() {
        return `${this.name} barks.`;
    }
}

class Cat extends Animal {
    makeSound() {
        return `${this.name} meows.`;
    }
}

const myDog = new Dog('Rex');
const myCat = new Cat('Mia');

console.log(myDog.makeSound()); // Rex barks.
console.log(myCat.makeSound()); // Mia meows.
登入後複製

這裡,Dog 和 Cat 都繼承自 Animal。每個都實現了自己的聲音,展示了繼承如何允許自訂行為而不重複程式碼。

3.多態性

多態是不同物件以不同方式回應相同方法的能力。這允許具有相同名稱的方法根據物件的類型具有不同的行為。

例子:

class Shape {
    area() {
        return 0;
    }
}

class Rectangle extends Shape {
    constructor(width, height) {
        super();
        this.width = width;
        this.height = height;
    }

    area() {
        return this.width * this.height;
    }
}

class Circle extends Shape {
    constructor(radius) {
        super();
        this.radius = radius;
    }

    area() {
        return Math.PI * Math.pow(this.radius, 2);
    }
}

const shapes = [new Rectangle(10, 5), new Circle(3)];

shapes.forEach(shape => {
    console.log(`Area: ${shape.area()}`);
});

// Output:
// Area: 50
// Area: 28.274333882308138
登入後複製

在這種情況下,矩形和圓都有自己的面積方法,但根據形狀類型呼叫相同的方法會產生不同的結果。這就是多態性的作用!

4. 抽象

抽像是隱藏複雜細節並僅揭露必要內容的過程。在 OOP 中,這允許您使用物件而無需了解它們如何工作的所有複雜性。

例子:

class Car {
    constructor(brand, model) {
        this.brand = brand;
        this.model = model;
    }

    start() {
        console.log('Car started.');
    }

    stop() {
        console.log('Car stopped.');
    }
}

class ElectricCar extends Car {
    charge() {
        console.log('Electric car charging.');
    }
}

const myElectricCar = new ElectricCar('Tesla', 'Model 3');
myElectricCar.start(); // Car started.
myElectricCar.charge(); // Electric car charging.
登入後複製

這裡,Car 類別提供了基本方法,而 ElectricCar 則增加了充電功能。您可以在不知道每個部件如何運作的情況下使用汽車 - 您只需要知道如何啟動和充電。

結論

就是這樣!現在,您對物件導向程式設計的四大支柱有了更清晰的了解:封裝、繼承、多態性和抽象。這些概念對於編寫更有組織性和可維護性的程式碼至關重要。

在您的專案中不斷練習和應用這些原則,您將做好充分準備來應對面試和作為開發人員的日常挑戰!

以上是物件導向程式設計(OOP):透過清晰的範例來理解支柱的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:dev.to
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板