Javascript OOP - 繼承和原型

我想在繼承和原型的Javascript中使用OOP。請你看看我的JSFiddel http://jsfiddle.net/Charissima/daaUK/。最後一個值是問題，謝謝。我不明白爲什麼使用raceCar的驅動器沒有得到totalDistance，哪一個set putTotalDistance。Javascript OOP - 繼承和原型

 function Car() { 
      var that = this; 

      this.totalDistance = 0; 

      this.putTotalDistance = function(distance) { 
       that.totalDistance = distance; 
      }; 

      this.getTotalDistance = function() { 
       return this.totalDistance;  
      }; 

      this.drive = function(distance) { 
       that.totalDistance += distance;  
       return that.totalDistance; 
      }; 

      this.privateFunc = function() { 
       return 'car ' + this.totalDistance; 
      }; 
     }; 


     function RaceCar (initialDistance) { 
      var that = this; 

      this.prototype = new Car(); 
      this.drive = function(distance) { 
       return that.prototype.drive(2*distance); 
      }; 

      this.privateFunc = function() { 
       return 'raceCar ' + that.getTotalDistance(); 
      }; 
     }; 


     RaceCar.prototype = new Car(); 

     car = new Car; 
     raceCar = new RaceCar;   


     car.putTotalDistance(200); 
     alert('car totalDistance = ' + car.drive(10) + ' - ok'); 

     raceCar.putTotalDistance(200); 
     alert('raceCar totalDistance before drive = ' + raceCar.getTotalDistance() + ' - ok'); 
     alert('raceCar totalDistance after drive = ' + raceCar.drive(10) + ' Why not 220?');

來源

2013-10-17 Karin Suel

試試這個：

function Car() {  
    this.totalDistance = 0; 
}; 

Car.prototype.putTotalDistance = function(distance) { 
    this.totalDistance = distance; 
}; 

Car.prototype.getTotalDistance = function() { 
    return this.totalDistance;  
}; 

Car.prototype.drive = function(distance) { 
    this.totalDistance += distance;  
    return this.totalDistance; 
}; 


function RaceCar() {}; 
RaceCar.prototype = new Car(); 
RaceCar.prototype.parent = Car.prototype; 
RaceCar.prototype.drive = function(distance) { 
    return this.parent.drive.call(this, (distance * 2)); 
}; 

raceCar = new RaceCar(); 
raceCar.putTotalDistance(200); 

document.body.innerHTML = 'raceCar totalDistance after drive = ' + raceCar.drive(10);

編輯：

正如指出了其他的答案之一，主要的問題是設置prototype的constructor內。相反，分開設置它。在上面的代碼中，我將汽車原型鏈接到賽車原型父級屬性，然後使用調用觸發父級驅動功能，以便將函數的上下文設置爲賽車（通過this），然後將參數傳遞。

來源

2013-10-17 16:06:39 Todd

爲什麼？ *如果它沒有解釋它，那麼嘗試這個*答案是非常不令人滿意的。 – Bart

夠公平的。我會添加一些東西。 – Todd

謝謝你，這工作正常，但不幸的是我需要的另一個功能是現在打破。我創建了一個新的jsfiddle：http://jsfiddle.net/Charissima/5g6GV/

car.putTotalDistance(0);    
raceCar.putTotalDistance(100); 
var drivingFunctions = [car.drive, raceCar.drive]; 

myText += drivingFunctions[0](10) + '<br>'; 
try { 
    myText += drivingFunctions[1](100) + '<br>';     
} 
catch(err) { 
    myText += err + '<br>' 
}

來源

2013-10-18 07:20:33

-1你不在這裏回答你的問題。 –

第一個問題得到解答，這就是我回答的原因，對不起，如果這是錯誤的。 –

然後只是提出一個新問題，不要猶豫，因爲它是相關的，所以在這個問題上建立一個鏈接。要鏈接到您的問題，請點擊標籤下面的「共享」，然後點擊編輯/關閉/標誌旁邊的。答案必須是答案，這就是Stackoverflow的工作方式。 –

首先var that = this;是不必要的。在對象上下文中，this將始終引用該實例。

你也不想在它自己的構造函數中設置對象原型。

如果你想訪問一個類的原型，不要試圖通過實例訪問它。

The update fiddle

function RaceCar (initialDistance) { 
    //var that = this; 
    //this.prototype = new Car(); 

    this.drive = function(distance) { 
     return RaceCar.prototype.drive(2*distance); 
    };   
}; 

// This correctly sets the prototype 
RaceCar.prototype = new Car();

來源

2013-10-18 08:13:46 Bart

Javascript OOP - 繼承和原型

回答

相關問題