iT邦幫忙

2024 iThome 鐵人賽

DAY 9
0

物件導向程式設計(OOP)

這是一種強大的設計方式,讓我們可以使用類別 (class) 和物件 (object) 來組織程式碼,實現更高的模組化和重用性。

1.類別(Class)和物件(Object)
在 JavaScript 中,類別是一種用來建立物件的藍圖,而物件則是依照類別創建出來的具體實例。
定義類別和創建物件

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

    // 定義方法
    greet() {
        console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
    }
}

// 創建 Person 類別的實例
let person1 = new Person("Alice", 25);
person1.greet();  // 輸出: Hello, my name is Alice and I am 25 years old.

解釋:使用 class 關鍵字定義了一個 Person 類別,並透過 constructor 來初始化物件的屬性,接著我們創建了一個 Person 的實例 person1 並呼叫它的方法。

2.繼承(Inheritance)
繼承允許我們建立一個類別,並從另一個類別繼承屬性和方法。讓程式碼可以避免重複、並將通用的邏輯放在父類別中
使用繼承建立子類別

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

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

class Dog extends Animal {
    constructor(name, breed) {
        super(name);  // 呼叫父類別的 constructor
        this.breed = breed;
    }

    // 覆寫父類別的方法
    makeSound() {
        console.log(`${this.name} barks.`);
    }
}

let dog1 = new Dog("Buddy", "Golden Retriever");
dog1.makeSound();  // 輸出: Buddy barks.

解釋:創建一個Animal父類別,並透過extends關鍵字讓Dog繼承Animal的屬性和方法。

3.多型(Polymorphism)
多型是一個物件導向的概念,允許子類別以不同的方式實現父類別的方法。

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

let cat1 = new Cat("Whiskers");
cat1.makeSound();  // 輸出: Whiskers meows.

解釋:Cat繼承了Animal,但覆寫了makeSound方法,因此同樣是 makeSound(),Cat 物件的行為與Dog物件不同。

4. 物件導向程式設計的優勢
模組化: 將功能分割成獨立的類別,使程式碼更易於維護和擴展。
重用性: 類別和繼承讓我們可以在不同的專案中重用現有的程式碼,減少重複性。
可擴展性: 新的功能可以透過擴展現有的類別來添加,而不需要修改原始程式碼。


上一篇
# JavaScript入門教學Day8
下一篇
# JavaScript入門教學Day10
系列文
解鎖第一個人生成就清單:Javascript鐵人學習30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言