个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-12-02 20:50:50 24 4
gpt4 key购买 nike

我有基本代码，它创建一个包含 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 循环来实例化 then 对象，然后再次运行该循环来打印它们的数据。他们的数据打印正确，但是当我在 requestAnimationFrame 循环内连续运行循环时，getx 和 gety 只是继续返回 10:10..

最佳答案

在 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)。因此，getx() 和 gety() 方法中的 x 和 y 变量引用了 您在循环中使用的 x 和 y 变量。当您执行这些方法时，您已经运行完循环，并且 x 和 y 的值都将是 10，由类方法返回。

关于javascript - 二维数组数据被覆盖？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/61609036/

24 4 0
文章推荐： javascript - D3条形图图形表示问题
文章推荐： sql - 使用带有分号字符的 STRPOS 时出现语法错误或访问冲突
文章推荐： 正则表达式、数字或空
文章推荐： javascript - 如何在Node中同步执行shell命令？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com