javascript - 是什么阻止函数被无限调用？

Question

该函数的目的是通过每个子元素上的回调函数来遍历 DOM。如果 traverseDom 调用自身并重新启动整个函数，我预计永远不会到达 element = element.nextElementSibling。尽管我们最终会到达节点树中的最后一个子节点，但我认为没有什么可以阻止该函数无限地调用自身来尝试查找其他子节点，即使在我们到达最后一个子节点之后也是如此。

function traverseDom(element, callback) {
  callback(element);
  element = element.firstElementChild;

  while (element) {
    traverseDom(element, callback);
    element = element.nextElementSibling;
  }
}
const subTree = document.getElementById("subTree");
traverseDom(subTree, function(element) {
  console.assert(element !== null, element.nodeName);
});

<div id="subTree">
  <form>
    <input type="text" />
  </form>
  <p>Paragraph</p>
  <span>Span</span>
</div>

我希望它无限运行并且永远不会到达同级元素声明。

Answer 1

在最深的嵌套元素中，element.firstElementChild将为null，因此将其分配给element后，以下条件将不会出现是真的:

while(element) {     

...所以根本没有进入循环。此时没有进一步的递归，函数返回，并且可能发生回溯。在上一层递归执行的函数可能仍然会进一步循环，但最终总会有最深的一层循环不执行。这些代表深度优先遍历树中的叶子。

变量范围

还有另一个方面可能会导致困惑:变量 element 对于当前函数执行上下文来说是本地:其值发生变化(由于赋值) )，不会影响调用函数中的同名变量。

为了澄清这一点，您还可以重写代码以使用不同的变量名称来为其分配子节点:

function traverseDom(element, callback) {
  callback(element);
  var child = element.firstElementChild;

  while (child) {
    traverseDom(child, callback);
    child = child.nextElementSibling;
  }
}
const subTree = document.getElementById("subTree");
traverseDom(subTree, function(element) {
  console.assert(element !== null, element.nodeName);
});

<div id="subTree">
  <form>
    <input type="text" />
  </form>
  <p>Paragraph</p>
  <span>Span</span>
</div>

此代码将产生相同的结果；它使用相同的逻辑，只是它不为 element 分配新值，而是为该新值(第一个子元素)使用不同的变量。但请注意，当递归调用该函数时，child 的值将成为参数变量 element 的值。