超过了最大调用堆栈大小-没有明显的递归

this.parent.draw.call(this,ctx);

是你的问题。在pip对象上，父对象将是circle.prototype。因此，当您现在调用spot.draw()时，它将调用spot.parent.draw.call(spot)，其中this.parent仍然是circle.prototype…

您需要从circle.prototype.draw显式调用drawableItem.prototype.draw.call(this)。顺便说一句，原型链不应该使用new。

为什么要写这样的代码？它很难理解和调试。当我创建很多类时，我通常使用augment来构建代码。这就是我将如何重写你的代码：

var Point = Object.augment(function () {
    this.constructor = function (x, y) {
        this.x = x;
        this.y = y;
    };
});

使用augment可以干净地创建类。例如，您的drawableItem类可以按如下方式进行重组：

var DrawableItem = Object.augment(function () {
    this.constructor = function () {
        this.size = 0;
        this.lineWidth = 1;
        this.dependencies = [];
        this.center = new Point(0, 0);
    };
    this.changeSize = function (toSize) {
        var fromSize = this.size;
        var ratio = toSize / fromSize;
        this.size = toSize;
        var dependencies = this.dependencies;
        var length = dependencies.length;
        var index = 0;
        while (index < length) {
            var dependency = dependencies[index++];
            dependency.changeSize(dependency.size * ratio);
        }
    };
    this.moveTo = function (x, y) {
        var center = this.center;
        var dx = x - center.x;
        var dy = y - center.y;
        center.x = x;
        center.y = y;
        var dependencies = this.dependencies;
        var length = dependencies.length;
        var index = 0;
        while (index < length) {
            var dependency = dependencies[index++];
            var center = dependency.center;
            dependency.moveTo(center.x + dx, center.y + dy);
        }
    };
    this.draw = function (context) {
        var dependencies = this.dependencies;
        var length = dependencies.length;
        var index = 0;
        while (index < length) dependencies[index++].draw(context);
    };
});

继承也很简单。例如，您可以按如下方式重组circle和pip类：

var Circle = DrawableItem.augment(function (base) {
    this.constructor = function (filled) {
        base.constructor.call(this);
        this.filled = filled;
    };
    this.draw = function (context) {
        var center = this.center;
        var x = center.x;
        var y = center.y;
        context.moveTo(x, y);
        context.beginPath();
        context.arc(x, y, this.size, 0, 2 * Math.PI);
        context.closePath();
        context.lineWidth = this.lineWidth;
        context[this.filled ? "fill" : "stroke"]();
        base.draw.call(this, context);
    };
});
var Pip = Circle.augment(function (base) {
    this.constructor = function () {
        base.constructor.call(this, true);
    };
});

既然你已经创建了所有的类，你终于可以开始绘图了：

window.addEventListener("DOMContentLoaded", function () {
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
    var drawableArea = new DrawableItem;
    var spot = new Pip;
    spot.changeSize(20);
    drawableArea.dependencies.push(spot);
    window.addEventListener("resize", drawScreen, false);
    drawScreen();
    function drawScreen() {
        var width = canvas.width = window.innerWidth;
        var height = canvas.height = window.innerHeight;
        spot.moveTo(width / 2, height / 2);
        drawableArea.draw(context);
    }
}, false);

我们完了。亲自观看演示：http://jsfiddle.net/b5vNk/

我们不仅提高了代码的可读性、可理解性和可维护性，还解决了递归问题。

正如Bergi所提到的，问题在于circle.prototype.draw函数中的语句this.parent.draw.call(this,ctx)。由于spot.parent是circle.prototype，因此this.parent.draw.call(this,ctx)语句等效于circle.prototype.draw.call(this,ctx)。正如您所看到的，circle.prototype.draw函数现在递归地调用自己，直到它超过最大递归深度并抛出错误。

augment库优雅地解决了这个问题。当您扩充类时，不必在每个原型上创建parent属性。augment为您提供了该类的prototype作为参数（我们称之为base）：

var DerivedClass = BaseClass.augment(function (base) {
    console.log(base === BaseClass.prototype); // true
});

base参数应被视为常量。因为它是一个常数，所以上面Circle类中的base.draw.call(this, context)总是等价于DrawableItem.prototype.draw.call(this, context)。因此，您永远不会有不需要的递归。与this.parent不同，base参数总是指向正确的原型。

Bergi的答案是正确的，如果你不想多次硬编码父名称，你可以使用助手函数来设置继承：

function inherits(Child,Parent){
  Child.prototype=Object.create(Parent.prototype);
  Child.parent=Parent.prototype;
  Child.prototype.constructor=Child;
};
function DrawableItem() {
  this.name="DrawableItem";
}
DrawableItem.prototype.changeSize = function(newSize){
  console.log("changeSize from DrawableItem");
  console.log("invoking object is:",this.name);
}
function Circle(isFilledCircle){
    Circle.parent.constructor.call(this);
    this.name="Circle";//override name
}
inherits(Circle,DrawableItem);
Circle.prototype.changeSize = function(newSize){
  Circle.parent.changeSize.call(this);
  console.log("and some more from circle");
};
function Pip(size){
    Pip.parent.constructor.call(this,true);
    this.name="Pip";
}
inherits(Pip,Circle);
var spot = new Pip();
spot.changeSize();

有关Object.create上的polyfill，请查看此处。