javascript - javascript中的递归

Question

我想了解递归是如何工作的。下面的代码遍历 HTML 文档的节点。它调用一个函数，依次将每个节点传递给它。有人可以解释一下它是如何分步完成的吗？谢谢。

var walk_the_DOM = function walk(node, func) {
    func(node);
    node = node.firstChild;
    while (node) {
        walk(node, func);
        node = node.nextSibling;
    }
}

Answer 1

第一条语句是函数定义:

var walk_the_DOM = function walk(node, func) {
    ...
};

这为 walk_the_DOM 分配了一个函数。此函数有两个参数:node 和 func。 node 是您要处理的节点，func 是您要在 node 上应用的函数。

函数的第一行是func(node);。这实质上意味着您正在 node 上应用传入函数。例如，如果您这样调用 walk_the_DOM:

walk_the_DOM(root, function(node) {
    console.log(node);
});

你会打电话

function(node) {
    console.log(node);
}

在每个节点上，作为打印出树中每个节点的效果。

下一行 node = node.firstChild; 基本上将 node 重新分配给它的第一个 child 。您需要这样做的原因是因为您需要查看当前节点的每个子节点。当然，您还需要查看那些 child 的 child ，但我们稍后会谈到这部分。

现在我们进入while 循环。此 while 循环的条件只是 while(node)，这意味着只要 node 不是 ，循环就会运行>null 或未定义。在我们之前的语句中，我们做了 node = node.firstChild。如果当前节点没有 child 怎么办？然后 node.firstChild 将为空，因此我们甚至不会进入循环。我们将退出它并退出该函数(记住这部分；如果当前节点没有子节点，我们将退出该函数。这被称为递归函数的停止条件).

现在在 while 循环中，我们进行递归调用:walk(node, func);。让我们暂时忽略这里发生的事情并转到下一行:node = node.nextSibling;。在这里，我们将节点的下一个同级赋值回变量 node。实际上，我们正在遍历该节点的兄弟节点。现在，如果该节点没有其他兄弟节点(即父节点只有一个子节点)怎么办？然后 node 将为 null，我们将跳出循环。

现在让我们回到递归调用walk(node, func)。在递归调用中，我们调用函数本身，这意味着函数的行为与本次迭代完全相同。此时您可能会想“但这是否意味着它会永远执行？”。但它不会!为什么？还记得我之前提到的停止条件吗？在某些时候，您将传入一个没有子节点的节点，这意味着递归调用将退出并返回到下一行 (node = node.nextSibling) 并且执行将正常进行。现在，如果您将 DOM 想象成一棵树(它确实是)，这意味着您将尽可能沿着一个分支向下移动，一旦到达终点，您将退回一层，并检查以查看如果还有其他 sibling 。如果有，你就沿着那个分支尽可能远地走下去。如果不是，则您再退回一个级别并再次进行检查。这样，您就可以遍历整个 DOM 树。