开发密码生成器报RangeError: Maximum call stack size exceeded

错误本质 #

RangeError: Maximum call stack size exceeded 是JavaScript中典型的栈溢出错误，触发原因绝大多数是无终止的无限递归调用：JS引擎为每次函数调用分配固定大小的栈帧，当函数没有明确的退出条件、持续递归把自身压入调用栈时，栈的可用内存被完全占满，就会抛出这个错误。

触发你项目报错的具体问题 #

对照你的代码逐行排查，核心触发点和逻辑缺陷如下：

• 函数makeid内部第一行写了console.log(makeid(5));：这行代码没有任何递归终止判断，只要makeid被执行，就会立刻调用自身。点击按钮触发第一次函数运行后，进入函数体第一行就会调用makeid(5)，这个新的函数实例运行时又会走到这行代码，再次调用makeid(5)，循环往复完全没有出口，瞬间就会撑爆调用栈，触发报错。
• 附带的逻辑偏差：
  • 按钮绑定的点击事件是onclick="makeid();"，调用时没有传入length参数，原代码的length形参会取到undefined，就算去掉递归代码，后续for循环的判断条件i < length也会失效，无法正常生成密码
  • 原本计划输出密码的逻辑，被错误放在了字符读取、密码生成的流程最前面，完全颠倒了执行顺序

可直接运行的修正代码 #

// 给密码长度设置默认值，解决按钮调用不传参的问题
function makeid(length = 8) {
  const result = [];
  // 读取输入框中定义的允许字符集
  const allowedChars = document.getElementById("myInput").value;
  // 增加基础校验，避免输入为空时逻辑异常
  if (!allowedChars) {
    console.log("请先在输入框中填写密码允许使用的字符");
    return "";
  }
  const charsLength = allowedChars.length;
  for (let i = 0; i < length; i++) {
    result.push(allowedChars.charAt(Math.floor(Math.random() * charsLength)));
  }
  const generatedPwd = result.join('');
  // 密码生成完成后再输出结果
  console.log(generatedPwd);
  return generatedPwd;
}

对应的HTML部分无需修改，保持原有结构即可：

<input type="text" placeholder="Type something..." id="myInput">
<button type="button" onclick="makeid();">Get</button>

内容的提问来源于stack exchange，提问作者user9384