Heim > Web-Frontend > js-Tutorial > Verwendung von „call', „apply' und „bind' in einem Restaurant-Abrechnungssystem.

Verwendung von „call', „apply' und „bind' in einem Restaurant-Abrechnungssystem.

Mary-Kate Olsen
Freigeben: 2024-09-26 17:36:02
Original
549 Leute haben es durchsucht

Using `call`, `apply`, and `bind` in a Restaurant Billing System.

Scenario Overview

In a restaurant, customers can order multiple dishes, and we want to calculate their total bill based on the prices of the dishes ordered, any applicable taxes, and discounts. We’ll create a function to compute the total bill and use call, apply, and bind to handle different customers and their orders.

Code Example

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

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

Nach dem Login kopieren

Explanation

  1. Function Definition:

    • We define a function calculateTotalBill that takes taxRate and discount as parameters. This function calculates the total bill by adding tax to the order total and subtracting any discounts.
  2. Customer Objects:

    • We create two customer objects, customer1 (Sarah) and customer2 (Mike), each with their respective names and total order amounts.
  3. Using call:

    • For Sarah, we calculate her total bill using the call method. This allows us to specify customer1 as the context and pass the tax rate and discount as separate arguments. The output shows Sarah's total bill after applying the tax and discount.
  4. Using apply:

    • For Mike, we use the apply method to calculate his total bill. This method allows us to pass the parameters as an array, making it convenient for handling multiple arguments. The total bill for Mike is calculated similarly but with different tax and discount values.
  5. Using bind:

    • We create a bound function for Sarah using bind, which locks the context to customer1. This means we can later call this new function without needing to specify this again. We demonstrate this by calculating Sarah's total bill again with different parameters, allowing for flexible future calculations.

Output

  • The console logs display the total bills for both Sarah and Mike based on their respective orders and discounts.
  • This example effectively demonstrates how call, apply, and bind can be used to manage function contexts within a restaurant billing system.

Conclusion

This scenario highlights how call, apply, and bind can be utilized in a practical setting, such as calculating restaurant bills, helping to understand how these methods facilitate the management of this in JavaScript.

Das obige ist der detaillierte Inhalt vonVerwendung von „call', „apply' und „bind' in einem Restaurant-Abrechnungssystem.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:dev.to
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage