JavaScript的構造函數似乎正在丟失數據

所以，我有一個啓動畫面的構造函數。我正在使用畫布圖形（下面的ctx是對canvas元素的2D上下文的引用），但是當我嘗試獲取丟失上下文的本地副本時似乎是這樣。是否有人有一個想法，爲什麼它是不確定的如果它確實（見下文）JavaScript的構造函數似乎正在丟失數據

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; 
}

這裏是我打電話閃屏（注：以下是main.js，和上面的是在啓動畫面。 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>

來源

2012-06-08 ZachLHelms

你似乎對JS的'this'工作做了一些不正確的假設。首先要知道的是，'this'與變量範圍無關，與繼承無關。它完全與*如何調用特定函數有關。 – 2012-06-08 19:46:15

您應該查看構造函數的原型屬性，該構造函數是定義您的方法的地方。現在，您還可以使用返回啞對象字面值的常規函數。 – Esailija

......換句話說，你應該顯示*你是如何調用'SplashScreen'以及本地定義的方法，因爲這樣做會有所不同。 – 2012-06-08 19:52:21

嘗試：

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

來源

2012-06-08 20:22:02 Esailija

正常工作對我來說：

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關鍵字實例化對象。

來源

2012-06-08 19:48:25 Sarfraz

好吧，我發佈的上面的代碼是它自己的js文件，它是從另一個js文件訪問的，我使用new關鍵字，但它仍然是我未定義的。 – ZachLHelms

當你將一個函數綁定到一個事件處理程序時，它會被調用，就好像它是你附加處理程序的元素的屬性;該函數不知道它曾經是其他任意對象的屬性。

解決此問題的常用方法是使用一個或多個閉包捕獲要在處理事件處理程序期間可用的變量的值。

根據規範，您應該能夠傳遞一個handleEvent方法而不是函數的對象。然後以預期的方式調用該方法，即該函數作爲對象的屬性被調用。我知道這是目前在Firefox中的作品，但我不知道它是否適用於其他瀏覽器。

來源

2012-06-08 20:16:33 Neil

Esailija發現，已經搞亂了我的問題，其他人已經指出了這一點爲好，但這是第一次：這不是調用它

@Zahel ，它將它作爲事件監聽器添加到圖像的onload事件中。當圖像被加載時，瀏覽器隨後調用它，將此設置爲圖像，該圖像顯然不具有.img或.ctx 屬性。 - Esailija

來源

2012-06-08 20:39:24 ZachLHelms

JavaScript的構造函數似乎正在丟失數據

回答

相關問題