How to solve the Maximum call stack size exceeded issue in JavaScript Code

问题

As shown below I am using knockout. I have multiple view models which I am combining and passing through to the controller . The problem is that when I run the application, upon clicking F12 to check for errors while the browser is open I came across this small issue:

Uncaught RangeError: Maximum call stack size exceeded

function FullEmployeeProfile ()
{
    var EmployeeEdu = new employeeEducation();
    var EmployeeHist =  new employeeEducation();
    var EmpInfo = new employeeEducation();  

}
function employeeInfo() {
    var ei = this;

     var ei = this;
        ei.Name = ko.observable("");
        ei.ID = ko.observable("");
        ei.Gender = ko.observable("");
        ei.address = ko.observable("") ;     
    }
function employeeHistory() {
        var eh = this 

         var self = this;
        eh.CompanyName = ko.observable();
        eh.Designation = ko.observable();
        eh.StartDate = ko.observable();
        eh.EndDate = ko.observable();
}

function employeeEducation() {
    var ee = this;
        ee.Degree = ko.observable();
        ee.YearOfPassing = ko.observable();
        ee.Percentage = ko.observable();
        ee.Institute = ko.observable()


    ee.fullEmployeeDetails = new FullEmployeeProfile();
    ee.saveEmployeeDetails = function() {

        $.when(postSecureData("/api/EmployeeProfile/", ko.toJSON(ee.fullEmployeeDetails)))
        .done(function (empProfile) {
            if (response.ResponseRequired == false) {
            document.getElementById("save-empDetails-btn").innerHTML = "Saving...";
            setTimeout(function () { document.getElementById("save-empDetails-btn").innerHTML = "Save" }, 2500);
            $.msgGrowl({
                type: 'info',
                title: 'Employee information saved',


        }); }

        });
    };

}

回答1:

I got your problem. your code is stucking in infinite function calls which is causing your browser's stack size exceeding.

when Your function employeeEducation() gets executed, Then its behavior is as follows (see line between commented lines):

function employeeEducation() {
    var ee = this;
        ee.Degree = ko.observable();
        ee.YearOfPassing = ko.observable();
        ee.Percentage = ko.observable();
        ee.Institute = ko.observable()

//........................................................
    ee.fullEmployeeDetails = new FullEmployeeProfile();
//................................................
    ee.saveEmployeeDetails = function() {

        $.when(postSecureData("/api/EmployeeProfile/", ko.toJSON(ee.fullEmployeeDetails)))
        .done(function (empProfile) {
            if (response.ResponseRequired == false) {
            document.getElementById("save-empDetails-btn").innerHTML = "Saving...";
            setTimeout(function () { document.getElementById("save-empDetails-btn").innerHTML = "Save" }, 2500);
            $.msgGrowl({
                type: 'info',
                title: 'Employee information saved',


        }); }

        });
    };

See highlighted text above, which calls FullEmployeeProfile() constructor. And execute Following (Focus on the line between commented lines):

function FullEmployeeProfile ()

{
    var EmployeeEdu = new employeeEducation();
    var EmployeeHist =  new employeeEducation();
//.......................................................
    var EmpInfo = new employeeEducation();
//...........................................................

}

And, in above code it'll execute employeeEducation() again, which in-turn execute ee.fullEmployeeDetails = new FullEmployeeProfile(); statement which calls FullEmployeeProfile() constructor, and so on . It continues infinitely until your browser's stack size exceeded.

This situation is like: A is calling B where B is calling A...

Try changing your code.

来源：https://stackoverflow.com/questions/31535178/how-to-solve-the-maximum-call-stack-size-exceeded-issue-in-javascript-code