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

閱讀時間約 6 分鐘

※ class類別

什麼是class?

class是創造consturctor function時的語法糖,本質上與使用function創造物件(object)的行為沒有不同。

class的作用:

用來定義、描述要創造的物件(object)具有那些屬性、行為的一個表達式。就像是「車子的設計圖」,描述了車子有什麼樣的零件(屬性)和功能(方法)。

class ShibaInu {
constructor(name, color) {
this.name = name,
this.color = color
}
playWith(someone) {
console.log(`${this.color}${this.name}${someone.name}一起玩`)
}
}

class Cat {
constructor(name) {
this.name = name
}
}

const dog = new ShibaInu("小小柴", "棕色")
const catty = new Cat("凱蒂")

dog.playWith(catty)//棕色的小小柴跟 凱蒂一起玩

static 關鍵字

靜態屬性與方法,也被稱為靜態成員(Static Members),可以在不需要經由建構物件的過程下直接通過類別(Class)來調用或訪問。而static是一個用來定義靜態方法或屬性的關鍵字。

  • 靜態方法:在方法前面加上 static 關鍵字,這個方法就可以直接通過類別(Class)來呼叫,而不需要經由建構物件的過程。
  • 靜態屬性:使用 static 關鍵字定義的屬性,可以直接通過類別訪問,而不需要經由建構物件的過程。

static 範例(一):

class MathUtils {
// 靜態方法
static add(a, b) {
return a + b
}

// 靜態屬性
static PI = 3.14159
}

// 直接通過類別名稱調用靜態方法
console.log(MathUtils.add(2, 3)) // 輸出: 5

// 直接通過類別名稱訪問靜態屬性
console.log(MathUtils.PI) // 輸出: 3.14159

static 範例(二):

