为何网页上显示的dom元素,放入闭包的数组中后,就会从页面上消失?

Question

let factory=(function(){
  let arr=[]//形成闭包
  return {
    create(){//获取对象
      if(arr.length==0){
        console.log('新建了元素!');
        var div=document.createElement('div')
        return div;
      }else{//池中有元素,则拿出来一个用
        return arr.shift()
      }
    },
    recycle(i){//回收元素,放入池中(本简单例子没初始化元素)
      arr.push(i)
    }
  }
})()
let arr1=['max','chloe']
let waitToRecycle=[]//收集要回收的元素
arr1.forEach((i,index)=>{
  let div=factory.create();
  div.innerHTML=i;
  document.body.appendChild(div)
  waitToRecycle.push(div)
})//调用对象池(对象池没有对象则会自动新建)

//回收对象到对象池
let arr3=[]
//这里如果不循环放入闭包变量中,则dom元素不会从页面上消失
waitToRecycle.forEach((i,index)=>{
  factory.recycle(i)//其实就是将dom(引用类型)对象放入了闭包的变量中!!!
  // 为啥把dom元素放入闭包的数组中,页面上就会消失呢?
  // 因为闭包中的数据,外界都访问不到??
})

let arr2=['js','rachel']
//再次放入新元素到html中
arr2.forEach((i,index)=>{
  let div=factory.create();
  div.innerHTML=i;
  document.body.appendChild(div)//此时页面上只显示js和rachel,因为max与chloe的dom元素被回收到闭包内存了!
  waitToRecycle.push(div)
})

代码如上,从网上学习对象池的过程中,发现放入闭包中的dom元素不会在页面上显示

Answer 1

1. 遍历 arr1 的时候，往 body 中新增两个 div，内容分别是 max、chloe
2. 遍历 waitToRecycle 给 arr 中增加了 1 中的两个元素
3. 遍历 arr2 的时候，因为 arr 中有元素，就没有触发新建。

所以只是相当于在遍历 arr2 的时候修改了原 arr1 生成的两个元素。

**Node.appendChild()** 方法将一个节点附加到指定父节点的子节点列表的末尾处。如果将被插入的节点已经存在于当前文档的文档树中，那么 appendChild() 只会将它从原先的位置移动到新的位置（不需要事先移除要移动的节点）。