使用原型时的Javascript继承问题 - 覆盖实例:(

Question

我是JavaScript新手，我有一点继承性的恶梦，我正在为Appcelerator Titanium编写一些代码，我有一个名为Slide2D的基类，我希望继承

因此，我在Slide2D的原型中放置了一些函数，这些函数通常不会被覆盖，但会从派生自Slide2D的类中调用，这些函数也会从其他部分调用该程序还有各种事件处理程序用于管理Titanium中的动画

如果我在某些调用代码中使用这些幻灯片（使用新的）

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

所有我的原型方法指向创建的最后一个Slide2D，无论我使用s还是t。因此即使我使用s变量，'slide2'也会一直显示。

这让我生气 - 任何帮助将不胜感激。

很抱歉的代码长度，但在这里它是：

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

编辑

非常感谢您的及时答复。我已经做出了您推荐的更改，并已解决该特定问题。

但是，引入了一个新问题。

我需要从派生类 - ExtendedSlide2D调用Slide2D.prototype.getView。

不过，现在我得到以下错误：

Result of expression 'Slide2D.prototype.getView()' [undefined] is not an object 
    at ExtendedSlide2D.js at line ....... 

这是我添加按钮的基类的视图对象。

我敢肯定，这个错误只是归结为我对语言的经验不足，但再一次，任何帮助将不胜感激。

再次 - 这里是ExtendedSlide2D代码：

Titanium.include('Slide2D.js'); 



function ExtendedSlide2D(name, backgroundImage, transform, inAnimation, outAnimation) 
{ 

Titanium.API.info('ExtendedSlide2D - Constructor'); 


this.base = new Slide2D(name, 
          backgroundImage, 
          transform, 
          inAnimation,  
          outAnimation); 



ExtendedSlide2D.prototype.constructor = ExtendedSlide2D; 



var button = Titanium.UI.createButton({title: 'AnimateOut', 
              height: 40, 
              width: 200, 
              top: 50 

}); 

button.addEventListener('click', function() 

{ 
    Slide2D.prototype.animateOut(); 

}); 


Slide2D.prototype.getView().add(button); 
} 



ExtendedSlide2D.prototype = new Slide2D(); 

Answer 1

你需要移动自己添加到原型Slide2D构造函数之外的方法。这样他们只会被定义一次而不是每个对象实例化。

然后对于那些访问“内部”的原型函数，例如_name，_slideView等等......您需要将所有“vars”（当前可在闭包中访问）转换为对象本身的属性。然后用“this”引用所有这些成员属性。字首。

下面，我强制将所有“vars”替换为this.properties。只有您需要从原型方法访问的属性和功能需要这种转换。对于内部函数（比如你的动画函数），他们仍然可以使用关闭下的变量。

function Slide2D(name, backgroundImage, transform, inAnimation, outAnimation) { 

    Titanium.API.info('Slide2D - Constructor - ' + name); 

    _self = this; 

    this._name = name; 

    this._backgroundImage = backgroundImage; 

    this._startingTransform = transform; 

    this._slideView = Titanium.UI.createView({ 
     backgroundImage: this._backgroundImage, 
     transform: transform 
    }); 

    this._animateInAnimation = Titanium.UI.createAnimation(); 
    this._animateInAnimation.transform = Titanium.UI.create2DMatrix().translate(0, 0); 
    this._animateInAnimation.duration = 750; 

    /// ... 

}; 

Slide2D.prototype.animateIn = function() { 
    Titanium.API.info('Slide2D.prototype.animateIn - ' + this._name); 

    this._slideView.animate(this._animateInAnimation); 
}; 

Slide2D.prototype.animateOut = function() { 
    Titanium.API.info('Slide2D.prototype.animateOut'); 

    this._slideView.animate(this._animateOutAnimation); 
}; 

Slide2D.prototype.getName = function() { 
    this._name; 
}; 

Slide2D.prototype.getView = function() { 
    Titanium.API.info('Slide2D.prototype.getView'); 
    this._slideView; 
}; 

Slide2D.prototype.getStartingTransform = function() { 
    this._startingTransform; 
};