使用原型時的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; 
};