場景概覽

在餐廳中，顧客可以點多種菜餚，我們希望根據所點菜餚的價格、任何適用的稅費和折扣來計算他們的總帳單。我們將建立一個函數來計算總帳單，並使用呼叫、應用和綁定來處理不同的客戶及其訂單。

程式碼範例

// Function to calculate the total bill
function calculateTotalBill(taxRate, discount) {
    const taxAmount = this.orderTotal * (taxRate / 100); // Calculate tax based on the total order amount
    const totalBill = this.orderTotal   taxAmount - discount; // Calculate the final bill
    return totalBill;
}

// Customer objects
const customer1 = {
    name: "Sarah",
    orderTotal: 120 // Total order amount for Sarah
};

const customer2 = {
    name: "Mike",
    orderTotal: 200 // Total order amount for Mike
};

// 1. Using `call` to calculate the total bill for Sarah
const totalBillSarah = calculateTotalBill.call(customer1, 10, 15); // 10% tax and $15 discount
console.log(`${customer1.name}'s Total Bill: $${totalBillSarah}`); // Output: Sarah's Total Bill: $117

// 2. Using `apply` to calculate the total bill for Mike
const taxRateMike = 8; // 8% tax
const discountMike = 20; // $20 discount
const totalBillMike = calculateTotalBill.apply(customer2, [taxRateMike, discountMike]); // Using apply with an array
console.log(`${customer2.name}'s Total Bill: $${totalBillMike}`); // Output: Mike's Total Bill: $176

// 3. Using `bind` to create a function for Sarah's future calculations
const calculateSarahBill = calculateTotalBill.bind(customer1); // Binding Sarah's context
const totalBillSarahAfterDiscount = calculateSarahBill(5, 10); // New tax rate and discount
console.log(`${customer1.name}'s Total Bill after New Discount: $${totalBillSarahAfterDiscount}`); // Output: Sarah's Total Bill after New Discount: $115

解釋

1. 函數定義:

   • 我們定義一個函數calculateTotalBill，它以taxRate 和discount 作為參數。此函數透過在訂單總額中添加稅並減去任何折扣來計算總帳單。

2. 顧客對象:

   • 我們建立兩個客戶對象，customer1 (Sarah) 和 customer2 (Mike)，每個對像都有各自的名稱和訂單總額。

3. 使用呼叫:

   • 對於 Sarah，我們使用 call 方法計算她的總帳單。這允許我們指定 customer1 作為上下文，並將稅率和折扣作為單獨的參數傳遞。輸出顯示了應用稅費和折扣後 Sarah 的總帳單。

4. 使用 apply:

   • 對於 Mike，我們使用 apply 方法來計算他的總帳單。此方法允許我們將參數作為數組傳遞，從而方便處理多個參數。麥克的總帳單計算方式類似，但稅金和折扣值不同。

5. 使用綁定:

   • 我們使用bind為Sarah建立一個綁定函數，它將上下文鎖定在customer1。這意味著我們稍後可以呼叫這個新函數，而無需再次指定。我們透過使用不同參數再次計算 Sarah 的總帳單來證明這一點，以便將來進行靈活的計算。

輸出

• 控制台日誌根據 Sarah 和 Mike 各自的訂單和折扣顯示他們的總帳單。
• 此範例有效地示範如何使用 call、apply 和 bind 來管理餐廳計費系統中的函數上下文。

結論

此場景重點介紹如何在實際設定中使用 call、apply 和 bind，例如計算餐廳帳單，有助於理解這些方法如何促進 JavaScript 中的管理。