TypeError: maze1.显示不是一个函数

Question

我有一个mazeGen类，它使用使用JS和P5.JS的prims算法生成一个迷宫。在mazeGen类中，我有一个显示函数，将迷宫记录到控制台。当我运行这一行时，它说它没有被定义为函数。THe类将在另一个过程中用于生成多个迷宫，以便将其作为一个类使用。

​

let maze1


function setup() {
    maze1 = new MazeGen(11);

    maze1.display()

}

function draw() {
    background(220);
}






class MazeGen {
    constructor(size) {
        console.warn('in funt')
        this.size = size
        this.maze = new Array(this.size);

        for (let i = 0; i < this.maze.length; i++) {
            this.maze[i] = new Array(this.size);
            for (let j = 0; j < this.maze.length; j++) {
                this.maze[i][j] = 0
            }

        }

        this.maze = this.PrimsAlgorithm()
        this.maze[1][0] = 3;
        this.maze[this.maze.length - 2][this.maze.length - 1] = 2;
        console.table(this.maze);
        return this.maze;
    }







    PrimsAlgorithm() {
        this.frontAvailable = [0, 0, 0, 0];
        this.currentCell = [1, 1];
        while (this.Complete(this.maze, this.size) === false) {
            //Console.WriteLine("Maze is not ready");

            this.maze[this.currentCell[0]][this.currentCell[1]] = 1;
            this.frontAvailable = this.Frontier(this.maze, this.currentCell);
            //While the list of frontier cells is not empty
            while (this.frontAvailable[0] !== 0 || this.frontAvailable[1] !== 0 || this.frontAvailable[2] !== 0 || this.frontAvailable[3] !== 0) {
                //pick a random way
                this.picked = false;
                this.numSelected = 5;
                while (this.picked === false) {

                    this.numSelected = Math.floor(Math.random() * 5);
                    if (this.frontAvailable[this.numSelected] === 1) {
                        this.picked = true;
                    }
                }
                //'Move to cell'
                this.maze = this.MoveSquare();
                this.frontAvailable = this.Frontier();
                //Maze.PrintWhole(maze);
            }
            //List of frontier Cells is now empty
            //Move to random cell and check if it is a path
            this.currentCell = this.NewCurrent();
        }

        return this.maze;
    }



    Frontier() {

        this.available = [0, 0, 0, 0];
        //left check
        if (((this.currentCell[1]) - 2) >= 0 && this.maze[this.currentCell[0]][(this.currentCell[1]) - 2] === 0) {
            this.available[0] = 1;
        } else {
            this.available[0] = 0;
        }
        //up check
        if (((this.currentCell[0]) - 2) >= 0 && this.maze[(this.currentCell[0]) - 2][(this.currentCell[1])] === 0) {
            this.available[1] = 1;
        } else {
            this.available[1] = 0;
        }
        //right check
        if (this.currentCell[1] + 2 < this.maze.length) {
            if (this.maze[this.currentCell[0]][(this.currentCell[1]) + 2] === 0) {
                this.available[2] = 1;
            }
        } else {
            this.available[2] = 0;
        }
        //down check
        if (this.currentCell[0] + 2 < this.maze.length) {
            if (this.maze[this.currentCell[0] + 2][this.currentCell[1]] === 0) {
                this.available[3] = 1;
            }
        } else {
            this.available[3] = 0;
        }

        return this.available;
    }



    NewCurrent() {

        this.found = false
        this.currentCell = [];

        while (this.found === false) {


            this.cellX = Math.floor(Math.random() * (this.maze.length - 3) / 2)
            this.cellX = this.cellX * 2 + 1

            this.cellY = Math.floor(Math.random() * (this.maze.length - 3) / 2)
            this.cellY = this.cellY * 2 + 1

            if (this.maze[this.cellX][this.cellY] === 1) {
                this.currentCell[0] = this.cellX;
                this.currentCell[1] = this.cellY;
                this.found = true
            }
        }
        return this.currentCell;
    }



    MoveSquare() {
        if (this.numSelected === 0) {
            this.maze[this.currentCell[0]][(this.currentCell[1]) - 2] = 1;
            this.maze[this.currentCell[0]][(this.currentCell[1]) - 1] = 1;
            this.currentCell[1] = this.currentCell[1] - 2;
        }
        if (this.numSelected === 1) {
            this.maze[(this.currentCell[0]) - 2][(this.currentCell[1])] = 1;
            this.maze[(this.currentCell[0]) - 1][(this.currentCell[1])] = 1;
            this.currentCell[0] = this.currentCell[0] - 2;
        }
        if (this.numSelected === 2) {
            this.maze[this.currentCell[0]][(this.currentCell[1]) + 2] = 1;
            this.maze[this.currentCell[0]][(this.currentCell[1]) + 1] = 1;
            this.currentCell[1] = this.currentCell[1] + 2;
        }
        if (this.numSelected === 3) {
            this.maze[(this.currentCell[0]) + 2][(this.currentCell[1])] = 1;
            this.maze[(this.currentCell[0]) + 1][(this.currentCell[1])] = 1;
            this.currentCell[0] = this.currentCell[0] + 2;
        }
        return this.maze;
    }



    Complete() {
        let counter = 0;
        //Console.WriteLine(counter);
        for (let i = 0; i < (this.size - 1) / 2; i++) {
            for (let j = 0; j < (this.size - 1) / 2; j++) {
                let X = (2 * i) + 1;
                let Y = (2 * j) + 1;
                if (this.maze[X][Y] === 1) {
                    counter++;
                }
            }
        }
        return counter === (this.size - 1) / 2 * (this.size - 1) / 2;

    }
    display(){
        console.table(this.maze);

    }
}

​

Answer 1

如果您在this.maze上返回构造函数，它将是一个数组，数组没有一个display函数

​

let maze1;

function setup() {
  maze1 = new MazeGen(11);
  maze1.display();
}

class MazeGen {
  constructor(size) {
    this.size = size;
    this.maze = new Array(this.size).fill(1);
    return this;//This is not really need it
  }
  display() {
    console.log("In Display function");
    console.log(this.maze);
  }
}
setup();

​

构造函数属性返回对创建实例对象的对象构造函数的引用。请注意，此属性的值是对函数本身的引用，而不是包含函数名称的字符串。

这里有更多的例子：JavaScript构造函数返回什么？

Answer 2

你是想展示迷宫，还是在网页上显示它的类型？

P5.js没有这样一个叫做.display()的方法。但是，有一个名为.show()的方法，它使元素可见。在普通web JavaScript中，如果要获取或更改显示类型，则需要使用.style.display属性。