javascript - 递归函数中的 Array.prototype.reduce 产生了意想不到的结果

Question

我正在尝试编写一个将数组转换为 DocumentFragment 的函数。数组中的每一项都将成为一个 HTMLElement。它的标签名称将是数组项的类名*，它的属性将是值为字符串的数组项的属性。

例如，如果我有这些构造函数:

function Person(name,pets){
        this.name=name;
        this.pets=pets;
    }
function Pet(name){this.name=name;}

还有这个数据:

var arr=[
        new Person("Bob",[
            new Pet("Sparky"),
            new Pet("Wishbone")
        ]),
        new Person("Mary",[
            new Pet("Maggie"),
            new Pet("Sprinkles")
        ])
    ];

我使用这个函数并且效果很好:

Array.prototype.toDocFrag=function(){
        return this.reduce(function(docFrag,currentItem){
            elem=document.createElement(currentItem.constructor.name.toLowerCase());
            for (prop in currentItem){
                if (typeof currentItem[prop]==="string") elem.setAttribute(prop,currentItem[prop])
                //if (currentItem[prop] instanceof Array) elem.appendChild(currentItem[prop].toDocFrag())
            }
            docFrag.appendChild(elem)
            return docFrag;
        },document.createDocumentFragment())
    }

如果我运行 arr.toDocFrag() , 我得到一个包含内容 <person name="Bob"></person><person name="Mary"></person> 的 docFrag正如预期的那样。

但现在我想做的是使它递归，以便它看到“宠物”并将另一个 DocumentFragment 附加到每个 <person>所以我最终得到了

<person name="Bob">
    <pet name="Sparky"></pet>
    <pet name="Wishbone"></pet>
</person>
<person name="Mary">
    <pet name="Maggie"></pet>
    <pet name="Sprinkles"></pet>
</person> 

取消注释我在代码中注释掉的行，我相信它应该可以工作。但出于某种原因arr.toDocFrag()只返回 <pet name="Wishbone"></pet><pet name="Sprinkles"></pet>

我的逻辑有什么问题？我对Array.prototype.reduce有什么误解吗？还是递归函数？

谢谢!

---

脚注

*我所说的类名是指启动实例的构造函数的名称。

Answer 1

你的问题是 elem 是一个 implicitly global variable .这对您的第一个函数无关紧要，但会完全搞乱递归函数，调用会覆盖其调用者的 elem。

使用 var statement在本地声明变量( prop 也没有)。并使用 strict mode获取有关此类行为的错误信息。