Question

所以，我有一个启动画面的构造函数。我使用画布图形（下面的ctx是对canvas元素的2d上下文的引用），但是当我尝试获取上下文的本地副本时，我失去了它。有人知道为什么它会变得不确定吗？（见下文）

function SplashScreen(_ctx)
{
    this.loadScene = function()
    {
        this.img = new Image();
        this.img.onload = this.render;
        this.img.src = 'art/SplashScreen.png';
    };

    this.unloadScene = function()
    {
        delete this.img;
        this.img = null;
        CollectGarbage();
    };

    this.render = function()
    {
        alert(this.ctx);//<--------------undefined
        alert(this.img);//<--------------undefined
        this.ctx.drawImage(this.img,0,0);
    };

    alert(_ctx);    //<--------------properly defined
    this.ctx = _ctx;
    alert(this.ctx);//<--------------properly defined
    return this;
}

这是我调用SplashScreen的地方（注意：以下内容来自main.js，上面是splashscreen.js）：

var ctx;

var scene_Splash;
var currentScene;

function main()
{
  ctx = document.getElementById('canvas').getContext('2d');
  alert(ctx); //<-------fine and defined
  scene_Splash = new SplashScreen(ctx);
  changeScene(scene_Splash, null, null);
}

function changeScene(_newScene, _transition, _time)
{
  currentScene = _newScene;

  currentScene.loadScene();
}

进一步扩展，这是引用这些脚本的index.html文件的一部分：

<html>
 <head>
    <script language="JavaScript" type="text/javascript" src="splashscreen.js"></script>
    <script language="JavaScript" type="text/javascript" src="main.js"></script>
 </head>
 <body onload="main()">
   <canvas id="canvas" width="640" height="960"></canvas>
 </body>
</html>

Answer 1

对我来说很好：

function SplashScreen(_ctx)
{
    this.loadScene = function()
    {
        this.img = new Image();
        this.img.onload = this.render;
        this.img.src = 'art/SplashScreen.png';
    };

    this.unloadScene = function()
    {
        delete this.img;
        this.img = null;
        CollectGarbage();
    };

    this.render = function()
    {
        alert('in render: ' + this.ctx);
    };

    alert(_ctx);    //<--------------properly defined
    this.ctx = _ctx;
    alert(this.ctx);//<--------------properly defined
    return this;
}

var c = new SplashScreen(1);
c.render(); // in render: 1

确保使用new关键字实例化对象。

Answer 2

尝试：

this.img.onload = this.render.bind(this);

Answer 3

将函数绑定到事件处理程序时，会调用它，就好像它是您附加处理程序的元素的属性一样;该函数不知道它曾经是某个其他任意对象的属性。

解决此问题的常用方法是使用一个或多个闭包来捕获您希望在处理事件处理程序期间可用的变量的值。

根据规范，您应该能够使用handleEvent方法而不是函数传递对象。然后以预期的方式调用该方法，即该函数被调用为对象的属性。我知道这目前适用于Firefox，但我不知道它是否适用于其他浏览器。

Answer 4

Esailija发现问题一直困扰着我，其他人也指出了问题，但这是第一次：

@Zahel没有调用它，它将它作为事件监听器添加到图像的onload事件。然后浏览器在图像时调用它加载，设置为图像，没有.img或.ctx 属性明显。 - Esailija

Javascript构造函数似乎正在丢失数据

4 个答案: