时间戳

首页 > 解决方案 > 二维数组数据被覆盖？

javascript - 二维数组数据被覆盖？

问题描述

我有基本代码，它创建一个包含 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..

标签： javascripthtml5-canvas

解决方案

在getx()andgety()方法中，您应该将xandy称为this.xand 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最初一样）。所以and方法中的xandy变量指的是你在循环中使用的and变量。当您执行这些方法时，您已经完成了循环，并且 和 的值都是，它们都由类方法返回。getx()gety()xyxy10

推荐阅读