(function main() {
// 蘋果的建構函數
class Apple {
constructor(quantity) {
this.quantity = quantity
this.price = 60 // 蘋果的價格固定為60元
}
getTotalPrice() {
return this.quantity * this.price
}
} 


// 雞蛋的建構函數
class Egg {
constructor(quantity, isOnSale) {
this.quantity = quantity
this.price = isOnSale ? 3 : 5 // 根據是否特價來設定價格
}

getTotalPrice() {
return this.quantity * this.price
}
}

 

// 定義 LittleJohn 類別
class LittleJohn {
constructor(name, wallet) {
this.name = name
this.wallet = wallet
}
buy(item) {
const cost = item.getTotalPrice()
if (this.wallet >= cost) {
this.wallet -= cost;
console.log(`${this.name} 購買了 ${item.quantity}${item.constructor.name},花費了 ${cost} 元,剩餘 ${this.wallet}`)
} else {
console.log(`${this.name} 的錢包不足,無法購買 ${item.quantity}${item.constructor.name}`)
}
}
}

//創建小強物件並進行購買
const littleJohn = new LittleJohn("小強", 300)
// 購買兩個蘋果
const apples = new Apple(2)
littleJohn.buy(apples)
// 如果雞蛋特價,購買一打雞蛋
const isEggOnSale = true // 假設雞蛋特價
if (isEggOnSale) {
const eggs = new Egg(12, isEggOnSale) // 一打雞蛋
littleJohn.buy(eggs)
}
//小強的剩餘錢包金額
console.log(`小強剩餘的錢包金額: ${littleJohn.wallet}`)

})()
//輸出​小強 購買了 2 個 Apple,花費了 120 元,剩餘 180 元
// 小強 購買了 12 個 Egg,花費了 36 元,剩餘 144 元
//小強剩餘的錢包金額: 144元
    全端網頁開發專業知識分享
    留言0
    查看全部
    發表第一個留言支持創作者!
    ※ 模板字串(template literal): 使用「``」作為語法,作為字串拼接。 呈現多行內容。 const multiLineString = `This is a string that spans multiple lines.` console.log(multiLineStr
    ※ ES6 變數宣告介紹: 在ES6中,推薦使用let和const取代原有的var來宣告變數。 ※ var的特點: 勢力範圍(scope)只有兩種:function、global(全域部分)。 勢力範圍(scope)指的是宣告變數的範圍,能夠被有效的使用的範圍。 可以在宣告變數之前就使用。
    ※ Object(物件) & Constructor Function(建構式函式) Object(物件)是什麼? 物件是一種「可以將資料、程式碼包含在其中」的資料結構。 Object(物件)的兩種創造方式: 匿名物件:直接使用"{}"。沒有特別的名字,直接從Object中繼承過來的一個物件
    ※ OPP(Object-oriented programming)簡介 什麼是OPP? OPP是一種軟體開發的風格方式。 是一種撰寫程式時的思考模式。 OPP的目的: 企圖將電腦世界的資料類比到現實中「物件」的概念。 將函數化的資料處理方式用類比到現實世界的互動關係,來簡化思考的難度。
    ※ 需要做版本備份時: git init:初始化此資料夾,由git 開始追蹤版本控制。 git add:將檔案加入到暫存區。 git commit:把暫存區的內容提交到儲存庫。 git status:查看目前所有檔案的狀態。 git log:查看過去所有commit的記錄。 ※ 需要做修
    ※ 介面是什麼: 介面:人跟電腦互相溝通的管道。 使用者與電腦互相溝通的方式稱為使用者的介面。 ※ 使用者的介面類型: 文字使用者介面:CUI。使用純鍵盤來下指令溝通,對象是伺服器(SERVER)。 圖型使用者介面:GUI。使用圖像去做點擊或拖拉的方式。 ※ 命令列(Command li
    ※ 模板字串(template literal): 使用「``」作為語法,作為字串拼接。 呈現多行內容。 const multiLineString = `This is a string that spans multiple lines.` console.log(multiLineStr
    ※ ES6 變數宣告介紹: 在ES6中,推薦使用let和const取代原有的var來宣告變數。 ※ var的特點: 勢力範圍(scope)只有兩種:function、global(全域部分)。 勢力範圍(scope)指的是宣告變數的範圍,能夠被有效的使用的範圍。 可以在宣告變數之前就使用。
    ※ Object(物件) & Constructor Function(建構式函式) Object(物件)是什麼? 物件是一種「可以將資料、程式碼包含在其中」的資料結構。 Object(物件)的兩種創造方式: 匿名物件:直接使用"{}"。沒有特別的名字,直接從Object中繼承過來的一個物件
    ※ OPP(Object-oriented programming)簡介 什麼是OPP? OPP是一種軟體開發的風格方式。 是一種撰寫程式時的思考模式。 OPP的目的: 企圖將電腦世界的資料類比到現實中「物件」的概念。 將函數化的資料處理方式用類比到現實世界的互動關係,來簡化思考的難度。
    ※ 需要做版本備份時: git init:初始化此資料夾,由git 開始追蹤版本控制。 git add:將檔案加入到暫存區。 git commit:把暫存區的內容提交到儲存庫。 git status:查看目前所有檔案的狀態。 git log:查看過去所有commit的記錄。 ※ 需要做修
    ※ 介面是什麼: 介面:人跟電腦互相溝通的管道。 使用者與電腦互相溝通的方式稱為使用者的介面。 ※ 使用者的介面類型: 文字使用者介面:CUI。使用純鍵盤來下指令溝通,對象是伺服器(SERVER)。 圖型使用者介面:GUI。使用圖像去做點擊或拖拉的方式。 ※ 命令列(Command li
    你可能也想看
    Thumbnail
    重點摘要: 1.9 月降息 2 碼、進一步暗示年內還有 50 bp 降息 2.SEP 上修失業率預期,但快速的降息速率將有助失業率觸頂 3.未來幾個月經濟數據將繼續轉弱,經濟復甦的時點或是 1Q25 季底附近
    Thumbnail
    近期的「貼文發佈流程 & 版型大更新」功能大家使用了嗎? 新版式整體視覺上「更加凸顯圖片」,為了搭配這次的更新,我們推出首次貼文策展 ❤️ 使用貼文功能並完成這次的指定任務,還有機會獲得富士即可拍,讓你的美好回憶都可以用即可拍珍藏!
    Thumbnail
    進入物件導向設計的實戰階段,我們通過建立人力資源管理功能來實踐理論知識。透過這些實作練習,能夠深化對物件導向概念的理解,並學會如何在實際開發中應用這些概念。
    Thumbnail
    在物件導向程式設計的進階階段,學生將學習繼承、介面、抽象類別等核心概念。繼承允許類別共享屬性和方法,介面確保實現類別提供特定的方法實現,而抽象類別定義了基本結構供子類別擴展。這些知識點有助於提升程式碼的重用性、擴展性和維護性。
    Thumbnail
    本階段深掘PHP中類別與物件的應用,從基本定義到屬性與方法的運用,並特別著重於訪問控制和靜態成員的概念。學生將學會如何有效地利用公開、保護、私有屬性,以及如何在不實例化的情況下透過類別名稱直接訪問靜態屬性和方法,進一步鞏固物件導向程式設計的核心知識。
    Thumbnail
    經過這麼多年的觀察與實踐,一個成熟的軟體工程師還需要第四個要素,它是讓決定你通往熟手的重要關鍵沒有之一。
    Thumbnail
    物件導向(OOP),不僅提供了更結構化的程式碼組織方式,還有助於提高程式碼的可讀性、可重用性和可維護性。本文將介紹物件導向概念中的類別、對象、繼承、封裝和多型,並透過具體範例來展示這些概念如何在實際編程中應用。
    上一集有說,我們以前在學校要教很多作業,扣除那一些夭壽難的題目,其實大多數都是在練基本功 而外面許多書籍、課程和公司內的學習,則是強調實用和解決問題的方法 例如如何寫一個爬蟲程式、如何寫一個影像處理的程式、如何做使用者界面
    Thumbnail
    「繼承」顧名思義就是有一個或多個類別延續了某個類別的特性,就如同在人類社會裡,兒女接收了父母的財產、承襲了上代的技能、延續了前一輩的事業。在Python的語言裡,能夠繼承的特性為類別的屬性與方法,繼承的類別稱為子類別(child class / subclass)或衍伸類別(derived clas
    Thumbnail
    在類別一節中,我們可以用Student類別的實體來存取類別中的name變數、score字典、以及其中的所有方法,這些可以被類別以外的程式碼所直接存取的屬性稱為公有屬性(public attribute)、可以被類別以外的程式碼所直接呼叫的方法稱為公有方法(public method)。
    Thumbnail
    到目前為止,我們所學習的都是程序性的程式設計(procedural programming),也就是程式碼是透過一連串的指令組成的程序或函數,由上而下依序執行不同的程序或是呼叫函數來完成程式的功能。 Python其實是一種物件導向的程式(object oriented programming, 簡稱
    Thumbnail
    物件導向的概念,以python程式為範例。
    Thumbnail
    重點摘要: 1.9 月降息 2 碼、進一步暗示年內還有 50 bp 降息 2.SEP 上修失業率預期,但快速的降息速率將有助失業率觸頂 3.未來幾個月經濟數據將繼續轉弱,經濟復甦的時點或是 1Q25 季底附近
    Thumbnail
    近期的「貼文發佈流程 & 版型大更新」功能大家使用了嗎? 新版式整體視覺上「更加凸顯圖片」,為了搭配這次的更新,我們推出首次貼文策展 ❤️ 使用貼文功能並完成這次的指定任務,還有機會獲得富士即可拍,讓你的美好回憶都可以用即可拍珍藏!
    Thumbnail
    進入物件導向設計的實戰階段,我們通過建立人力資源管理功能來實踐理論知識。透過這些實作練習,能夠深化對物件導向概念的理解,並學會如何在實際開發中應用這些概念。
    Thumbnail
    在物件導向程式設計的進階階段,學生將學習繼承、介面、抽象類別等核心概念。繼承允許類別共享屬性和方法,介面確保實現類別提供特定的方法實現,而抽象類別定義了基本結構供子類別擴展。這些知識點有助於提升程式碼的重用性、擴展性和維護性。
    Thumbnail
    本階段深掘PHP中類別與物件的應用,從基本定義到屬性與方法的運用,並特別著重於訪問控制和靜態成員的概念。學生將學會如何有效地利用公開、保護、私有屬性,以及如何在不實例化的情況下透過類別名稱直接訪問靜態屬性和方法,進一步鞏固物件導向程式設計的核心知識。
    Thumbnail
    經過這麼多年的觀察與實踐,一個成熟的軟體工程師還需要第四個要素,它是讓決定你通往熟手的重要關鍵沒有之一。
    Thumbnail
    物件導向(OOP),不僅提供了更結構化的程式碼組織方式,還有助於提高程式碼的可讀性、可重用性和可維護性。本文將介紹物件導向概念中的類別、對象、繼承、封裝和多型,並透過具體範例來展示這些概念如何在實際編程中應用。
    上一集有說,我們以前在學校要教很多作業,扣除那一些夭壽難的題目,其實大多數都是在練基本功 而外面許多書籍、課程和公司內的學習,則是強調實用和解決問題的方法 例如如何寫一個爬蟲程式、如何寫一個影像處理的程式、如何做使用者界面
    Thumbnail
    「繼承」顧名思義就是有一個或多個類別延續了某個類別的特性,就如同在人類社會裡,兒女接收了父母的財產、承襲了上代的技能、延續了前一輩的事業。在Python的語言裡,能夠繼承的特性為類別的屬性與方法,繼承的類別稱為子類別(child class / subclass)或衍伸類別(derived clas
    Thumbnail
    在類別一節中,我們可以用Student類別的實體來存取類別中的name變數、score字典、以及其中的所有方法,這些可以被類別以外的程式碼所直接存取的屬性稱為公有屬性(public attribute)、可以被類別以外的程式碼所直接呼叫的方法稱為公有方法(public method)。
    Thumbnail
    到目前為止,我們所學習的都是程序性的程式設計(procedural programming),也就是程式碼是透過一連串的指令組成的程序或函數,由上而下依序執行不同的程序或是呼叫函數來完成程式的功能。 Python其實是一種物件導向的程式(object oriented programming, 簡稱
    Thumbnail
    物件導向的概念,以python程式為範例。