Question

我正在声明该对象：

var layout = {
    menu: {
        type: 0,
        x: 50,
        y: 50,
        w: 50,
        h: 50
    },

    name: {
        type: 2,
        str: "name",
        x: 50+layout.menu.x,
        y: 40+layout.menu.y,
        h: 25
    }
}

但是由于某些原因，当尝试引用“ layout.menu”时，控制台会在未明确定义之前发出尖叫，它是未定义的。谁能阐明为什么会这样？

Answer 1

变量layout仅在首先评估了赋值的右侧时才接收其值。只有之后会评估对layout的分配。需要评估 whole 对象文字（直到引用的代码结尾）。在分配发生之前，即使在评估对象文字时，变量layout仍将是未定义的。因此，在对象文字中对它的任何引用都将是不确定的。

要解决此问题，请使用增量方法：

var layout = {
    menu: {
        type: 0,
        x: 50,
        y: 50,
        w: 50,
        h: 50
    }
};
// At this moment layout has a value with the "menu" property. So we continue:
layout.name = {
    type: 2,
    str: "name",
    x: 50+layout.menu.x,
    y: 40+layout.menu.y,
    h: 25
};

如果您打算对menu.x和menu.y的值进行 live 引用，那么对这些属性的任何更新将立即反映在{{1 }}结构，那么您需要一个函数，该函数可能是一个吸气剂：

name

但是，如果仅要解决您的初始参考问题，则不建议将其作为解决方案，因为每次使用此解决方案，您都会读取{{1 }}，将执行getter函数，这是不必要的开销。

Answer 2

在使用文字创建的对象实际分配给变量布局之前，您正在调用菜单。

您可以一一添加菜单和名称属性。

var layout = {};
 layout.menu = ...
 layout.name = ...

Javascript属性无法引用同一对象的属性

2 个答案: