Szenarioübersicht

In einem Restaurant können Kunden mehrere Gerichte bestellen, und wir möchten ihre Gesamtrechnung auf der Grundlage der Preise der bestellten Gerichte, aller anfallenden Steuern und Rabatte berechnen. Wir erstellen eine Funktion zur Berechnung der Gesamtrechnung und verwenden „Call“, „Apply“ und „Bind“, um verschiedene Kunden und deren Bestellungen zu bearbeiten.

Codebeispiel

// 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

Erläuterung

1. Funktionsdefinition:

   • Wir definieren eine Funktion berechneTotalBill, die Steuersatz und Rabatt als Parameter verwendet. Diese Funktion berechnet die Gesamtrechnung, indem sie die Steuer zur Bestellsumme addiert und etwaige Rabatte abzieht.

2. Kundenobjekte:

   • Wir erstellen zwei Kundenobjekte, Kunde1 (Sarah) und Kunde2 (Mike), jedes mit seinem jeweiligen Namen und der Gesamtbestellmenge.

3. Mit Aufruf:

   • Für Sarah berechnen wir ihre Gesamtrechnung mithilfe der Anrufmethode. Dadurch können wir customer1 als Kontext angeben und den Steuersatz und den Rabatt als separate Argumente übergeben. Die Ausgabe zeigt Sarahs Gesamtrechnung nach Anwendung der Steuer und des Rabatts.

4. Verwenden von apply:

   • Für Mike verwenden wir die Apply-Methode, um seine Gesamtrechnung zu berechnen. Mit dieser Methode können wir die Parameter als Array übergeben, was die Verarbeitung mehrerer Argumente erleichtert. Die Gesamtrechnung für Mike wird ähnlich berechnet, jedoch mit unterschiedlichen Steuer- und Rabattwerten.

5. Verwenden von bind:

   • Wir erstellen mit bind eine gebundene Funktion für Sarah, die den Kontext auf customer1 sperrt. Dies bedeutet, dass wir diese neue Funktion später aufrufen können, ohne sie erneut angeben zu müssen. Wir demonstrieren dies, indem wir Sarahs Gesamtrechnung noch einmal mit anderen Parametern berechnen, was flexible zukünftige Berechnungen ermöglicht.

Ausgabe

• In den Konsolenprotokollen werden die Gesamtrechnungen für Sarah und Mike basierend auf ihren jeweiligen Bestellungen und Rabatten angezeigt.
• Dieses Beispiel zeigt effektiv, wie Call, Apply und Bind verwendet werden können, um Funktionskontexte innerhalb eines Restaurant-Abrechnungssystems zu verwalten.

Abschluss

Dieses Szenario zeigt, wie Call, Apply und Bind in einer praktischen Umgebung verwendet werden können, beispielsweise bei der Berechnung von Restaurantrechnungen, und hilft zu verstehen, wie diese Methoden die Verwaltung dieser Aufgaben in JavaScript erleichtern.