最大调用堆栈大小超过 - 没有明显递归 [英] maximum call stack size exceeded - no apparent recursion

问题描述

我花了大约12个小时浏览这段代码，并且试图找出有递归问题，因为我得到，最大调用堆栈大小超过错误，并没有找到了。有人比我更聪明可以帮助我！

到目前为止，我发现，当我做对象， spot ， circle ，对象，问题消失，但是当我使它，'pip'，我得到这个堆栈溢出错误。我已经经历了一个friggin显微镜的pip类，仍然不知道为什么会发生！

  var canvas = document.getElementById（'myCanvas'）; 
 
 // ---------------------------------------- --------------------------------------------- 
 / / Classes 
 // ------------------------------------------ ------------------------------------------- 
 // = ==================================================== ================================ 
 // CLASS  -  point 
 function point（ x，y）{
 this.x = x; 
 this.y = y; 
} 
 // =================================== ======================================== 
 // CLASS  -  drawableItem 
 function drawableItem（）{
 var size = 0; 
 this.center = new point（0,0）; 
 this.lineWidth = 1; 
 this.dependentDrawableItems = new Array（）; 
} 
 //返回大小
 drawableItem.prototype.getSize = function getSize（）{
 return this.size; 
} 
 //改变这个项目的大小和所有依赖项的相对大小
 drawableItem.prototype.changeSize = function（newSize）{
 var relativeItemSizes = new Array; 
 relativeItemSizes.length = this.dependentDrawableItems.length; 
 //获取所有依赖项的相对大小
 for（var i = 0; i  relativeItemSizes [i] = this.dependentDrawableItems [ i] .getSize（）/ this.size; 
} 
 //改变大小
 this.size = newSize; 
 //将变化率应用于所有依赖项
 for（var i = 0; i< relativeItemSizes.length; i ++）{
 this.dependentDrawableItems [i] .changeSize relativeItemSizes [i] * newSize）; 
} 
} 
 //将所有顶点和每个依赖项移动到基于中心的绝对点
 drawableItem.prototype.moveTo = function（moveX，moveY）{
 //记录相对坐标
 var relativeItems = new Array; 
 relativeItems.length = this.dependentDrawableItems.length; 
 for（var i = 0; i< relativeItems.length; i ++）{
 relativeItems [i] = new point; 
 relativeItems [i] .x = this.dependentDrawableItems [i] .center.x  -  this.center.x; 
 relativeItems [i] .y = this.dependentDrawableItems [i] .center.y  -  this.center.y; 
} 
 //移动中心
 this.center.x = moveX; 
 this.center.y = moveY; 
 //移动所有相对于中心的项
 for（var i = 0; i< relativeItems.length; i ++）{
 this.dependentDrawableItems [i] .moveItemTo（this。 center.x + relativeItems [i] .x，
 this.center.y + relativeItems [i] .y）; 
} 
} 
 //绘制dependentDrawableItems中的每个对象
 drawableItem.prototype.draw = function（ctx）{
 for（var i = 0; i< this.dependentDrawableItems.length; i ++）{
 this.dependentDrawableItems [i] .draw（ctx）; 
} 
} 
 
 // ============================== ==================================================== ===== 
 // CLASS  -  circle 
 function circle（isFilledCircle）{
 drawableItem.call（this）; 
 this.isFilled = isFilledCircle 
} 
 circle.prototype = new drawableItem（）; 
 circle.prototype.parent = drawableItem.prototype; 
 circle.prototype.constructor = circle; 
 circle.prototype.draw = function（ctx）{
 ctx.moveTo（this.center.x，this.center.y）; 
 ctx.beginPath（）; 
 ctx.arc（this.center.x，this.center.y，this.size，0，2 * Math.PI）; 
 ctx.closePath（）; 
 ctx.lineWidth = this.lineWidth; 
 ctx.strokeStyle = this.outlineColor; 
 if（this.isFilled === true）{
 ctx.fill（）; 
} else {
 ctx.stroke（）; 
} 
 this.parent.draw.call（this，ctx）; 
} 
 
 // =================================== ==================================================== 
 // CLASS  -  pip 
 function pip（size）{
 circle.call（this，true）; 
} 
 pip.prototype = new circle（false）; 
 pip.prototype.parent = circle.prototype; 
 pip.prototype.constructor = pip; 
 
 // ---------------------------------------- ------------------------------ 
 //对象/变量 - 顶层是最后一个（除了可绘区域是第一个）
 // ------------------------------------------- --------------------------- 
 var drawableArea = new drawableItem（）; 
 
 var spot = new pip（）; 
 spot.changeSize（20）; 
 drawableArea.dependentDrawableItems [drawableArea.dependentDrawableItems.length] = spot; 
 
 // ---------------------------------------- -  
 //绘制循环
 // ---------------------------------- -------- 
 function drawScreen（）{
 var context = canvas.getContext（'2d'）; 
 context.canvas.width = window.innerWidth; 
 context.canvas.height = window.innerHeight; 
 
 spot.moveTo（context.canvas.width / 2，context.canvas.height / 2）; 
 
 drawableArea.draw（context）; 
} 
 
 window.addEventListener（'resize'，drawScreen）; 
  

