使用JavaScript对象字面它自己的领域(javascript object literals

2019-08-16 15:55发布

我想创建一个包含某些组件的整体配置一个对象。 我会liek太是这样的:

var ObjectConfig = {
    fieldKeys : {
        name: "Obj. name",
        state: "Obj. state",
        color: "Obj. color"
    },
    templates : {
        basicTemplate :  [ ObjectConfig.fieldKeys.name, ObjectConfig.fieldKeys.state ],
        altTemplate : [ ObjectConfig.fieldKeys.name, ObjectConfig.fieldKeys.color ]
    }
}

但这种以正确的方式做到这一点 - 这是行不通的。 我怎样才能实现我的目标是什么?

编辑:对不起,我用手在匆忙写它,这就是语法错误的来源。 现在,它是正确的。 我得到的错误是Uncaught TypeError: Cannot read property 'fieldKeys' of undefined 。 我想,做这种方式是不可能的 - 什么是最好的选择呢?

Answer 1:

你的问题是,对象从字面建造之前它被分配到ObjectConfig变量。 因此,访问ObjectConfig.fieldKeys字面内会导致错误。

最好的解决办法是只构造第一个对象,然后依次添加进一步的性质:

var ObjectConfig = {
    fieldKeys: {
        name: "Obj. name",
        state: "Obj. state",
        color: "Obj. color"
    }
};
ObjectConfig.templates = {
    basicTemplate:  [ ObjectConfig.fieldKeys.name, ObjectConfig.fieldKeys.state ],
    altTemplate: [ ObjectConfig.fieldKeys.name, ObjectConfig.fieldKeys.color ]
};

另一(更短)的方法将用于键一个额外的变量对象,它是模板的施工之前分配的对象:

var keys, ObjectConfig = {
    fieldKeys: keys = {
        name: "Obj. name",
        state: "Obj. state",
        color: "Obj. color"
    },
    templates: {
        basicTemplate: [ keys.name, keys.state ],
        altTemplate: [ keys.name, keys.color ]
    }
};

要解决在全球范围内的额外的变量,你可以用一个IEFE 。 一个更可读的解决方案可能是这样的,那么:

var ObjectConfig = (function() {
    var keys = {
        name: "Obj. name",
        state: "Obj. state",
        color: "Obj. color"
    };
    return {
        fieldKeys: keys,
        templates: {
            basicTemplate: [ keys.name, keys.state ],
            altTemplate: [ keys.name, keys.color ]
        }
    };
})();


文章来源: javascript object literals using it's own fields