Javascript

Question

我的 Javascript 代码抛出此错误："Uncaught TypeError: Cannot read property '0' of undefined"。我一直在搜索这个错误，它似乎总是导致回到一个未定义的变量，但我的代码似乎不是这种情况。当我通过 Chrome 的调试器运行它时，它显示我的所有变量都在引发错误的行上定义。我的class的constructor首先调用参数(64, -0.5, 0.5, -0.5, 0.5)。在 constructor 中，调用 generateTriangles()，它通过将 12675 个浮点值推入 this.vBuffer 来填充它。然后 constructor 调用 diamond_square() 调用 getVertex()。在 getVertex() 的第二行抛出错误。当错误被抛出时，调试器显示 vBuffer 填充了值并且 vid 为 0。它特别用红色下划线 [vid] 并将其链接到错误。无需调用 constructor 中的 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
}

Javascript - 已定义变量因未定义而抛出错误？

Javascript - Defined Variable throws Error for being Undefined?

undefined