一个案例让你彻底明白wekMap

402 阅读1分钟
    <button class="btn1">test-btn1</button>
    <button class="btn2">test-btn2</button>
    
    const btn1 = document.querySelector('.btn1');
    const btn2 = document.querySelector('.btn2');
    
    function bindAddBtn1() {};
    function bindAddBtn2() {};
    
    1. 原始方式:
    btn1.addEventListener('click', bindAddBtn1, false);
    btn2.addEventListener('click', bindAddBtn2, false);
    
    btn1.remove();
    btn2.remove();
    
    // 节点删除也要把方法销毁
    bindAddBtn1 = null  
    bindAddBtn2 = null  
    2. 利于wekMap 弱引用
    // 弱引用特点:weekMap的key在外部没有被引用,就会自动被垃圾回收机制回收
    const weekmap = new weekMap()
    weekmap.set(btn1, bindAddBtn1);
    weekmap.set(btn2, bindAddBtn2);
    btn1.addEventListener('click', weekmap.get(btn1), false);
    btn2.addEventListener('click', weekmap.get(btn2), false);
    btn1.remove(); // weekmap的key被remove, btn1 和 bindAddBtn1关系解除,btn1绑定的事件处理函数自动被回收掉。