如何解决 JavaScript 代码中超出最大调用堆栈大小的问题答案

【问题标题】：How to solve the Maximum call stack size exceeded issue in JavaScript Code如何解决 JavaScript 代码中超出最大调用堆栈大小的问题
【发布时间】：2015-10-10 16:16:56
【问题描述】：

如下图我使用的是淘汰赛。我有多个视图模型，我正在组合并传递给控制器。问题是，当我运行应用程序时，在浏览器打开时单击 F12 检查错误时，我遇到了这个小问题：

未捕获的 RangeError：超出最大调用堆栈大小

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',


        }); }

        });
    };

}

【问题讨论】：

您似乎已将function employeeEducation 定义粘贴了两次。
@RoyJ 感谢您指出我已经进行了必要的调整
您的 FullEmployeeProfile 应该初始化成员变量（基于this）而不是本地（var）变量。现在，它为ee.fullEmployeeDetails构造了一个空对象
@RoyJ 我按照您的建议进行了更改，但似乎无法解决“未捕获 RangeError：超出最大调用堆栈大小”问题
这就是为什么我没有将其发布为答案。 :) 错误通常是由于无限递归而发生的：一个函数调用自身（或另一个调用第一个函数的函数，或其他）。我在您在这里发布的代码中看不到这一点。你所做的一些事情在风格上不是很淘汰，例如设置innerHTML——那些应该通过文本绑定来完成。同样，这不是问题的根源，但会使您的代码更整洁。

标签： javascript knockout.js single-page-application

【解决方案1】：

我有你的问题。您的代码陷入无限函数调用，导致浏览器的堆栈大小超出。

当你的函数employeeEducation()被执行时，它的行为如下（见注释行之间的行）：

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',


        }); }

        });
    };

请参阅上面突出显示的文本，它调用 FullEmployeeProfile() 构造函数。并执行Following（关注注释行之间的行）：

function FullEmployeeProfile ()

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

}

并且，在上面的代码中，它会再次执行employeeEducation()，然后又执行调用FullEmployeeProfile()构造函数的ee.fullEmployeeDetails = new FullEmployeeProfile();语句，依此类推。它会无限继续，直到超出浏览器的堆栈大小。

这种情况就像：A 呼叫 B 而 B 呼叫 A...

尝试更改您的代码。

【讨论】：