Javascript inheritance problem when using prototypes - instances overwritten :(
I'm new to JavaScript programming and I am having a bit of a nightmare with inheritance.  I am writing some code for Appcelerator Titanium and I have a base class called Slide2D that I wish to inherit from.

So I have placed a few functions in Slide2D's prototype.  These are generally not going to be overwritten, but will be called from classes derived from Slide2D.  These functions will also be called from other parts of the program. There are also various eventhandlers used to manage animation in Titanium.  



If I make a couple of these slides in some calling code (using new)

    var s = new Slide2D('slide1', 'background1.png', etc......
    var t = new Slide2D('slide2', 'background2.png', etc......

 all of my prototype methods point to the last Slide2D created, regardless of whether I use s or t.  So 'slide2' will always be displayed, even if I'm using the s variable.

This is driving me mad - any help would be greatly appreciated.


Sorry for the length of the code but here it is:

    function Slide2D(name, backgroundImage, transform, inAnimation, outAnimation)
    {
 	Titanium.API.info('Slide2D - Constructor - ' + name);
	
 	var _self = this;
	
	var _name = name;
 
 	var _backgroundImage = backgroundImage;
 	
 	var _startingTransform = transform;
 	
 	var _slideView = Titanium.UI.createView({
 		backgroundImage: _backgroundImage,
 		transform: transform
 	});

        var _animateInAnimation = Titanium.UI.createAnimation();
	_animateInAnimation.transform = Titanium.UI.create2DMatrix().translate(0,0);
	_animateInAnimation.duration = 750;
	
	var _animateOutAnimation = Titanium.UI.createAnimation();
	_animateOutAnimation.transform = Titanium.UI.create2DMatrix().translate(-1024,0);
	_animateOutAnimation.duration = 750;
	
	var onAnimateInStart = function()
	{
		Titanium.API.info('Slide2D.onAnimateInStart');
		Titanium.App.fireEvent('animateInStart', {slideName: _name});
		
		_animateInAnimation.removeEventListener('start', onAnimateInStart);
	};
	
	var onAnimateOutStart = function()
	{
		Titanium.API.info('Slide2D.onAnimateOutStart');
		Titanium.App.fireEvent('animateOutStart', {slideName: _name});
		
		_animateInAnimation.removeEventListener('start', onAnimateOutStart);
	};

	var onAnimateInComplete = function()
	{
		Titanium.API.info('Slide2D.onAnimateInComplete');
		Titanium.App.fireEvent('animateInComplete', {slideName: _name});
		
		_animateInAnimation.removeEventListener('complete', onAnimateInComplete);
	};
	
	var onAnimateOutComplete = function()
	{
		Titanium.API.info('Slide2D.onAnimateOutComplete');
		Titanium.App.fireEvent('animateOutComplete', {slideName: _name});
		
		_animateOutAnimation.removeEventListener('complete', onAnimateOutComplete);
	};
	
	_animateInAnimation.addEventListener('start', onAnimateInStart);
	_animateOutAnimation.addEventListener('start', onAnimateOutStart);

	_animateInAnimation.addEventListener('complete',onAnimateInComplete);
	_animateOutAnimation.addEventListener('complete', onAnimateOutComplete);
	
	Slide2D.prototype.animateIn = function(){
		Titanium.API.info('Slide2D.prototype.animateIn - ' + _name);
 	
 		_slideView.animate(_animateInAnimation);
 	};
 	
 	Slide2D.prototype.animateOut = function(){
 		Titanium.API.info('Slide2D.prototype.animateOut');
 		
 		_slideView.animate(_animateOutAnimation);
 	};

        Slide2D.prototype.getName = function()
	{
		return _name;
	};
 	
 	Slide2D.prototype.getView = function(){
		Titanium.API.info('Slide2D.prototype.getView');
 		return _slideView;
 	};
 	
 	Slide2D.prototype.getStartingTransform = function(){
 		return _startingTransform;
 	};
   };

 
Javascript inheritance problem when using prototypes - instances overwritten :(
===

I'm new to JavaScript programming and I am having a bit of a nightmare with inheritance.  I am writing some code for Appcelerator Titanium and I have a base class called Slide2D that I wish to inherit from.

So I have placed a few functions in Slide2D's prototype.  These are generally not going to be overwritten, but will be called from classes derived from Slide2D.  These functions will also be called from other parts of the program. There are also various eventhandlers used to manage animation in Titanium.  



If I make a couple of these slides in some calling code (using new)

    var s = new Slide2D('slide1', 'background1.png', etc......
    var t = new Slide2D('slide2', 'background2.png', etc......

 all of my prototype methods point to the last Slide2D created, regardless of whether I use s or t.  So 'slide2' will always be displayed, even if I'm using the s variable.

This is driving me mad - any help would be greatly appreciated.


Sorry for the length of the code but here it is:

    function Slide2D(name, backgroundImage, transform, inAnimation, outAnimation)
    {
 	Titanium.API.info('Slide2D - Constructor - ' + name);
	
 	var _self = this;
	
	var _name = name;
 
 	var _backgroundImage = backgroundImage;
 	
 	var _startingTransform = transform;
 	
 	var _slideView = Titanium.UI.createView({
 		backgroundImage: _backgroundImage,
 		transform: transform
 	});

        var _animateInAnimation = Titanium.UI.createAnimation();
	_animateInAnimation.transform = Titanium.UI.create2DMatrix().translate(0,0);
	_animateInAnimation.duration = 750;
	
	var _animateOutAnimation = Titanium.UI.createAnimation();
	_animateOutAnimation.transform = Titanium.UI.create2DMatrix().translate(-1024,0);
	_animateOutAnimation.duration = 750;
	
	var onAnimateInStart = function()
	{
		Titanium.API.info('Slide2D.onAnimateInStart');
		Titanium.App.fireEvent('animateInStart', {slideName: _name});
		
		_animateInAnimation.removeEventListener('start', onAnimateInStart);
	};
	
	var onAnimateOutStart = function()
	{
		Titanium.API.info('Slide2D.onAnimateOutStart');
		Titanium.App.fireEvent('animateOutStart', {slideName: _name});
		
		_animateInAnimation.removeEventListener('start', onAnimateOutStart);
	};

	var onAnimateInComplete = function()
	{
		Titanium.API.info('Slide2D.onAnimateInComplete');
		Titanium.App.fireEvent('animateInComplete', {slideName: _name});
		
		_animateInAnimation.removeEventListener('complete', onAnimateInComplete);
	};
	
	var onAnimateOutComplete = function()
	{
		Titanium.API.info('Slide2D.onAnimateOutComplete');
		Titanium.App.fireEvent('animateOutComplete', {slideName: _name});
		
		_animateOutAnimation.removeEventListener('complete', onAnimateOutComplete);
	};
	
	_animateInAnimation.addEventListener('start', onAnimateInStart);
	_animateOutAnimation.addEventListener('start', onAnimateOutStart);

	_animateInAnimation.addEventListener('complete',onAnimateInComplete);
	_animateOutAnimation.addEventListener('complete', onAnimateOutComplete);
	
	Slide2D.prototype.animateIn = function(){
		Titanium.API.info('Slide2D.prototype.animateIn - ' + _name);
 	
 		_slideView.animate(_animateInAnimation);
 	};
 	
 	Slide2D.prototype.animateOut = function(){
 		Titanium.API.info('Slide2D.prototype.animateOut');
 		
 		_slideView.animate(_animateOutAnimation);
 	};

        Slide2D.prototype.getName = function()
	{
		return _name;
	};
 	
 	Slide2D.prototype.getView = function(){
		Titanium.API.info('Slide2D.prototype.getView');
 		return _slideView;
 	};
 	
 	Slide2D.prototype.getStartingTransform = function(){
 		return _startingTransform;
 	};
   };

 