javascript - 带有额外参数的 forEach 函数

Question

嘿，所以我在下面有一个简单的函数来递归地遍历 TheDOM，我想添加一些额外的功能。

function walkTheDOM(node) {
    if( node.hasChildNodes() ) {
        Array.prototype.forEach.call(node.children, walkTheDOM );
    } 
}

附加功能，以便我可以对每个功能应用一些东西。使用 applyFn 对函数遍历的每个元素执行操作。

function walkTheDOM(node,applyFn) {
    //do something to each node
    !applyFn || applyFn(node);
    if( node.hasChildNodes() ) {
        forEach.call(node.children, function(childNode){ return walkTheDOM(childNode, applyFn); } );
    } else {
        console.log("Is Leaf:", node);   
    }
}

我想清理代码以类似于第一个代码示例，特别是这一行:

Array.prototype.forEach.call(node.children, walkTheDOM );

这样它就可以调用 applyFn 而不必将 walkTheDOM 函数包装在一个函数中。

是否可以通过 idk 调用 forEach.call(child, walkTheDom.call(child, applyFn)?

基本上，是否可以在不创建这种外部匿名函数包装我的递归调用以添加我的 applyFn(应用函数)参数的配置的情况下，固有地向该函数添加其他参数？

我不关心使用某种 jQuery 函数或其他库来完成此任务，因此请不要用其他方式来完成此任务，例如“查看 jQuery lib XYZ...”或“jQuery 已经这样做了，试试 jQuery.libXYZ...”等等...我只是在探索 JavaScript 中的递归和函数调用。我不关心已经执行此功能的其他第三方，这是我的问题。谢谢。

编辑也许通过这段代码可以更好地理解这一点，它更像是一种经典方法。

function walkTheDOM(node, applyFn) {
    applyFn(node);
    if (node.hasChildNodes()) {
        for (var i = 0; i < node.children.length; i++) {
            walkTheDOM(node.children[i],applyFn);
        }
    }
}

Answer 1

var forEach = Array.prototype.forEach;

var root = document.getElementById("root");

function applyFn(element, index) {
    // do stuff         
    if (element.hasChildNodes()) {
      document.getElementsByClassName("result")[0].innerHTML += "<br>Do something with this node: " + element.className; 
      walkTheDOM(element)
    } else {
        console.log("Is Leaf:", element);   
    }  
}

function walkTheDOM(node) {
    if( node.hasChildNodes() ) {
        forEach.call(node.children, applyFn);
    } else {
        console.log("Is Leaf:", node);   
    }    
}

walkTheDOM(root);

<div id="root" class="parent1">
    <div class="1-child1">
        <div class="1-child1-child1"></div>
        <div class="1-child1-child2"></div>
    </div>
    <div class="parent2">
        <div class="2-child1"></div>
        <div class="2-child2"></div>
    </div>
    <div class="parent3"></div>
</div>


<p class="result"></p>

jsfiddle http://jsfiddle.net/zcwc633k/4/