javascript - 引用存储在另一个类的数组中的类实例

Question

如果标题没有意义，我们深表歉意。我自己已经很困惑了，但我会尝试在下面详细说明这个问题。

我有三个 Javascript 类:

一个js(包含类映射)B js(包含类mapObject)C js( map 制作器逻辑)

在 C 类中，我创建了一个 map 实例，它是一个带有网格布局的 Canvas 。

用户可以单击 map 并使用热键添加mapObject的实例。

现在我正在尝试显示 mapObject 图标，但我完全不知道如何显示:

map 创建和MapObject创建代码(C js):

 case 13: // Enter Key (Submit)
        unhighlightTools();
        currentMap.drawMap();
        if(currentFloor != null){
            currentFloor.hasFloor = true;
            if(currentFloor.tileName == "Guild"){
                createGuildObject(currentFloor.position.x,currentFloor.position.y,currentFloor);
            }
            console.log("Map object created at - X:"+currentFloor.position.x+" Y:"+currentFloor.position.y);
            createMapObject(currentFloor.position.x,currentFloor.position.y,currentFloor);
        }
        currentFloor = null;
        highlightTools();
        break;
}

// Create a Map Object and push it to the currentMap with its position.
function createMapObject(x,y,floor){
currentMap.objects.push(new MapObject(x,y,floor));
}

// Create a Guild Object (extension of Map Object) and push it to the currentMap with its position.
function createGuildObject(x,y,floor){
currentMap.objects.push(new Guild(x,y,floor));
}

在MapObject中定义 map 图标(b js)

class MapObject {
constructor(x,y,floor) {
    this.position = {x, y};
    this.icon = this.wallFloorIcons(floor);
 }

 wallFloorIcons(floor) {
    var self = this;
    self.img = new Image();

    self.name = <code that creates the name>
    self.name = 'wall-'+self.name+'.png';

    if(self.name == 'wall-.png'){
        self.img.src = "../images/mapSprites/floor.png";
    }else {
        self.img.src = "../images/mapSprites/"+self.name;
    }

    console.log(self.img);
    return self.img;
 }

这是让我感到困惑的一点。使用 Map 类中的 MapObject 中的图标(js):

fillMap(){
    var self = this;

    self.c.lineWidth = 1;
    self.c.strokeStyle = 'black';
    self.c.fillStyle = "rgba(255, 255, 255, 0.2)";

    for (var row = 0; row < self.boxes; row++) {
        for (var column = 0; column < self.boxes; column++) {
            var x = column * self.boxSize;
            var y = row * self.boxSize;

            self.c.beginPath();
            self.c.rect(x, y, self.boxSize, self.boxSize);
            self.c.stroke();
            self.c.closePath();

            for (var i=0; i<self.objects.length; i++) {
                var floor = self.objects[i];
                if (floor.position.x == column && floor.position.y == row) {  
                    if (self.objectsAtPosition({x:floor.position.x, y:floor.position.y}) != null) {
                        var j = self.objectsAtPosition({x:floor.position.x, y:floor.position.y});
                        console.log(j.icon);
                        this.c.drawImage(self.objectsAtPosition({x:floor.position.x, y:floor.position.y}).getIcon(),x,y, self.boxSize, self.boxSize);
                    }
                }     
            }
        }
    }

在最后的 if 语句中，我使用 a.js 中的以下代码检查我的位置是否有任何对象:

objectsAtPosition(position) {
    var objs = [];
    for (var o of this.objects) {
        if (o.position.x == position.x && o.position.y == position.y) {
            objs.push(o);
        }
    }
    return objs;
}

总结一下...

我正在创建一个类的实例，并将其推送到另一个类中的数组。然后在尝试从第二个类的第一个类的实例中获取图标时陷入困境。

我的 console.log(j.icon) 返回未定义，我似乎无法从 MapObject 中获取任何详细信息，但是如果我 console.log(j) 那么我确实会在控制台中看到 MapObject所有详细信息。

我在这方面还是个新手，我确信我把它搞砸了，所以请对我宽容一些:p

谢谢!柠檬蟹

Answer 1

objectsAtPosition()返回一个对象数组，并且数组没有 icon属性(property)。也许您想迭代 self.objectsAtPosition({x:floor.position.x, y:floor.position.y}) :

const mapObjects = self.objectsAtPosition({x:floor.position.x, y:floor.position.y})
for (const mapObject of mapObjects) {
    this.c.drawImage(mapObject.getIcon(), x, y, self.boxSize, self.boxSize);
}

其他一些建议:

1. 而不是 {x:floor.position.x, y:floor.position.y}你可以只使用 floor.position .
2. objectsAtPosition()可以写得更简单 Array.filter() :return this.objects.filter(o => o.position.x == position.x && o.position.y == position.y)
3. 没有必要这样做var self = this除非您希望能够访问 this 的值在您的方法内的匿名函数内。