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

※ OPP第一大核心-封裝

• 封裝的精神在於將「方法」、「屬性」和「邏輯」包裝在類別裡面，透過類別的實例來實現。這樣外部物件不需要了解內部的實現細節，只需要知道如何使用該類別提供的接口即可。換句話說，封裝是將內部細節隱藏起來，只暴露必要的部分給使用者。
• 封裝的核心概念是，使用者如果想要接觸資料，只能透過公開的方法來操作，不能直接修改內部的資料。
• 封裝的三大好處：

1. 保護內部的程式碼：確保使用者無法任意更改物件內部的屬性和重要資料，從而保護資料的完整性和一致性。
2. 簡化使用：使用者只需要知道提供了什麼功能，而不需要了解其如何實作。這樣可以降低使用複雜性，讓介面更友好。
3. 提高程式碼可維護性和安全性：封裝可以使程式碼更容易理解與維護，並且提高了程式碼的安全性，因為內部實現細節被隱藏，減少了錯誤和漏洞的風險。

※ 封裝-例子

class Dog {
  constructor(name, color) {
    this.name = name
    this.color = color
    //嘴
    this.mouth = {
      bite: function (something) {
        //咬
        console.log(`咬${something}`)
      },
      eat: function (something) {
        //吃
        console.log(`吃${something}`)
      },
      spark: function () {
        //吠叫
        console.log(`吠叫`)
      }
    }
  }

  spark() {
    //實作細節，從喉嚨發出聲音
    this.mouth.spark()
  }

  bite(someone) {
    //實作細節，要用嘴去咬東西
    const name = getName(someone)
    this.mouth.bite(name)
  }

  eat(thing) {
    const name = getName(thing)
    this.mouth.eat(name)
  }
}
//不想被暴露的功能
const getName = function objectOrName(thing) {
  //錯誤處理
  let name = ''
  if (typeof thing === 'object' && thing.name)
    name = thing.name
  else if (typeof thing === 'string')
    name = thing
  else name = ''
  return name
}
dog.eat(catty)//輸出 吃凱蒂

※ OPP第二大核心-繼承

• 繼承的概念：一個類別可以通過「繼承」另一個類別來獲得其所有的「屬性」、「方法」和「邏輯」。這樣，使用者不需要重寫相同的程式碼，就能使用繼承來的「屬性」、「方法」和「邏輯」。簡單來說，繼承讓我們可以輕鬆地使用和擴展已有的功能。

• 繼承分為兩種：

1. ES5的繼承：使用「Child.prototype = new Parent（）」這類prototype原型鍊達到類別的繼承。

//定義父類建構函數，​它接收兩個參數 name 和 age
//函數初始化了三個屬性：name、age 和一個方法 methodFunc
function Parent(name, age) {
  this.name = name
  this.age = age

  this.methodFunc = function () {
    console.log(name, age)

  }
}
//定義子類建構函數
//它接收一個參數 price，並將其賦值給 this.price。
function Child(price) {
  this.price = price
}
//設定子類的原型
//Child.prototype 現在是一個 Parent 物件。
//結果是，所有 Child 的實例都會繼承 Parent 實例的屬性和方法。
Child.prototype = new Parent("孩子", 18)
//創建 Child 的實例
const c = new Child (4000)
//輸出結果
c.price //輸出4000

c.age //輸出18

c.methodFunc() //輸出孩子 18

2. ES6的繼承：

• 使用「extends」作為繼承關鍵字。
• 使用「super」呼叫父類別的constructor進行初始化。
• super 關鍵字有一些特殊的規則和限制：

1. 位置：super() 必須在 constructor 中的第一個語句。因為 super() 是用來初始化父類的建構函數。
2. this 的使用：this 關鍵字的任何使用必須在 super() 之後。因為在 JavaScript 中，只有在父類構造完成後，子類的實例才被認為是完整的，才能正常使用 this。
3. 限制：super() 只能在 constructor 中調用。但可以使用 super.methodName() 來調用父類的方法。

• super（）有兩個用法：

1. 調用父類的建構函數：

使用 super 調用父類的建構函數是為了在子類中正確地初始化從父類繼承過來的屬性和行為。

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

class Child extends Parent {
  constructor(price, name, age) {
    super(name, age); // 調用 Parent 的建構函數，初始化 name 和 age
    this.price = price; // 初始化 Child 自己的屬性
  }
}

const c = new Child(4000, "孩子", 18);
console.log(c.name); // 輸出：孩子
console.log(c.age); // 輸出：18
console.log(c.price); // 輸出：4000

2. 調用父類的方法：

class Parent {
  constructor(name, age) {
    this.name = name
    this.age = age
  }
  methodFunc() {
    console.log("這是parent", this.name, this.age)

  }
  static staticMethods() {
    console.log("這是parent")
  }
}

class Child extends Parent {
  constructor(price, name, age) {
    super(name, age)//代表parent的建構函數
    this.price = price
  }
  static staticMethods() {
    super.staticMethods()
    console.log("這是children")
  }
  methodFunc() {
    super.methodFunc()
    console.log("這是children", this.name, this.age)

  }
}

const c = new Child(4000, "孩子", 18)
c.methodFunc()//輸出這是parent 孩子 18和這是children 孩子 18