Обзор сценария

В ресторане клиенты могут заказать несколько блюд, и мы хотим рассчитать общий счет на основе цен на заказанные блюда, применимых налогов и скидок. Мы создадим функцию для расчета общего счета и будем использовать вызов, применение и привязку для обработки разных клиентов и их заказов.

Пример кода

// 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. Определение функции:

   • Мы определяем функцию CalculTotalBill, которая принимает в качестве параметров TaxRate и Discount. Эта функция вычисляет общий счет, добавляя налог к ​​общей сумме заказа и вычитая скидки.

2. Объекты клиента:

   • Мы создаем два объекта клиента: клиент1 (Сара) и клиент2 (Майк), каждый со своими именами и общей суммой заказа.

3. Использование вызова:

   • Для Сары мы рассчитываем ее общий счет, используя метод вызова. Это позволяет нам указать customer1 в качестве контекста и передать налоговую ставку и скидку в качестве отдельных аргументов. Вывод показывает общий счет Сары после применения налога и скидки.

4. Использование применения:

   • Для Майка мы используем метод Apply для расчета его общего счета. Этот метод позволяет нам передавать параметры в виде массива, что делает его удобным для обработки нескольких аргументов. Общий счет для Майка рассчитывается аналогично, но с другими значениями налогов и скидок.

5. Использование привязки:

   • Мы создаем привязанную функцию для Сары, используя привязку, которая блокирует контекст для клиента1. Это означает, что позже мы сможем вызвать эту новую функцию без необходимости указывать ее снова. Мы продемонстрируем это, снова рассчитав общий счет Сары с другими параметрами, что позволит проводить гибкие расчеты в будущем.

Выход

• В журналах консоли отображаются общие счета Сары и Майка с учетом их заказов и скидок.
• Этот пример эффективно демонстрирует, как вызов, применение и привязка могут использоваться для управления контекстами функций в системе выставления счетов в ресторане.

Заключение

В этом сценарии показано, как вызов, применение и привязка могут использоваться в практических целях, например, при расчете счетов в ресторане, и помогает понять, как эти методы облегчают управление этим в JavaScript.