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

更新於 2024/06/07閱讀時間約 7 分鐘

※ Object(物件) & Constructor Function(建構式函式)

Object(物件)是什麼?

物件是一種「可以將資料、程式碼包含在其中」的資料結構。

Object(物件)的兩種創造方式:

  1. 匿名物件直接使用"{}"。沒有特別的名字,直接從Object中繼承過來的一個物件。
  2. 具有名字的物件。

Constructor Function(建構式函式)是什麼?

  • Constructor Function是一個建構函式,本質是就是一個函式。
  • 目的在創造物件時,作一些基礎和初始化的設定。
  • 就是一個專門用來建立物件的function。

Constructor Function(建構式函式)的功能:

  • 利用Constructor(建構子)為Object(物件)設定initial(初始化)要做的事情。initial(初始化)要做的事情的意思是,創造一個Object(物件)時,當下就要建立內容給它,接著利用Constructor Function完成任務。
  • 利用"this"關鍵字給予「將要創建的Object(物件)」設定新的屬性和方法。意思是利用Constructor Function讓Object(物件)獲得具有"this"的功能
  • 利用Constructor(建構子)建立Object(物件)。
raw-image


  • Constructor Function跟一般的Function相比,在本質上並沒有區別。真正的區別在於"New"這個關鍵字。當我們使用"New"關鍵字去對Function時,Javascript會將Function理解成Constructor Function,並且利用Constructor Function創造出具有名字的Object(物件)。
raw-image


Constructor Function(建構式函式)的例子(一):

//創建物件
function ShibaInu(name, color) {
this.name = name,
this.color = color,
this.showMoeMeo = function () {
console.log("我會賣萌")
},
this.giveMeSomeCaress = function () {
console.log("快來摸摸我~")
},
this.coquettish = function () {
console.log("我會撒嬌")
},
this.playDumb = function () {
console.log("我什麼都不知道")
},
this.playWith = function (someone) {
console.log(this.name + "跟" + someone.name + "一起玩")
}
}

function Cat(name) {
this.name = name
}

const dog = new ShibaInu("小柴", "米色")
const cat = new Cat("凱蒂")
dog.playWith(cat) // 印出"小柴跟凱蒂一起玩"

Constructor Function(建構式函式)的例子(二):

條件:

媽媽請小強去買東西 : 「請買2個蘋果回來,如果雞蛋特價的話,就買1打。」

背景:

* 雞蛋一個5元,特價3元。

* 蘋果一個60元。

題目:

* 請將「請買2個蘋果,如果雞蛋特價的話,就買一打。」這段話,以OPP實現。

* 提示:

* 你應該會需要「小強」的物件,並且具有「購買東西」的方法。

