Конструктор Javascript, кажется, теряет данные

Итак, у меня есть конструктор для заставки. Я использую холст-графику (ctx ниже - ссылка на 2d-контекст элемента canvas), но кажется, когда я пытаюсь получить локальную копию контекста, который я потерял. Кто-то имеет представление о том, почему он становится неопределенным, где он (см ниже)Конструктор 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; 
}

Вот где я звоню 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>

источник

2012-06-08 ZachLHelms

Вы, кажется, делаете некоторые неправильные предположения о том, как 'this' работает в JS. Первое, что нужно знать, - это то, что «это» не имеет ничего общего с областью переменных и мало связано с наследованием. Это целиком связано с * как * вызывается конкретная функция. –

Вы должны заглянуть в свойство prototype конструктора, который является местом для определения ваших методов. Так же, как и сейчас, вы можете использовать регулярную функцию, которая возвращает литерал немого объекта. – Esailija

... Другими словами, вы должны показать * how *, что вы вызываете 'SplashScreen', а также локально определенные методы, поскольку это имеет значение. –

Try:

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-файла, я использую новое ключевое слово, но оно по-прежнему не определено для меня. – ZachLHelms

Когда вы привязываете функцию к обработчику событий, она вызывается так, как если бы она была свойством элемента, к которому вы привязывали обработчик; функция не знает, что она была свойством какого-либо другого произвольного объекта.

Обычный способ работы с этим заключается в использовании одного или нескольких замыканий для захвата значений переменных (переменных), которые вы хотите получить во время обработки обработчика событий.

В соответствии со спецификацией вы должны иметь возможность передавать объект с помощью метода handleEvent, а не из функции. Затем этот метод вызывается ожидаемым образом, то есть функция вызывается как свойство объекта. Я знаю, что это работает в Firefox, но я не знаю, работает ли он в других браузерах.

источник

2012-06-08 20:16:33 Neil

Esailija нашел проблему, которая была баловаться меня, другие указали на это, как хорошо, но это был первый:

@Zahel, что не вызывая его , он добавляет его в качестве прослушивателя событий в событие onload для изображения. Затем браузер вызывает его при загрузке изображения , с этим набором изображений, которое не имеет .img или .ctx свойств. - Esailija

источник

2012-06-08 20:39:24 ZachLHelms

Конструктор Javascript, кажется, теряет данные

ответ

Смежные вопросы