Javascript - 定义的变量因未定义而引发错误？

Question

我的 Javascript 代码抛出此错误:“未捕获类型错误:无法读取未定义的属性‘0’”。我一直在搜索这个错误，它似乎总是导致返回一个 undefined variable ，但我的代码似乎并非如此。当我通过 Chrome 的调试器运行它时，它显示我的所有变量都是在引发错误的行上定义的。首先使用参数 (64, -0.5, 0.5, -0.5, 0.5) 调用我的类的构造函数。在构造函数中，调用generateTriangles()，它通过向this.vBuffer推送12675个浮点值来填充它。然后构造函数调用diamond_square()，后者又调用getVertex()。该错误在 getVertex() 的第二行引发。引发错误时，调试器显示 vBuffer 已填充值且 vid 为 0。它特别用红色下划线 [vid] 并链接它的错误。此代码可以完美运行，无需在构造函数中调用diamond_square()。相关代码如下:

/** Class implementing 3D terrain. */
class Terrain{   
/**
 * Initialize members of a Terrain object
 * @param {number} div Number of triangles along x axis and y axis
 * @param {number} minX Minimum X coordinate value
 * @param {number} maxX Maximum X coordinate value
 * @param {number} minY Minimum Y coordinate value
 * @param {number} maxY Maximum Y coordinate value
 */
    constructor(div,minX,maxX,minY,maxY){
        this.div = div;
        this.minX=minX;
        this.minY=minY;
        this.maxX=maxX;
        this.maxY=maxY;

        // Allocate vertex array
        this.vBuffer = [];
        // Allocate triangle array
        this.fBuffer = [];
        // Allocate normal array
        this.nBuffer = [];
        // Allocate array for edges so we can draw wireframe
        this.eBuffer = [];
        console.log("Terrain: Allocated buffers");

        this.generateTriangles();
        console.log("Terrain: Generated triangles");

        this.diamond_square();
        console.log("Terrain: Performed Diamond-Square");

        this.generateLines();
        console.log("Terrain: Generated lines");

        // Get extension for 4 byte integer indices for drwElements
        var ext = gl.getExtension('OES_element_index_uint');
        if (ext ==null){
            alert("OES_element_index_uint is unsupported by your browser and terrain generation cannot proceed.");
        }
    }

    /**
    * Set the x,y,z coords of a vertex at location(i,j)
    * @param {Object} v an an array of length 3 holding x,y,z coordinates
    * @param {number} i the ith row of vertices
    * @param {number} j the jth column of vertices
    */
    setVertex(v,i,j)
    {
        var vid = 3*(i*(this.div+1) + j);
        this.vbuffer[vid] = v[0];
        this.vbuffer[vid+1] = v[1];
        this.vbuffer[vid+2] = v[2];
    }

    /**
    * Return the x,y,z coordinates of a vertex at location (i,j)
    * @param {Object} v an an array of length 3 holding x,y,z coordinates
    * @param {number} i the ith row of vertices
    * @param {number} j the jth column of vertices
    */
    getVertex(v,i,j)
    {
        var vid = 3*(i*(this.div+1) + j);
        v[0] = this.vbuffer[vid];
        v[1] = this.vbuffer[vid+1];
        v[2] = this.vbuffer[vid+2];
    }

    /**
     * Fill the vertex and buffer arrays 
     */    
    generateTriangles()
    {
        var x_amount = (this.maxX - this.minX) / this.div;
        var y_amount = (this.maxY - this.minY) / this.div;

        for (var i = 0; i <= this.div; i++) {
            for (var j = 0; j <= this.div; j++) {
                this.vBuffer.push(j*x_amount + this.minX);
                this.vBuffer.push(this.minY + i*y_amount);
                this.vBuffer.push(0);

                this.nBuffer.push(0);
                this.nBuffer.push(0);
                this.nBuffer.push(1);
            }
        }

        for (var i = 0; i < this.div; i++) {
            for (var j = 0; j < this.div; j++) {

                var vid = i*(this.div+1) + j;

                this.fBuffer.push(vid);
                this.fBuffer.push(vid + this.div+1);
                this.fBuffer.push(vid + this.div+2);

                this.fBuffer.push(vid);
                this.fBuffer.push(vid+1);
                this.fBuffer.push(vid + this.div+2);
            }
        }

        this.numVertices = this.vBuffer.length/3;
        this.numFaces = this.fBuffer.length/3;
    }

    diamond_square()
    {
        // initialize corners to 0
        var init_value = 0;
        var max = this.div;
        var v = [0.0, 0.0, 0.0];
        // top-left corner
        this.getVertex(v, 0, 0);
        v[2] = init_value;
        this.setVertex(v, 0, 0);
        // bottom-left corner
        this.getVertex(v, 0, max);
        v[2] = init_value;
        this.setVertex(v, 0, max);
        // top-right corner
        this.getVertex(v, max, 0);
        v[2] = init_value;
        this.setVertex(v, max, 0);
        // bottom-right corner
        this.getVertex(v, max, max);
        v[2] = init_value;
        this.setVertex(v, max, max);
        // perform diamond-square recursively on the rest of the vertices
        this.subsection(max);
    }
}

Answer 1

在 getVertex 和 setVertex 函数中，您拼错了 this.vBuffer，而是使用了 this.vbuffer这实际上是未定义的，即抛出异常

getVertex(v,i,j) {
  var vid = 3*(i*(this.div+1) + j);
  v[0] = this.vbuffer[vid];  //should be this.vBuffer
  v[1] = this.vbuffer[vid+1]; //should be this.vBuffer
  v[2] = this.vbuffer[vid+2]; //should be this.vBuffer
}

setVertex(v,i,j) {
  var vid = 3*(i*(this.div+1) + j);
  this.vbuffer[vid] = v[0]; //should be this.vBuffer
  this.vbuffer[vid+1] = v[1]; //should be this.vBuffer
  this.vbuffer[vid+2] = v[2]; //should be this.vBuffer
}