Question

我有基本代码，可以创建包含x和y的对象的二维数组。当我第一次实例化数组中的对象时，它们保存的数据是准确的。但是，当我进入requestAnimationFrame循环内部时，数据已损坏并且不再准确？而且我无法解释为什么会发生

这是我的index.html

<html>
    <head>
        <script src="index.js"></script>
    </head>
    <body>
        <canvas id="canvas"></canvas>
    </body>
</html>

index.js

window.addEventListener('DOMContentLoaded', (event) => {
    class Pos {
        constructor(y, x) {
            this.y = y;
            this.x = x;
        }
        getx() {
            return x;
        }
        gety() {
            return y;
        }
    }
    var canvas = document.getElementById("canvas");
    let ctx = canvas.getContext("2d");
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    let surfacex = 10;
    let surfacey = 10;
    let surface = new Array(surfacey);

    for (var y = 0; y < surfacey; ++y) {
        surface[y] = new Array(surfacex);
    }
    for (var y = 0; y < surfacey; ++y) {
        for (var x = 0; x < surfacex; ++x) {
            surface[y][x] = new Pos(y, x);
        }
    }

    for (var y = 0; y < surfacey; ++y) {
        for (var x = 0; x < surfacex; ++x) {
            console.log(surface[y][x].getx()+":"+surface[y][x].gety());//THis line prints correctly
        }
    }

    function tick(time) {


        ctx.clearRect(0, 0, surfacex, surfacey);

       for (var y = 0; y < surfacey; ++y) {
        for (var x = 0; x < surfacex; ++x) {
            console.log(surface[y][x].getx()+":"+surface[y][x].gety());//Prints 10:10....no longer correct
        }
    }

        requestAnimationFrame(tick);
    }
    requestAnimationFrame(tick);
});

我运行2D循环以实例化对象，然后再次运行循环以打印其数据。他们的数据可以正确打印，但是当我在requestAnimationFrame循环中连续运行循环时，getx和gety始终返回10:10。.

Answer 1

在getx()和gety()方法中，您应将x和y称为this.x和this.y：

class Pos {
  constructor(y, x) {
    this.y = y;
    this.x = x;
  }
  getx() {
    return this.x;
  }
  gety() {
    return this.y;
  }
}

在Javascript中使用var声明的变量将被“悬挂”。有关更多信息，请参见MDN。基本上，这意味着，如果在声明变量之前先对其进行引用，则不会出错，但是可以访问该变量（最初为undefined）。因此，x和y方法中的getx()和gety()变量引用您在循环中使用的x和y变量。在执行这些方法时，您已经遍历了循环，并且x和y的值都将是10，它们由类方法返回。 / p>

2D数组数据被覆盖？

1 个答案: