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

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

javascript canvas

Javascript构造函数似乎正在丢失数据,javascript,canvas,constructor,Javascript,Canvas,Constructor,所以，我有一个用于启动屏幕的构造函数。我使用的是canvas图形（下面的ctx是对canvas元素的2d上下文的引用），但当我尝试获取上下文的本地副本时，似乎丢失了它。有人知道为什么它在哪里变得不明确吗？（见下文）功能飞溅屏幕（_ctx） { this.loadScene=函数（） { this.img=新图像（）； this.img.onload=this.render； this.img.src='art/SplashScreen.png'； }; this.unloadScene=函数（

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

功能飞溅屏幕（_ctx）
{
this.loadScene=函数（）
{
this.img=新图像（）；
this.img.onload=this.render；
this.img.src='art/SplashScreen.png'；
};
this.unloadScene=函数（）
{
删除此.img；
this.img=null；
收集垃圾（）；
};
this.render=函数（）
{
警报（this.ctx）；//对我来说很好：
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

功能飞溅屏幕（_ctx）
{
this.loadScene=函数（）
{
this.img=新图像（）；
this.img.onload=this.render；
this.img.src='art/SplashScreen.png'；
};
this.unloadScene=函数（）
{
删除此.img；
this.img=null；
收集垃圾（）；
};
this.render=函数（）
{
警报（'in render:'+this.ctx）；
};
alert（_ctx）；//当您将函数绑定到事件处理程序时，它会被调用，就好像它是附加了处理程序的元素的属性一样；该函数不知道它曾经是其他任意对象的属性
解决此问题的通常方法是使用一个或多个闭包来捕获您希望在处理事件处理程序期间可用的变量的值
根据规范，您应该能够使用handleEvent方法而不是函数来传递对象。然后以预期的方式调用此方法，即将函数作为对象的属性调用。我知道这目前在Firefox中有效，但我不知道它是否在其他浏览器中有效。
尝试：
this.img.onload = this.render.bind(this);

Esailija发现了困扰我的问题，其他人也指出了，但这是第一个：
@Zahel没有调用它，而是将它作为事件侦听器添加到
图像的onload事件。当图像被加载时，浏览器会调用它
已加载，将此设置为图像，该图像没有.img或.ctx
很明显，这是一种特性
您似乎对JS中的这个
的工作方式做出了一些错误的假设。首先要知道的是这个
与变量范围无关，与继承关系不大。它完全与调用特定函数的方式有关。您应该研究构造函数的原型属性，我这是定义方法的地方。现在，您还可以使用一个返回哑对象文本的常规函数……换句话说，您应该显示如何调用SplashScreen
以及本地定义的方法，因为这会产生很大的不同。在帖子中添加了一些关于y在哪里调用的信息ou.你是如何调用render方法的？好吧，我发布的上面的代码是它自己的js文件，它是从另一个js文件访问的，我确实使用了新的关键字，但它对我来说仍然是未定义的。
<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>

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

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