※ 物件導向程式設計-OPP(七)

※ OPP第三大核心-多型

※ 多型的基本定義：

多型是利用繼承的特性，讓不同的子類別可以實現相同的介面，但在呼叫這些介面的方法時會表現出不同的行為。這使得程式設計更具彈性和擴展性，避免了複雜的條件判斷式，同時促進了代碼的重用。

class Animal {
  makeSound() {
    console.log("Some generic animal sound");
  }
}

class Dog extends Animal {
  makeSound() {
    console.log("Woof!");
  }
}

class Cat extends Animal {
  makeSound() {
    console.log("Meow!");
  }
}

function makeAnimalSound(animal) {
  animal.makeSound();
}

const myDog = new Dog();
const myCat = new Cat();

makeAnimalSound(myDog); // 打印 "Woof!"
makeAnimalSound(myCat); // 打印 "Meow!"

※ JavaScript 中的多型概念

• 方法重寫（Method Overriding）：子類可以重寫父類的方法，以實現不同的行為。這使得同樣的方法名在不同的子類中有不同的實現。
• 鴨子型別（Duck Typing）：在 JavaScript 中，只要對象實現了某個方法，就可以認為它實現了某個介面。這不要求對象明確聲明實現了某個介面，而是基於其行為來判斷。
• 靈活性（Flexibility）：JavaScript 的動態性使得對象可以隨時改變其方法和屬性，增加了多型的靈活性。對象的屬性和方法可以在運行時動態添加、修改或刪除。

※ JavaScript 使用多型範例：

在 JavaScript 中，多型（Polymorphism）主要是通過繼承和方法覆寫（Method Overriding）來實現的。

1. 定義父類：

class Animal {
  speak() {
    console.log("Animal makes a sound")
  }
}

2. 定義子類：

class Dog extends Animal {
  speak() {
    console.log("Dog barks")
  }
}

class Cat extends Animal {
  speak() {
    console.log("Cat meows")
  }
}

3. 使用多型：

const animals = [new Dog(), new Cat()]

animals.forEach(animal => {
  animal.speak(); // 根據實際的子類型呼叫相應的方法
})
//Dog barks
//Cat meows

4. 多型的實際應用：

function makeAnimalsSpeak(animals) {
  animals.forEach(animal => {
    animal.speak()
  });
}

const myAnimals = [new Dog(), new Cat(), new Animal()]
makeAnimalsSpeak(myAnimals)
//​Dog barks
//Cat meows
//Animal makes a sound

※ OPP-this

在物件導向程式設計（OOP）中，「this」代表物件本身。

JavaScript 的特性是「所有事物都可以視為物件」，這會引發以下問題：

1. 全域作用域問題：你可以在任何地方存取到「this」。
2. 脫離物件的情況：當「this」脫離物件時，其值難以預測。

在不同的環境下，脫離物件的「this」值可能會有三種的表現：

1. 在瀏覽器中：「this」指向 window 物件。
2. 在嚴格模式（strict mode）下：「this」會變成 undefined。
3. 在 Node.js 環境中：「this」指向 global 物件。

重要的是，「this」的值取決於它的呼叫方式，而不是它在程式碼中的位置。

當this在當前作用域找不到時，就會一直往上尋找，直到找到合適的作用域。

為了解決「this」值不確定的問題，ES6 引入了箭頭函數（arrow function）。箭頭函數有以下特性：

1. 箭頭函數本身沒有「this」。
2. 箭頭函數中的「this」是由定義箭頭函數的外層作用域決定的，而不是由呼叫方式決定的。
3. 使得「this」的行為變得更加可預測和穩定。。

總結

1. 「this」的基本概念：代表物件本身。
2. JavaScript 中的問題：在不同環境中，脫離物件的「this」會有不同的值。
3. ES6 箭頭函數：透過箭頭函數，確保「this」的值是固定的，不會隨呼叫方式改變。