Javascript 递归函数中的Array.prototype.reduce正在生成意外结果

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

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

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（）

，我会得到一个docFrag，其内容与预期的

一致

但现在我想做的是让它递归，这样它就可以看到“宠物”，并在每个

中附加另一个DocumentFragment，这样我就得到了

<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（）正在返回

我的逻辑有什么问题？我是否误解了数组、原型、reduce或递归函数

谢谢

---

脚注

---

*类名是指初始化实例的构造函数的名称。

您的问题是

elem

是一个。这对于您的第一个函数来说并不重要，但是在调用覆盖其调用者的

elem

的情况下，会完全搞乱递归函数

---

使用a在本地声明变量（对于

prop

也缺少它）。并用它来获取此类行为的错误。

哇……就这样？非常感谢！