打砖块游戏二维数组开发：对象定义阶段如何获取正确的this值？

问题原因 #

你遇到的this.x返回undefined，是因为对象字面量内部的this并不指向当前正在创建的对象，它的指向取决于当前的执行上下文（比如严格模式或模块环境下this就是undefined）。另外，在对象还未赋值给bricks[r][c]时，直接访问bricks[r][c].x肯定无效，因为这个数组位置此时还没有对象。

解决方案 #

先把当前砖块的x、y坐标计算出来存到临时变量里，再用这些变量直接构建边界属性，就能彻底避开this和未赋值数组的问题：

const bricks = [];
for (let r = 0; r < brickRow; r++) {
  bricks[r] = [];
  for (let c = 0; c < brickCol; c++) {
    // 先计算当前砖块的x、y值，存到临时变量
    const brickX = r * (brickWidth + gap) + 10;
    const brickY = c * (brickHeight + gap) + 10;
    bricks[r][c] = {
      x: brickX,
      y: brickY,
      bLeft: brickX,
      bTop: brickY,
      bRight: brickX + brickWidth,
      bBottom: brickY + brickHeight
    };
  }
}

额外优化思路 #

如果后续砖块位置可能发生变化（比如被击中后位移），可以把边界属性改成getter函数，这样每次访问时都会自动根据当前的x、y计算最新值，不用手动同步：

const bricks = [];
for (let r = 0; r < brickRow; r++) {
  bricks[r] = [];
  for (let c = 0; c < brickCol; c++) {
    bricks[r][c] = {
      x: r * (brickWidth + gap) + 10,
      y: c * (brickHeight + gap) + 10,
      get bLeft() { return this.x; },
      get bTop() { return this.y; },
      get bRight() { return this.x + brickWidth; },
      get bBottom() { return this.y + brickHeight; }
    };
  }
}

之后修改bricks[r][c].x时，bRight这类边界属性会自动更新，不用再单独维护。

内容的提问来源于stack exchange，提问作者TyaCode