Question

我是Javascript的新手，我正在玩WebGL并在下面的代码中收到错误"texture.image is undefined"。当我使用Firebug调试它时，this.starshipTexture.image正在初始化并且正好加载了图像文件，但是当调用handleLoadedTexture(texture)时，texture参数显示为未定义。

    starship.prototype.initTexture = function () {
        var starshipImage = new Image();
        this.starshipTexture = gl.createTexture();
        this.starshipTexture.image = starshipImage;

        starshipImage.onload = function () {
            handleLoadedTexture(this.starshipTexture)
        }
        starshipImage.src = "starship.gif";
    }

    function handleLoadedTexture(texture) {
        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);

        gl.bindTexture(gl.TEXTURE_2D, texture);

        //CRASHES ON THIS NEXT LINE
        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, texture.image);
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_NEAREST);
        gl.generateMipmap(gl.TEXTURE_2D);

        gl.bindTexture(gl.TEXTURE_2D, null);
    }

感谢您的智慧！

Answer 1

问题在于，“加载”处理程序中的this将不是您所需要的。

相反，在设置处理程序之前将其填充到临时变量中：

var theStarship = this;
starshipImage.onload = function () {
        handleLoadedTexture(theStarship.starshipTexture)
};

Answer 2

要添加Pointy的答案，你可以这样做（利用奇妙的javascript duck typing）：

starshipImage.targetObject = this;
starshipImage.onload = function () {
    handleLoadedTexture(this.targetObject.starshipTexture)
};

Answer 3

Pointy回答的替代方法是使用Function.bind，我发现它更优雅，但做同样的事情，通常是一个选择问题。

starshipImage.onload = handleLoadedTexture.bind(window,  this.starshipTexture);

创建一个“绑定”函数，即一个函数，其中上下文（this，在这种情况下不需要）和函数的参数在调用函数之前设置。

Javascript：为什么“texture”参数未定义？

3 个答案: