Данные 2D-массива перезаписываются? - PullRequest
Новая
       7

Данные 2D-массива перезаписываются?

0 голосов
/ 05 мая 2020

У меня есть базовый c код, который создает двумерный массив объекта, который содержит x и y. Когда я впервые создаю экземпляры объектов в массиве, они содержат точные данные. Но когда я попадаю внутрь requestAnimationFrame l oop, данные становятся поврежденными и перестают быть точными? И я не могу объяснить, почему это происходит

Вот мой индекс. 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 l oop для создания экземпляров объектов, затем снова запустите l oop, чтобы распечатать их данные. Их данные печатаются правильно, но когда я последовательно запускаю l oop внутри requestAnimationFrame l oop, getx и gety продолжают возвращать 10:10 ..

1 Ответ

1 голос
/ 05 мая 2020

В методах 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;
  }
}

Переменные, объявленные с использованием var в Javascript будет «поднят». См. MDN для получения дополнительной информации об этом. По сути, это означает, что если на переменную ссылаются до ее объявления, вы не получите ошибки, но переменная будет доступна (изначально как undefined). Таким образом, переменные x и y в методах getx() и gety() относятся к переменным x и y, которые вы используете в своих циклах. К тому времени, когда вы выполняете эти методы, вы уже прошли свои циклы, и значения x и y оба будут 10, которые возвращаются методами класса.

...