Visão geral do cenário

Em um restaurante, os clientes podem pedir vários pratos e queremos calcular a conta total com base nos preços dos pratos pedidos, quaisquer impostos aplicáveis ​​e descontos. Criaremos uma função para calcular a fatura total e usaremos call, apply e bind para lidar com diferentes clientes e seus pedidos.

Exemplo de código

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

Explicação

1. Definição de função:

   • Definimos uma função calculaTotalBill que usa taxRate e desconto como parâmetros. Esta função calcula a fatura total adicionando impostos ao total do pedido e subtraindo quaisquer descontos.

2. Objetos do cliente:

   • Criamos dois objetos de cliente, cliente1 (Sarah) e cliente2 (Mike), cada um com seus respectivos nomes e valores totais do pedido.

3. Usando chamada:

   • Para Sarah, calculamos sua fatura total usando o método de chamada. Isso nos permite especificar customer1 como o contexto e passar a taxa de imposto e o desconto como argumentos separados. A saída mostra a conta total de Sarah após a aplicação do imposto e do desconto.

4. Usando aplicar:

   • Para Mike, usamos o método apply para calcular sua fatura total. Este método nos permite passar os parâmetros como um array, tornando-o conveniente para lidar com vários argumentos. A fatura total de Mike é calculada de forma semelhante, mas com valores de impostos e descontos diferentes.

5. Usando vincular:

   • Criamos uma função vinculada para Sarah usando bind, que bloqueia o contexto para customer1. Isso significa que podemos chamar essa nova função posteriormente sem precisar especificá-la novamente. Demonstramos isso calculando novamente a conta total de Sarah com parâmetros diferentes, permitindo cálculos futuros flexíveis.

Saída

• Os registros do console exibem o total de contas de Sarah e Mike com base em seus respectivos pedidos e descontos.
• Este exemplo demonstra efetivamente como call, apply e bind podem ser usados ​​para gerenciar contextos de função em um sistema de faturamento de restaurante.

Conclusão

Este cenário destaca como call, apply e bind podem ser utilizados em um ambiente prático, como cálculo de contas de restaurantes, ajudando a entender como esses métodos facilitam o gerenciamento disso em JavaScript.