为何未显式定义的JS变量a可引用对应ID元素？及栈溢出问题

嘿，我来帮你拆解这两个问题：

问题1：为什么未定义的变量a会指向ID为a的DOM元素？ #

这其实是早期浏览器遗留的非标准特性——过去的浏览器厂商为了简化开发者的操作，默认会把页面中带有ID属性的DOM元素，自动挂载到全局的window对象上，变量名就等于元素的ID值。所以你代码里的a本质上是window.a，直接指向了<input id="a">这个DOM节点。

但必须提醒你：这个特性完全不推荐使用！

• 它不是ECMAScript标准的一部分，不同浏览器的兼容性可能有差异；
• 很容易引发变量冲突：如果你自己声明了一个同名变量var a = 'test'，就会覆盖这个自动生成的DOM元素引用；
• 代码可读性极差，其他开发者看到未定义的a会一脸懵。

正确的做法是用标准API获取元素，比如原生的document.getElementById('a')，或者你代码里用的jQuery：$('#a')。

问题2：如何排查解决"Maximum call stack size exceeded"错误？ #

这个错误的核心是函数调用层级太深，超出了JavaScript引擎的调用栈容量，几乎都是无限递归或循环调用导致的，你可以按下面的步骤排查：

• 先检查递归函数的终止条件：如果你写了递归逻辑（比如计算斐波那契数列、遍历树结构），一定要确认有没有正确的终止判断。比如递归计算阶乘时，忘记写if(n === 0) return 1，就会无限调用自己直到爆栈。
• 排查事件监听的重复绑定：比如你在click事件的处理函数里，又重复绑定了同一个click事件；或者在AJAX回调里反复绑定事件，导致触发一次就会无限循环调用。
• 检查DOM事件的循环触发：比如在元素的click回调里，又主动触发了该元素的click事件；或者父元素和子元素的事件互相触发（比如父元素的click触发子元素的click，子元素的click又冒泡到父元素），形成死循环。
• 排查框架/库的生命周期问题：如果你用了Vue、React这类框架，可能是在watch监听、生命周期钩子（比如Vue的updated）里修改了触发钩子的变量，导致无限触发钩子函数。
• 用调试工具定位根源：打开浏览器开发者工具（F12）的Sources面板，当错误出现时，查看Call Stack（调用栈），栈顶的函数就是触发循环的起点，顺着调用栈往下找，就能找到哪里出现了无限调用。

找到问题后，针对性修正即可：比如给递归补全终止条件，移除重复的事件绑定，在事件回调里避免触发自身事件，或者在框架的watch里加条件判断防止无限触发。

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