Javascript: Why is this instance variable undefined?

Question

I'm new to Javascript and I'm playing around with WebGL and getting the error, "self.starshipVertexPositionBuffer is undefined". It looks like it's crashing (see comment below) when trying to access the itemSize attribute, but it's being initialized (see comment below) before that statement is made, so I don't understand why it's crashing with that error. Your thoughts?

    var starship;
    function initstarship()
    {
        starship = new starship();
        starship.initBuffers();
    }

    function starship()
    {
        this.angle = 0;
        this.speed = 0;
        this.xDir = 0;
        this.yDir = 0;
        this.xPos = 0.0;
        this.yPos = 0.0;
        this.starshipVertexPositionBuffer = null;
        this.starshipVertexTextureCoordBuffer = null;
        this.starshipVertexIndexBuffer = null;
    }

    starship.prototype.updatePosition = function(timeElapsed){
        this.xPos += this.xDir * this.speed;
        this.yPos += this.yDir * this.speed;
    }   

    starship.prototype.initBuffers = function () {
        this.starshipVertexPositionBuffer = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, this.starshipVertexPositionBuffer);
        vertices = [
            -0.15, -0.15,  0.15,
             0.15, -0.15,  0.15,
             0.15,  0.15,  0.15,
            -0.15,  0.15,  0.15,

        ];
        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

        //INITIALIZED HERE
        this.starshipVertexPositionBuffer.itemSize = 3;
        this.starshipVertexPositionBuffer.numItems = 4;

        this.starshipVertexTextureCoordBuffer = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, this.starshipVertexTextureCoordBuffer);
        var textureCoords = [
            0.0, 0.0,
            1.0, 0.0,
            1.0, 1.0,
            0.0, 1.0,

        ];
        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(textureCoords), gl.STATIC_DRAW);
        this.starshipVertexTextureCoordBuffer.itemSize = 2;
        this.starshipVertexTextureCoordBuffer.numItems = 4;

        this.starshipVertexIndexBuffer = gl.createBuffer();
        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.starshipVertexIndexBuffer);
        var starshipVertexIndices = [
            0, 1, 2,      0, 2, 3,    
        ]
        gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(starshipVertexIndices), gl.STATIC_DRAW);
        this.starshipVertexIndexBuffer.itemSize = 1;
        this.starshipVertexIndexBuffer.numItems = 6;
    }

    starship.prototype.draw = function()
    {    
        mvPushMatrix();

        mat4.translate(mvMatrix, [this.xPos, this.yPos, z]);

        mat4.rotate(mvMatrix, degToRad(this.angle), [0, 0, 1]);

        gl.bindBuffer(gl.ARRAY_BUFFER, self.starshipVertexPositionBuffer);

        //CRASHING ON THIS NEXT LINE
        gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, self.starshipVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);  

        gl.bindBuffer(gl.ARRAY_BUFFER, self.starshipVertexTextureCoordBuffer);
        gl.vertexAttribPointer(shaderProgram.textureCoordAttribute, self.starshipVertexTextureCoordBuffer.itemSize, gl.FLOAT, false, 0, 0);

        gl.activeTexture(gl.TEXTURE0);
        gl.bindTexture(gl.TEXTURE_2D, starshipTexture);
        gl.uniform1i(shaderProgram.samplerUniform, 0);

        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, self.starshipVertexIndexBuffer);
        setMatrixUniforms();
        gl.drawElements(gl.TRIANGLES, self.starshipVertexIndexBuffer.numItems, gl.UNSIGNED_SHORT, 0);

        mvPopMatrix();
    }

    function webGLStart() {
        initstarship();
        tick();
    }

Thanks so much for your wisdom!

Answer 1

You don't define self anywhere in that code. You might be confusing it with this.