Javascript StackOverflow错误

Question

我希望能得到一些帮助，找出为什么我的代码会导致堆栈溢出。

有问题的代码：

var ClassCreator = {
    create: function(class_object,ParentClass){
        var created_class = null;


        created_class = function(){        
            if(arguments.length == 0){
                this.constructor();
            }else{
                this.constructor.apply(this,arguments);
            }        
        };

        this._grantInheritance(created_class,ParentClass);
        this._grantMethods(created_class,class_object);    

        return created_class;
    },

    _grantInheritance: function(created_class,ParentClass){
        if(ParentClass){
            created_class.prototype = ParentClass.prototype;
            created_class.prototype.BaseClass = ParentClass;
        }
    },

    _grantMethods: function(created_class,creation_object){
        //If there's no constructor provided, add a default constructor.
        if(!creation_object.constructor){
            creation_object.prototype.constructor = function(){};
        }

        //Add the creation_object's methods to the class we're creating.
        for(var property in creation_object){
            created_class.prototype[property] = creation_object[property];
        }
    }
};

var SuperSuperObject = ClassCreator.create({
    constructor: function(){
        document.write("Hello");
    }
});

var SuperObject = ClassCreator.create({
    constructor: function(){
        this.BaseClass.call(this);

        document.write(" ");
    }
},SuperSuperObject);

var RegularObject = ClassCreator.create({
    constructor: function(){
        this.BaseClass.call(this);

        document.write(" World");
    }
},SuperObject);

var test = new RegularObject();​

据我所知，当我在RegularObjects构造函数中调用this.BaseClass.call时，它会再次尝试调用RegularObjects构造函数，从而导致堆栈溢出。为什么它调用RegularObject的构造函数而不是SuperObject的构造函数，我不知道。有什么想法吗？

---

修改： 我的解决方案，以防将来有人愿意：

var ClassCreator = {
    __PROTOTYPE_CONSTRUCTOR_SIGNAL__:  "1821fe18a870e71b29a6219e076b80bb",

    create: function(class_object,ParentClass){
        var created_class = null;


        created_class = function(){
            var call_class = null;


            if(arguments.length == 1){
                if(arguments[0] == ClassCreator.__PROTOTYPE_CONSTRUCTOR_SIGNAL__){
                    if(this.prototypeConstructor){
                        this.prototypeConstructor();
                    }

                    return;
                }
            }


            if(!this.__construct_stack){
                this.__construct_stack = 0;
            }
            call_class = this;
            for(var counter = 0;counter<this.__construct_stack;counter++){
                call_class = call_class.BaseClass.prototype;
            }
            this.__construct_stack++;


            if(arguments.length == 0){
                call_class.constructor.call(this);
            }else{
                call_class.constructor.apply(this,arguments);
            }


            return this;
        };


        this._grantInheritance(created_class,ParentClass);
        this._grantMethods(created_class,class_object); 

        return created_class;
    },

    _grantInheritance: function(created_class,ParentClass){
        if(ParentClass){
            created_class.prototype = new ParentClass(this.__PROTOTYPE_CONSTRUCTOR_SIGNAL__);
            created_class.prototype.BaseClass = ParentClass;
        }
    },

    _grantMethods: function(created_class,creation_object){
        //If there's no constructor provided, add a default constructor.
        if(!creation_object.constructor){
            creation_object.prototype.constructor = function(){};
        }

        //Add the creation_object's methods to the class we're creating.
        for(var property in creation_object){
            created_class.prototype[property] = creation_object[property];
        }
    }
};

Answer 1

问题

在RegularObject的构造函数中，您将其BaseClass方法的上下文设置为RegularObject。现在，当您进入SuperObject的构造函数时，“ this ”将引用RegularObject（您刚刚来自的同一个对象），然后您将再次调用RegularObject的BaseClass方法（使其与{{1相同）在RegularObject的构造函数中）。而且因为你再次使用相同的对象“调用”BaseClass，你会得到一个stackoverflow /无限循环。

不是最好的解释，但也许一些例子会有所帮助......

示例

这是一个简化的代码块，突出显示正在发生的事情

小提琴：http://jsfiddle.net/GVkDv/1/

this.BaseClass.call(this);

解决方案

要修复它，您需要维护一个上下文对象来引用继承的基类的实例。

示例：

小提琴：http://jsfiddle.net/bboone/GVkDv/6/

var base = function(){
    //"this" now references the object we just came from along with it's methods 
    //and properties. 
    this.BaseClass.call(this); 
}

base.prototype.BaseClass = function(){ alert('made it to the base'); }

var derived = function(){
    alert('About to stackoverflow'); 
    this.BaseClass.call(this);//"call" keeps the context to the object we're on 
}

derived.prototype = new base(); //construct base the first time. 1st Alert.
derived.prototype.BaseClass = base; 

var x = new derived(); ​

我应该指出，有很多记录良好/经过审查的继承模式。

一些例子：

• John Resig - Simple JavaScript Inheritance
• Douglas Crockford - Classical Inheritance in JavaScript