javascript - Javascript OOP - 继承和原型设计

Question

我正在尝试在具有继承和原型设计的 Javascript 中使用 OOP。请您看看我的 JSfiddel http://jsfiddle.net/Charissima/daaUK/。最后一个值是问题，谢谢。我无法理解为什么带有raceCar 的函数驱动器没有得到totalDistance，它是每个putTotalDistance 的集合。

        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?');

score 0 · Accepted Answer

试试这个：

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），然后传递参数。

score 0 · Accepted Answer

谢谢，这工作正常，但不幸的是我需要的另一个功能现在坏了。我创建了一个新的 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>'
}

score 0 · Accepted Answer

首先var that = this;是不必要的。在对象上下文this中将始终引用实例。

您也不想在它自己的构造函数中设置对象原型。

如果您想访问一个类的原型，请不要尝试通过实例访问它。

更新小提琴

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();

javascript - Javascript OOP - 继承和原型设计

3 回答 3

Related

Reference