2024-05-20|閱讀時間 ‧ 約 29 分鐘

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

    ※ 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(物件)。


    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元
    分享至
    成為作者繼續創作的動力吧!
    © 2024 vocus All rights reserved.