如何在不覆盖原型的情况下改变其方法？

Question

我需要执行以下操作：

function Shape (width, height) {
    var self = this;
    self.width = width;
    self.height = height;
    self.calculateSurface = function () {
        return (self.width * self.height);
    };
};

function Circle (radius) {
    //make sure width == height == radius.

};

Circle.prototype = new Shape;
Circle.prototype.constructor = Circle();

function Triangle (base, height) {
    var self = this;
    Shape.apply(self, arguments);
};

Triangle.prototype = new Shape;
Triangle.prototype.constructor = Triangle();

var circle = new Circle(5);
var triangle = new Triangle(5, 8);

alert(circle.calculateSurface());
alert(triangle.calculateSurface());

对基本原型方法的两次调用都必须返回调用者的区域，但不能覆盖该方法。

如何使它返回（宽度*高度）/ 2（三角形）和（半径*半径）* pi返回圆而不覆盖它？

感谢您的宝贵时间！

编辑：

var output = document.getElementById('output');

function Shape(width, height) {
    var self = this;

    self.width = width;
    self.height = height;
};

Shape.prototype.calculateSurface = function () {
    return (this.width * this.height);
};

function Rectangle(width, height) {
    Shape.apply(this, arguments);
};
Rectangle.prototype = new Shape;
Rectangle.prototype.constructor = Rectangle;

function Triangle(base, height) {
    Shape.apply(this, arguments);
};
Triangle.prototype = new Shape;
Triangle.prototype.constructor = Triangle;

Triangle.prototype.calculateSurface = function () {
    return ((this.width * this.height) / 2);
};

function Circle(radius) {
    Shape.apply(this, arguments);
};
Circle.prototype = new Shape;
Circle.prototype.constructor = Circle;

Circle.prototype.calculateSurface = function () {
    return((this.width * this.width) * Math.PI);
};

// testing
var outputStr = "";
var outputArr = [];

for (var i = 0; i < 30; i++) {
    var rectangle = new Rectangle(i + 1, i + 2);
    var triangle = new Triangle(i + 1, i + 2);
    var circle = new Circle(i + 1);
    outputArr[i] = rectangle;
    outputStr += "Rectangle width: <b>" + rectangle.width + "</b> height: <b>" + rectangle.height + "</b> area: <b>" + rectangle.calculateSurface() + "</b><br />";
    outputArr[i + 1] = triangle;
    outputStr += "Triangle base: <b>" + triangle.width + "</b> height: <b>" + triangle.height + "</b> area: <b>" + triangle.calculateSurface() + "</b><br />";
    outputArr[i + 2] = circle;
    outputStr += "Circle radius: <b>" + rectangle.width + "</b> area: <b>" + circle.calculateSurface() + "</b><br /><br />";
};

output.innerHTML = outputStr;

它工作正常，我希望我理解正确。 再次感谢！

Answer 1

首先，您不应该在实例上定义自定义类型（也称为“类”）的方法（ calculateSurface ），因此，不要：

self.calculateSurface = function () {
    return (self.width * self.height);
};

但：

Shape.prototype.calculateSurface = function () {
    return (this.width * this.height);
};

然后，您需要隐藏原型链中较高的属性。 因此，查找将首先使用它找到的第一个属性，查看Triangle.prototype ，然后再查看Shape.prototype 。

Triangle.prototype = new Shape;
// Note that you don't need to put parens after Triangle.
// You only set property to point at constructor function itself,
// not to the value constructor returns when invoked. (Also, constructor 
// should be invoked with `new` operator, not just with parens).
Triangle.prototype.constructor = Triangle; 
// now shadowing Shape.prototype.calculateSurface
Triangle.prototype.calculateSurface = function () { 
  // custom code here
}

Circle 。