ES6 object.method 不是函数

Question

我有一个像这样定义的 ES6 class，它有几个函数：

class Cell{
    constructor(i,j){
        this.i = i;
        this.j = j;
        this.alive = false;
        this.survives = false; //Made so not to change alive variabe mid-loop, also controls birthing of new cells
}

    update(grid){
       //Decide if this.survives is true or not
    }

    render(size){
        //Draw's a rectangle in the cell's location in a color based on this.alive
    }
}

还有一个 main.js 文件：

const h = 800; //Height
const w = 800; //Width
const s = 80;  //Size of squares
const rows = Math.floor(h / s);
const cols = Math.floor(w / s);
let cells = new Array(cols);
let isActive = false;


//A p5 function that is called once when the page is sketch is loaded
function setup() {
createCanvas(w, h);
for(let i = 0; i < cols; i++){
    cells[i] = new Array(rows);
    for(let j = 0; j < rows; j++){
        cells[i][j] = new Cell(i, j);
    }
}
}


//A p5 function that is called every frame
function draw() {
for(i = 0; i < cols; i++){
    for(j = 0; j < rows; j++){
        if(isActive === true){
            cells[i][j].update(cells);
            if(cells[i][j].survives){
                cells[i][j] = true;
            }else{
                cells[i][j] = false;
            }
        }
        cells[i][j].render(s);
    }
}
}

当我打开网页时，一切都正常呈现，但是当我通过 chrome 控制台将 isActive 设置为 true 时，我收到以下错误消息：

未捕获类型错误：cells[i][j].render 不是函数

我确保在 index.html 中添加对所有内容的引用，我没有对 require() 做任何花哨的事情。都是脚本标签

Answer 1

可能是因为在它的正上方有：

if(cells[i][j].survives){
        cells[i][j] = true;  // <--- Overwriting the cell!
}else{
        cells[i][j] = false; // <--- Overwriting the cell!
}

您正在用布尔值覆盖您的单元格，而布尔值没有 render 方法。

也许你的意思是？：

if(cells[i][j].survives){
        cells[i][j].alive = true;
}else{
        cells[i][j].alive = false;
}

虽然应该注意，这实际上应该写成：

cells[i][j].alive = cells[i][j].survives;

ES6 object.method 不是函数

ES6 object.method is not a function

javascript

oop

ecmascript-6

es6-class

p5.js