* 你應該會需要「雞蛋」、「蘋果」的物件,並且能夠知道是否特價。

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

}
// 雞蛋的建構函數
function Egg(quantity, isOnsale) {
this.quantity = quantity,
this.price = isOnsale ? 3 : 5, // 根據是否特價來設定價格
this.getTotalPrice = function () {
return this.quantity * this.price
}
}
// 定義購買函數
function buy(item) {
return item.getTotalPrice()
}
// 定義 Person 類別
function Person(name, wallet) {
this.name = name
this.wallet = wallet

this.buy = function (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 xiaoQiang = new Person("小強", 300)
// 購買兩個蘋果
const apples = new Apple(2)
xiaoQiang.buy(apples)
// 如果雞蛋特價,購買一打雞蛋
const isEggOnSale = true // 假設雞蛋特價
if (isEggOnSale) {
const eggs = new Egg(12, isEggOnSale) // 一打雞蛋
xiaoQiang.buy(eggs)
}
//小強的剩餘錢包金額
console.log(`小強剩餘的錢包金額: ${xiaoQiang.wallet}`)

})()
//輸出結果
//小強 購買了 2 個 Apple,花費了 120 元,剩餘 180 元
//小強 購買了 12 個 Egg,花費了 36 元,剩餘 144 元
//小強剩餘的錢包金額: 144元
    全端網頁開發專業知識分享
    留言0
    查看全部
    avatar-img
    發表第一個留言支持創作者!
    ※ OPP(Object-oriented programming)簡介 什麼是OPP? OPP是一種軟體開發的風格方式。 是一種撰寫程式時的思考模式。 OPP的目的: 企圖將電腦世界的資料類比到現實中「物件」的概念。 將函數化的資料處理方式用類比到現實世界的互動關係,來簡化思考的難度。
    ※ 需要做版本備份時: git init:初始化此資料夾,由git 開始追蹤版本控制。 git add:將檔案加入到暫存區。 git commit:把暫存區的內容提交到儲存庫。 git status:查看目前所有檔案的狀態。 git log:查看過去所有commit的記錄。 ※ 需要做修
    ※ 介面是什麼: 介面:人跟電腦互相溝通的管道。 使用者與電腦互相溝通的方式稱為使用者的介面。 ※ 使用者的介面類型: 文字使用者介面:CUI。使用純鍵盤來下指令溝通,對象是伺服器(SERVER)。 圖型使用者介面:GUI。使用圖像去做點擊或拖拉的方式。 ※ 命令列(Command li
    ※ 說明事件委派 (Event Delegation) ,背後的運作機制。 網頁元素接收事件的順序,流程有兩種個方向的傳遞: 由下而上的,稱為事件冒泡 (event bubbling) 由上而下的,稱為事件捕獲 (event capturing) ※ 事件冒泡 Event Bubbling
    ※ 好用的陣列迭代器:forEach forEach 的使用時機: 需要從頭到尾把陣列中的每一個元素都印出來 ,就適合使用 forEach 方法。 forEach 的必要參數是一個函式: forEach() 的功能是把陣列的每個元素都丟進某個函式執行一次,因此必要的參數是一個函式。 語法:
    ※ 查找 DOM 元素有兩種途徑: 直接選出一個節點 (select):要在樹狀結構裡查找資料,至少要先選出第一個元素。 從一個特定節點,查找到週邊的節點 :選出一個元素後,就可以順著結構找出父元素、子元素 、甚至同一層的兄弟元素,這種行為稱為「遍歷 (traverse)」。 ※ 選出特定 D
    ※ OPP(Object-oriented programming)簡介 什麼是OPP? OPP是一種軟體開發的風格方式。 是一種撰寫程式時的思考模式。 OPP的目的: 企圖將電腦世界的資料類比到現實中「物件」的概念。 將函數化的資料處理方式用類比到現實世界的互動關係,來簡化思考的難度。
    ※ 需要做版本備份時: git init:初始化此資料夾,由git 開始追蹤版本控制。 git add:將檔案加入到暫存區。 git commit:把暫存區的內容提交到儲存庫。 git status:查看目前所有檔案的狀態。 git log:查看過去所有commit的記錄。 ※ 需要做修
    ※ 介面是什麼: 介面:人跟電腦互相溝通的管道。 使用者與電腦互相溝通的方式稱為使用者的介面。 ※ 使用者的介面類型: 文字使用者介面:CUI。使用純鍵盤來下指令溝通,對象是伺服器(SERVER)。 圖型使用者介面:GUI。使用圖像去做點擊或拖拉的方式。 ※ 命令列(Command li
    ※ 說明事件委派 (Event Delegation) ,背後的運作機制。 網頁元素接收事件的順序,流程有兩種個方向的傳遞: 由下而上的,稱為事件冒泡 (event bubbling) 由上而下的,稱為事件捕獲 (event capturing) ※ 事件冒泡 Event Bubbling
    ※ 好用的陣列迭代器:forEach forEach 的使用時機: 需要從頭到尾把陣列中的每一個元素都印出來 ,就適合使用 forEach 方法。 forEach 的必要參數是一個函式: forEach() 的功能是把陣列的每個元素都丟進某個函式執行一次,因此必要的參數是一個函式。 語法:
    ※ 查找 DOM 元素有兩種途徑: 直接選出一個節點 (select):要在樹狀結構裡查找資料,至少要先選出第一個元素。 從一個特定節點,查找到週邊的節點 :選出一個元素後,就可以順著結構找出父元素、子元素 、甚至同一層的兄弟元素,這種行為稱為「遍歷 (traverse)」。 ※ 選出特定 D
    你可能也想看
    Google News 追蹤
    Thumbnail
    徵的就是你 🫵 超ㄅㄧㄤˋ 獎品搭配超瞎趴的四大主題,等你踹共啦!還有機會獲得經典的「偉士牌樂高」喔!馬上來參加本次的活動吧!
    Thumbnail
    隨著理財資訊的普及,越來越多台灣人不再將資產侷限於台股,而是將視野拓展到國際市場。特別是美國市場,其豐富的理財選擇,讓不少人開始思考將資金配置於海外市場的可能性。 然而,要參與美國市場並不只是盲目跟隨標的這麼簡單,而是需要策略和方式,尤其對新手而言,除了選股以外還會遇到語言、開戶流程、Ap
    Thumbnail
    這篇內容,將會用一個簡單的範例,來解釋物件(Object)和實體(Instance)的差別。包括Instance的簡介、ID、物件改變會影響實體。
    Thumbnail
    這一章節旨在介紹 PHP 中的物件導向編程(OOP)概念。通過詳細講解類別、建構子、訪問修飾符(公開、私有、受保護)、繼承、多型、封裝、介面、抽象類別、靜態類別、列舉、委派、Lambda 表達式、泛型和反射等概念,使讀者能夠理解和應用這些 OOP 技術來編寫更具結構性和可維護性的 PHP 代碼。
    Thumbnail
    本章節是Java入門的第八天,主要介紹物件導向的概念。這包括了類別、建構子、存取修飾子、繼承、多型、封裝、介面、抽象類別、靜態類別、列舉、Lambda表達式、泛型和反射等主題。每個主題都配有相關的程式碼範例,以協助讀者更好地理解這些概念。
    Thumbnail
    本章節是一個初級的 TypeScript 教學,主要介紹了 TypeScript 中物件導向程式設計的各種核心概念,包括類別、建構子、存取修飾子、繼承、多型、封裝、介面、抽象類別、靜態類別、列舉、委派、Lambda 表達式、泛型和反射等。每個概念都通過詳細的解釋和實例代碼來進行深入的介紹。
    Thumbnail
    一切從"物件(Object)"開始 1.建立新物件 2.編輯物件內容 3.在物件中新增區塊
    Thumbnail
    本章節旨在介紹JavaScript中的物件導向編程。內容包括類別(Class)的定義和使用,建構子的作用,以及公開,私有,受保護(Protected)等不同訪問修飾符的概念。此外,還涵蓋了繼承、多型、封裝、介面、抽象類別、靜態類別、列舉、委派、Lambda表達式、泛型、反射等物件導向的主要觀念。
    Thumbnail
    這一節談的是用物件導向程式設計(object-oriented programming, OOP)的方式來實作隨機漫步。
    Thumbnail
    本章節的目的是讓讀者瞭解C#的物件導向特性,包括類別、繼承、多型、封裝等基本概念,以及介面、抽象類別、靜態類別等進階主題。此外,本章節也將介紹如何使用列舉、委派、Lambda表達式、泛型及反射,這些都是C#中常見的強大功能。
    Thumbnail
    本階段深掘PHP中類別與物件的應用,從基本定義到屬性與方法的運用,並特別著重於訪問控制和靜態成員的概念。學生將學會如何有效地利用公開、保護、私有屬性,以及如何在不實例化的情況下透過類別名稱直接訪問靜態屬性和方法,進一步鞏固物件導向程式設計的核心知識。
    Thumbnail
    本階段介紹物件導向程式設計(OOP)基礎,從OOP概念、類別與物件基本原理,到PHP中類別與物件的應用,並深入探討封裝、繼承等OOP特性,最後以實際練習加強理解。此階段為學生掌握PHP OOP打下堅實基礎。
    Thumbnail
    徵的就是你 🫵 超ㄅㄧㄤˋ 獎品搭配超瞎趴的四大主題,等你踹共啦!還有機會獲得經典的「偉士牌樂高」喔!馬上來參加本次的活動吧!
    Thumbnail
    隨著理財資訊的普及,越來越多台灣人不再將資產侷限於台股,而是將視野拓展到國際市場。特別是美國市場,其豐富的理財選擇,讓不少人開始思考將資金配置於海外市場的可能性。 然而,要參與美國市場並不只是盲目跟隨標的這麼簡單,而是需要策略和方式,尤其對新手而言,除了選股以外還會遇到語言、開戶流程、Ap
    Thumbnail
    這篇內容,將會用一個簡單的範例,來解釋物件(Object)和實體(Instance)的差別。包括Instance的簡介、ID、物件改變會影響實體。
    Thumbnail
    這一章節旨在介紹 PHP 中的物件導向編程(OOP)概念。通過詳細講解類別、建構子、訪問修飾符(公開、私有、受保護)、繼承、多型、封裝、介面、抽象類別、靜態類別、列舉、委派、Lambda 表達式、泛型和反射等概念,使讀者能夠理解和應用這些 OOP 技術來編寫更具結構性和可維護性的 PHP 代碼。
    Thumbnail
    本章節是Java入門的第八天,主要介紹物件導向的概念。這包括了類別、建構子、存取修飾子、繼承、多型、封裝、介面、抽象類別、靜態類別、列舉、Lambda表達式、泛型和反射等主題。每個主題都配有相關的程式碼範例,以協助讀者更好地理解這些概念。
    Thumbnail
    本章節是一個初級的 TypeScript 教學,主要介紹了 TypeScript 中物件導向程式設計的各種核心概念,包括類別、建構子、存取修飾子、繼承、多型、封裝、介面、抽象類別、靜態類別、列舉、委派、Lambda 表達式、泛型和反射等。每個概念都通過詳細的解釋和實例代碼來進行深入的介紹。
    Thumbnail
    一切從"物件(Object)"開始 1.建立新物件 2.編輯物件內容 3.在物件中新增區塊
    Thumbnail
    本章節旨在介紹JavaScript中的物件導向編程。內容包括類別(Class)的定義和使用,建構子的作用,以及公開,私有,受保護(Protected)等不同訪問修飾符的概念。此外,還涵蓋了繼承、多型、封裝、介面、抽象類別、靜態類別、列舉、委派、Lambda表達式、泛型、反射等物件導向的主要觀念。
    Thumbnail
    這一節談的是用物件導向程式設計(object-oriented programming, OOP)的方式來實作隨機漫步。
    Thumbnail
    本章節的目的是讓讀者瞭解C#的物件導向特性,包括類別、繼承、多型、封裝等基本概念,以及介面、抽象類別、靜態類別等進階主題。此外,本章節也將介紹如何使用列舉、委派、Lambda表達式、泛型及反射,這些都是C#中常見的強大功能。
    Thumbnail
    本階段深掘PHP中類別與物件的應用,從基本定義到屬性與方法的運用,並特別著重於訪問控制和靜態成員的概念。學生將學會如何有效地利用公開、保護、私有屬性,以及如何在不實例化的情況下透過類別名稱直接訪問靜態屬性和方法,進一步鞏固物件導向程式設計的核心知識。
    Thumbnail
    本階段介紹物件導向程式設計(OOP)基礎,從OOP概念、類別與物件基本原理,到PHP中類別與物件的應用,並深入探討封裝、繼承等OOP特性,最後以實際練習加強理解。此階段為學生掌握PHP OOP打下堅實基礎。