这里是演示： http://jsfiddle.net/DSU8w/

解决方案

  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） 。 Btw，您应该不要使用 new 作为原型链。 / p>

I've spent about 12 hours looking through this code, and fiddling with it, trying to find out where there's a recursion problem because I'm getting the, "maximum call stack size exceeded," error, and haven't found it. Someone smarter than me please help me!

so far, all I found was that when I make the object, spot, a circle, object, the problem disappears, but when I make it a, 'pip', I get this stack overflow error. I've gone over the pip class with a friggin' microscope, and still have no idea why this is happening!

var canvas = document.getElementById('myCanvas');

//-------------------------------------------------------------------------------------
// Classes
//-------------------------------------------------------------------------------------
//=====================================================================================
//CLASS - point
function point(x,y){
    this.x = x;
    this.y = y;
}
//=====================================================================================
// CLASS - drawableItem
function drawableItem() {
    var size = 0;
    this.center = new point(0,0);
    this.lineWidth = 1;
    this.dependentDrawableItems = new Array();
}
//returns the size
drawableItem.prototype.getSize = function getSize(){
    return this.size;
}
// changes the size of this item and the relative size of all dependents
drawableItem.prototype.changeSize = function(newSize){
    var relativeItemSizes = new Array;
    relativeItemSizes.length = this.dependentDrawableItems.length;
    // get the relative size of all dependent items
    for (var i = 0; i < this.dependentDrawableItems.length; i++){
        relativeItemSizes[i] = this.dependentDrawableItems[i].getSize() / this.size;
    }
    // change the size
    this.size = newSize;
    // apply the ratio of change back to all dependent items
    for (var i = 0; i < relativeItemSizes.length; i++){
        this.dependentDrawableItems[i].changeSize(relativeItemSizes[i] * newSize);
    }
}
//moves all the vertices and every dependent to an absolute point based on center
drawableItem.prototype.moveTo = function(moveX,moveY){
    //record relative coordinates
    var relativeItems = new Array;
    relativeItems.length = this.dependentDrawableItems.length;
    for (var i = 0; i < relativeItems.length; i++){
        relativeItems[i] = new point;
        relativeItems[i].x = this.dependentDrawableItems[i].center.x - this.center.x;
        relativeItems[i].y = this.dependentDrawableItems[i].center.y - this.center.y;
    }
    //move the center
    this.center.x = moveX;
    this.center.y = moveY;
    //move all the items relative to the center
    for (var i = 0; i < relativeItems.length; i++){
        this.dependentDrawableItems[i].moveItemTo(this.center.x + relativeItems[i].x,
            this.center.y + relativeItems[i].y);
    }
}
// draws every object in dependentDrawableItems
drawableItem.prototype.draw = function(ctx){
    for (var i = 0; i < this.dependentDrawableItems.length; i++) {
        this.dependentDrawableItems[i].draw(ctx);
    }
}

//=====================================================================================
//CLASS - circle
function circle(isFilledCircle){
    drawableItem.call(this);
    this.isFilled = isFilledCircle
}
circle.prototype = new drawableItem();
circle.prototype.parent = drawableItem.prototype;
circle.prototype.constructor = circle;
circle.prototype.draw = function(ctx){
    ctx.moveTo(this.center.x,this.center.y);
    ctx.beginPath();
    ctx.arc(this.center.x, this.center.y, this.size, 0, 2*Math.PI);
    ctx.closePath();
    ctx.lineWidth = this.lineWidth;
    ctx.strokeStyle = this.outlineColor;
    if (this.isFilled === true){
        ctx.fill();
    }else {
        ctx.stroke();
    }
    this.parent.draw.call(this,ctx);
}

//=====================================================================================
//CLASS - pip
function pip(size){
    circle.call(this,true);
}
pip.prototype = new circle(false);
pip.prototype.parent = circle.prototype;
pip.prototype.constructor = pip;

//----------------------------------------------------------------------
// Objects/variables - top layer is last (except drawable area is first)
//----------------------------------------------------------------------
var drawableArea = new drawableItem();

var spot = new pip();
spot.changeSize(20);
drawableArea.dependentDrawableItems[drawableArea.dependentDrawableItems.length] = spot;

//------------------------------------------
// Draw loop
//------------------------------------------
function drawScreen() {
    var context = canvas.getContext('2d');
    context.canvas.width  = window.innerWidth;
    context.canvas.height = window.innerHeight;

    spot.moveTo(context.canvas.width/2, context.canvas.height/2);

    drawableArea.draw(context);
}

window.addEventListener('resize', drawScreen);

Here's the demo: http://jsfiddle.net/DSU8w/

解决方案

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

is your problem. On a pip object, the parent will be circle.prototype. So when you now call spot.draw(), it will call spot.parent.draw.call(spot), where this.parent is still the circle.prototype…

You will need to explicitly invoke drawableItem.prototype.draw.call(this) from circle.prototype.draw. Btw, you should not use new for the prototype chain.

这篇关于最大调用堆栈大小超过 - 没有明显递归的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！