Javascript 默认的工厂模式，不工作

Question

在学校里，我不得不使用 Javascript 的工厂模式设计制作一个 Javascript 脚本，即 "made" 比萨饼。 Factory 函数必须接收 3 个参数（成分字符串数组、披萨价格和价格字符串），如果缺少参数，它必须 return 默认意大利辣香肠披萨。

我使用了这个代码：

function pizzaFactory(ing, pric, siz) {
    let ingred = null;
    let price = null;
    let size = null;
    if(typeof ing == "undefined" || typeof pric == "undefined" || typeof siz == "undefined") {
        ingred = ["pepperoni", "cheese", "tomato sauce", "lots and lots and lots and lots and lots of love"];
        price = 125;
        size = "Small";
    } else {
        ingred = ing;
        price = pric;
        size = siz;
    }
    return {
        ing: ingred,
        pric: price,
        siz: size,
        deliver: function() {
            console.log(`Pizza Ingredients: ${ing}`);
            console.log(`Price: ${pric}`);
            console.log(`Size: ${siz}`);
        }
    };
}
let ingredients = ['cheese', 'tomato sauce', 'hate'];
const pizza1 = pizzaFactory(ingredients, 150, "Large");
pizza1.deliver();
const pizza2 = pizzaFactory();
pizza2.deliver();

问题在于该函数仅在传递所有参数时才起作用，尽管该函数进入 if 并将值正确分配给变量 ingred、price 和 size。当运行 deliver 函数时，值显示为未定义。

我想知道我的代码有什么问题，是否有 better/more 有效的方法。

谢谢。

Answer 1

在函数内部，输入参数被命名为 ing、pric 和 siz。然后，将 validated 值放入变量 ingred、price 和 size.

目前，在返回的对象中，您引用的是 ing、pric 和 siz，而不是经过验证的变量 - 修复该问题，它会按预期工作：

function pizzaFactory(ing, pric, siz) {
    let ingred = null;
    let price = null;
    let size = null;
    if(typeof ing == "undefined" || typeof pric == "undefined" || typeof siz == "undefined") {
        ingred = ["pepperoni", "cheese", "tomato sauce", "lots and lots and lots and lots and lots of love"];
        price = 125;
        size = "Small";
    } else {
        ingred = ing;
        price = pric;
        size = siz;
    }
    return {
        ing: ingred,
        pric: price,
        siz: size,
        deliver: function() {
            console.log(`Pizza Ingredients: ${ingred}`);
            console.log(`Price: ${price}`);
            console.log(`Size: ${size}`);
        }
    };
}
let ingredients = ['cheese', 'tomato sauce', 'hate'];
const pizza1 = pizzaFactory(ingredients, 150, "Large");
pizza1.deliver();
const pizza2 = pizzaFactory();
pizza2.deliver();

这就是为什么精确的变量名称很重要的原因之一。您可能会考虑使用不同的，以明确区别：例如，可能 ingredArg 和 ingredValidated:

function pizzaFactory(ingArg, pricArg, sizArg) {
    const argsValid = [ingArg, pricArg, sizArg].every(arg => arg !== undefined)
    const ingredValidated = argsValid ? ingArg : ["pepperoni", "cheese", "tomato sauce", "lots and lots and lots and lots and lots of love"];
    const priceValidated = argsValid ? pricArg : 125; 
    const sizeValidated = argsValid ? sizArg : 'Small';
    return {
        ing: ingredValidated,
        pric: priceValidated,
        siz: sizeValidated,
        deliver: function() {
            console.log(`Pizza Ingredients: ${ingredValidated}`);
            console.log(`Price: ${priceValidated}`);
            console.log(`Size: ${sizeValidated}`);
        }
    };
}
let ingredients = ['cheese', 'tomato sauce', 'hate'];
const pizza1 = pizzaFactory(ingredients, 150, "Large");
pizza1.deliver();
const pizza2 = pizzaFactory();
pizza2.deliver();

Answer 2

订单似乎是一个实体，而不是创建不同的变量来创建一个订单对象，如果需要，return它。

function pizzaFactory(ing, pric, siz) {
  let order = {
    ing: null,
    pric: null,
    siz: null
  };

  if(!ing || !pric || !siz) {
    order = {
      ing: ["pepperoni", "cheese", "tomato sauce", "lots and lots and lots and lots and lots of love"],
      pric: 125,
      siz: 'Small'
    }
   } else {
    order = {
      ing,
      pric,
      siz
    }
  }
    return {
      ...order,
      deliver() {
        console.log(`Pizza Ingredients: ${order.ing}`);
        console.log(`Price: ${order.pric}`);          
        console.log(`Size: ${order.siz}`);
      }
    };
  }

let ingredients = ['cheese', 'tomato sauce', 'hate'];
const pizza1 = pizzaFactory(ingredients, 150, "Large");
pizza1.deliver();
const pizza2 = pizzaFactory();
pizza2.deliver();

Answer 3

以下是您的问题的有效解决方案：

function pizzaFactory(ing, pric, siz) {
    let ingred = null;
    let price = null;
    let size = null;
    if(typeof ing == "undefined" || typeof pric == "undefined" || typeof siz == "undefined") {
        ingred = ["pepperoni", "cheese", "tomato sauce", "lots and lots and lots and lots and lots of love"];
        price = 125;
        size = "Small";
    } else {
        ingred = ing;
        price = pric;
        size = siz;
    }
    return {
        ing: ingred,
        pric: price,
        siz: size,
        deliver: function() {
            console.log(`Pizza Ingredients: ${ingred}`);
            console.log(`Price: ${price}`);
            console.log(`Size: ${size}`);
        }
    };
}

您的代码中唯一需要更新的部分如下：

 return {
            ing: ingred,
            pric: price,
            siz: size,
            deliver: function() {
                console.log(`Pizza Ingredients: ${ingred}`);
                console.log(`Price: ${price}`);
                console.log(`Size: ${size}`);
            }
        };

需要更新以下语句的地方：

console.log(`Pizza Ingredients: ${ing}`);

到

console.log(`Pizza Ingredients: ${ingred}`);

然后，

console.log(`Price: ${pric}`);

到

console.log(`Price: ${price}`);

然后，

console.log(`Size: ${siz}`);

到

console.log(`Size: ${size}`);

因为你实际上指的是 ing、pric、siz，它们是函数参数，当你调用函数时必须是 undefined pizzaFactory 没有参数，例如：

const pizza2 = pizzaFactory();

希望对您有所帮助。

Javascript 默认的工厂模式，不工作

Javascript factory pattern with a default, not working

javascript

factory-pattern