JavaScript对象文字使用它自己的字段

javascript object literals using it's own fields

本文关键字：它自己 自己的 字段 对象 文字 JavaScript      更新时间：2023-09-26

我想创建一个包含某个组件的整个配置的对象。我也希望它是这样的：

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.我想这样做是不可能的——那么最好的选择是什么？

您的问题是对象是在分配给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 ]
};

另一种（较短的）方法是为 keys 对象创建一个额外的变量，该变量是在构造模板对象之前分配的：

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 ]
        }
    };
})();
相关文章：