Question

不明白哪里出了问题

2021-07-24

73

javascript

我编写此代码作为工厂模式的实践，但出现错误并且我不知道为什么。

代码：

class ShopFactory {
    constructor (item, type, name) {
        let shelf;
        if(type === "toiletries"){
            shelf = new Toiletries(item, name);
        }else if (type === "cosmetics") {
            shelf = new Cosmetics(item, name);
        }else if (type === "foods") {
            shelf = new Foods(item, name);
        }else if (type === "beautifications"){
            shelf = new Beautifications(item, name);
        }
        shelf.type = type;
        shelf.func = function () {
            console.log(`${this.item}--${this.type}--${this.name} Cost: ${this.cost}`);
        }
        return shelf;
    }
}

class Toiletries{
    constructor (item, name){
        this.item = item;
        this.name = name;
        this.cost = "$15";
    }
}
class Cosmetics{
    constructor (item, name){
        this.item = item;
        this.name = name;
        this.cost = "$30";
    }
}
class Foods{
    constructor (item, name){
        this.item = item;
        this.name = name;
        this.cost = "$20";
    }
}
class Beautifications{
    constructor (item, name){
        this.item = item;
        this.name = name;
        this.cost = "$25";
    }
}

var shelves = [];
shelves.push(new ShopFactory("grocery","foods","rice"));
shelves.push(new ShopFactory("cleaning","toiletries","toilet-cleaner"));
shelves.push(new ShopFactory("machine-tools","beautifications","screw-driver"));
shelves.push(new ShopFactory("powder","Cosmetics","body-powder"));
shelves.push(new ShopFactory("cleaning","beautifications","wand"));
shelves.push(new ShopFactory("grocery","foods","fish"));

console.log(shelves);

Error:
Uncaught TypeError: Cannot set property 'type' of undefined
    at ShopFactory.createShelf (app2.js:18)
    at app2.js:60
createShelf @ app2.js:18
(anonymous) @ app2.js:60

Answer 1

问题是：如果您向工厂传递无效的 type （例如 “Cosmetics” ），工厂会做什么？ 请记住，大小写很重要。 您应该抛出适当的信息性错误，否则将不会设置 shelf ，并且您正在尝试执行 (undefined).type = type; :

class ShopFactory {
    constructor(item, type, name) {
        let shelf;
        if (type === "toiletries") {
            shelf = new Toiletries(item, name);
        } else if (type === "cosmetics") {
            shelf = new Cosmetics(item, name);
        } else if (type === "foods") {
            shelf = new Foods(item, name);
        } else if (type === "beautifications") {
            shelf = new Beautifications(item, name);
        } else {
            throw new Error(`Unknown type '${type}'`);
        }
        shelf.type = type;
        shelf.func = function () {
            console.log(`${this.item}--${this.type}--${this.name} Cost: ${this.cost}`);
        }
        return shelf;
    }
}

Answer 2

shelves 应该是对象，因为您要在其上附加 type 。

class ShopFactory {
    constructor (item, type, name) {
        let shelf = {};
        if(type === "toiletries"){
            shelf = new Toiletries(item, name);
        }else if (type === "cosmetics") {
            shelf = new Cosmetics(item, name);
        }else if (type === "foods") {
            shelf = new Foods(item, name);
        }else if (type === "beautifications"){
            shelf = new Beautifications(item, name);
        }
        shelf.type = type;
        shelf.func = function () {
            console.log(`${this.item}--${this.type}--${this.name} Cost: ${this.cost}`);
        }
        return shelf;
    }
}

Answer 3

当您执行此行

357013501

构造函数的下面条款失败（因为条件“ cosmetics”在“ cosmetics”不匹配的情况下），因此变量 >货架 仍然不确定。然后，您分配了 shelf.type ，但是由于变量 架子 仍然不确定（不是对象），因此无法分配其中的属性。这就是为什么您会遇到错误的原因。

7533363277

一个快速解决方案将变量 shelf 作为对象，例如 ，让Shelf = {} ;