Question

我有一个JavaScript对象，我需要一些属性来引用其他属性的值。也就是说，我有一个按钮，我想在任何时候都相对于父面板位置，这就是我尝试过的：

var main_panel_obj = {
  id: 'mainPanel',
  component: 'Window',
  draggable: false,
  padding: 4,
  position: { x: 0, y: 0 },
  width: gW*.04,
  height: gH,
  layout: [1, 3],
  children: [
    {
      id: 'btnWater',
      component: 'Button',
      skin: 'bluebutton',
      position: { x: this.position.x, y: this.position.y+20 },  // x,y from line 6
      width: gW * 0.03,
      height: gH * 0.03
    }
  ]
};

如何让儿童按钮的位置引用父母的面板位置？

Answer 1

要么再次对它们进行硬编码（因为这是代码中的所有一条语句，所以它们无法更改）：

position: { x: 0, y: 20 }

或先用变量声明它们，然后使用变量：

var startX = 0;
var startY = 0;
var main_panel_obj = {
    //...
    position: { x: startX, y: startY },
    //...
    children: [
    {
        //...
        position: { x: startX, y: startY + 20 },
        //...
    }]
};

对象不知道另一个持有对它的引用的对象。毕竟，如果多个对象持有对它的引用会发生什么？

Answer 2

让孩子使用getter作为位置，这是在创建后实例化的函数。将这个与孩子们一起参考他们的父母，你可以在你试图获得孩子的位置时计算相对位置。

这样做的原因是当你试图获得孩子的位置时，会调用一个函数并且可以获得实时值。

编辑：添加代码示例;

var main_panel_obj = {
  id: 'mainPanel',
  component: 'Window',
  draggable: false,
  padding: 4,
  position: { x: 0, y: 0 },
  width: gW*.04,
  height: gH,
  layout: [1, 3],
  children: []
};

// Add children to the parent as needed
main_panel_obj.children.push({
  id: 'btnWater',
  parent: main_panel_obj, // this is the reference to the parent
  component: 'Button',
  skin: 'bluebutton',
  offsets: {x:0, y:20},
  get position(){ // property getter will always return latest relative position
    return {
      x: this.parent.position.x+this.offsets.x, 
      y: this.parent.position.y+this.offsets.y 
    };
  },
  width: gW * 0.03,
  height: gH * 0.03
});
// Example Usage
// Getters aren't used with function syntax and so won't break 
// compatibility with anything trying to read the position property
console.log(main_panel_obj.children[0].position);

如何访问同一对象中的对象值

2 个答案: