シナリオの概要

レストランでは、顧客が複数の料理を注文できるため、注文した料理の価格、適用される税金、割引に基づいて合計請求額を計算したいと考えています。合計請求額を計算し、呼び出し、適用、バインドを使用してさまざまな顧客とその注文を処理する関数を作成します。

コード例

// 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. 関数定義:

   • taxRate とdiscount をパラメータとして受け取る関数 CalculateTotalBill を定義します。この関数は、注文合計に税金を加算し、割引を差し引いて合計請求額を計算します。

2. 顧客オブジェクト:

   • 2 つの顧客オブジェクト、customer1 (Sarah) と customer2 (Mike) を作成し、それぞれに名前と合計注文金額を付けます。

3. 通話を使用中:

   • サラの場合、通話メソッドを使用して合計請求額を計算します。これにより、コンテキストとして customer1 を指定し、税率と割引を別の引数として渡すことができます。出力には、税金と割引を適用した後のサラの合計請求額が表示されます。

4. apply の使用:

   • Mike の場合、apply メソッドを使用して合計請求額を計算します。このメソッドを使用すると、パラメーターを配列として渡すことができるため、複数の引数を処理するのに便利です。 Mike への請求総額も同様に計算されますが、税額と割引額は異なります。

5. バインドの使用:

   • bind を使用してサラ用のバインド関数を作成し、コンテキストを customer1 にロックします。これは、後でこれを再度指定する必要なく、この新しい関数を呼び出すことができることを意味します。将来の柔軟な計算を可能にするために、さまざまなパラメーターを使用してサラの合計請求額を再計算することでこれを実証します。

出力

• コンソール ログには、サラとマイクの両方の合計請求額が、それぞれの注文と割引に基づいて表示されます。
• この例は、call、apply、bind を使用してレストランの請求システム内の関数コンテキストを管理する方法を効果的に示しています。

結論

このシナリオでは、レストランの請求書の計算など、実際の設定で呼び出し、適用、バインドをどのように利用できるかを強調し、これらのメソッドが JavaScript での管理をどのように容易にするかを理解するのに役立ちます。