javascript - 构造一个结构复杂的Javascript对象？

Question

我有一个具有这种结构的对象，我在代码周围实例化了它

costs: {
    totalPerYear,
    totalEver,

    perMonth: {
        items: {
            depreciation,
            insurance,
            credit,
            inspection,
            roadTaxes,
            fuel,
            maintenance,
            repairsImprovements,
            parking,
            tolls,
            fines,
            washing
        },
        standingCosts,
        runningCosts,
        total
    },

    perUnitDistance: { 
        runningCosts,
        totalCosts
    }
}

我去过reading about constructors和 instantiation 。为了简洁起见，有没有办法为该对象提供一个构造函数，其中所有变量都设置为 undefined ，就像我们定义变量 var x; 时发生的情况一样？

我有明显的解决方案

function Costs(){
    this.totalPerYear = undefined;
    this.totalEver = undefined;

    this.perMonth = {
        items: {
            depreciation: undefined,
            insurance: undefined,
            credit: undefined,
            inspection: undefined,
            roadTaxes: undefined,
            fuel: undefined,
            maintenance: undefined,
            repairsImprovements: undefined,
            parking: undefined,
            tolls: undefined,
            fines: undefined,
            washing: undefined                        
        },
        standingCosts: undefined,
        runningCosts: undefined,
        total: undefined
    };

    this.perUnitDistance = { 
        runningCosts: undefined,
        totalCosts: undefined
    };
};

var userCosts = new Costs();

您使用哪些技术来创建具有复杂结构的对象？

Answer 1

如果您只想要一个对象并且不需要它具有特殊的原型(prototype)，则返回对象而不是构造函数的函数非常简单:

function costs() {
    return {
        costs: {
            totalPerYear: undefined,
            totalEver: undefined,

            perMonth: {
                items: {
                    depreciation: undefined,
                    insurance: undefined,
                    credit: undefined,
                    inspection: undefined,
                    roadTaxes: undefined,
                    fuel: undefined,
                    maintenance: undefined,
                    repairsImprovements: undefined,
                    parking: undefined,
                    tolls: undefined,
                    fines: undefined,
                    washing: undefined
                },
                standingCosts: undefined,
                runningCosts: undefined,
                total: undefined
            },

            perUnitDistance: { 
                runningCosts: undefined,
                totalCosts: undefined
            }
        }
    };
}

示例:

function costs() {
    return {
        costs: {
            totalPerYear: undefined,
            totalEver: undefined,

            perMonth: {
                items: {
                    depreciation: undefined,
                    insurance: undefined,
                    credit: undefined,
                    inspection: undefined,
                    roadTaxes: undefined,
                    fuel: undefined,
                    maintenance: undefined,
                    repairsImprovements: undefined,
                    parking: undefined,
                    tolls: undefined,
                    fines: undefined,
                    washing: undefined
                },
                standingCosts: undefined,
                runningCosts: undefined,
                total: undefined
            },

            perUnitDistance: { 
                runningCosts: undefined,
                totalCosts: undefined
            }
        }
    };
}

console.log(costs());

.as-console-wrapper {
  max-height: 100% !important;
}

当然，没有什么可以阻止您在成本内为自己指定一个更短的名称:

function costs() {
    const u = undefined;
    return {
        costs: {
            totalPerYear: u,
            totalEver: u,

            perMonth: {
                items: {
                    depreciation: u,
                    insurance: u,
                    credit: u,
                    inspection: u,
                    roadTaxes: u,
                    fuel: u,
                    maintenance: u,
                    repairsImprovements: u,
                    parking: u,
                    tolls: u,
                    fines: u,
                    washing: u
                },
                standingCosts: u,
                runningCosts: u,
                total: u
            },

            perUnitDistance: { 
                runningCosts: u,
                totalCosts: u
            }
        }
    };
}

示例:

function costs() {
    const u = undefined;
    return {
        costs: {
            totalPerYear: u,
            totalEver: u,

            perMonth: {
                items: {
                    depreciation: u,
                    insurance: u,
                    credit: u,
                    inspection: u,
                    roadTaxes: u,
                    fuel: u,
                    maintenance: u,
                    repairsImprovements: u,
                    parking: u,
                    tolls: u,
                    fines: u,
                    washing: u
                },
                standingCosts: u,
                runningCosts: u,
                total: u
            },

            perUnitDistance: { 
                runningCosts: u,
                totalCosts: u
            }
        }
    };
}

console.log(costs());

.as-console-wrapper {
  max-height: 100% !important;
}