美文网首页
WeakMap的学习与应用场景

WeakMap的学习与应用场景

作者: 小鱼旋子 | 来源:发表于2019-06-23 16:41 被阅读0次

    WeakMap 是什么?

    WeakMap 与 Map 类似,也是生成 键值对组合,但是有区别:
    1.WeakMap 只能接受对象作为键名(不包括null)
    2.WeakMap 的键名所指向的对象是弱引用,不计入垃圾回收机制

    所以如果想向 对象添加数据又不想干扰垃圾回收机制,就可以用 WeakMap WeakMap 可用在它的键对应的对象可能在将来消息的场景,
    WeakMap 有助于防止内存泄露

    注:WeakMap 弱引用是键名,而不是键值,键值依然是正常引用的
    => 3. 没有size属性,没有遍历操作(即没有key(), values(), entries() )
    原因:没有办法列出所有键名,某个键名是否存在完成不可预测,这和垃圾回收机制是否允许相关:就算这一刻可以取到键名,下一刻垃圾回收机制突然运行的话这个键名就可能消失,为了防止这种不确定性,所以统一规定不能取到键名)

    WeakMap 的应用场景

    1.WeakMap的典型应用:以 DOM节点作为键名的场景

    这种场景下可能是
    (1)想要给网页的dom元素上添加数据时可用 WeakMap
    用 WeakMap 好处是当该 DOM 元素被清除,对应的 WeakMap记录就会自动被移除
    例1:

    const wm = new WeakMap();
    const ele = document.getElementById('example');
    wm.set(el, 'some information');
    wm.get(el) //"some information"
    

    例2:

    let myEle = document.getElementbById('logo');
    let myWeakMap = new WeakMap();
    
    myWeakMap.set(myEle, {timesClicked: 0});
    
    myEle.addEventListener('click', function() {
    let logoData = myWeakMap.get(myEle);
    logoData.timesClicked++;
    },false);
    

    这段代码功能是计数对某个节点的点击
    myEle是一个dom节点,每次点击时更新一下timesClicked进行加一,则可将这个状态timesClicked 作为键值 放在 WeakMap 里,对应的键名就是meEle 。而一旦myEle这个dom节点删除,则 timesClicked这个状态就会自动消失,则不会有内存泄露的风险
    (2)进一步说注册监听事件的listener对象很适合用WeakMap来实现

    // 代码1
    ele1.addEventListener('click', handler1, false);
    ele2.addEventListener('click', handler2, false);
     
    // 代码2
    const listener = new WeakMap();
     
    listener.set(ele1, handler1);
    listener.set(ele2, handler2);
     
    ele1.addEventListener('click', listener.get(ele1), false);
    ele2.addEventListener('click', listener.get(ele2), false);
    

    代码2比起代码1的好处是:由于监听函数是放在 WeakMap 里面,
    则一旦dom对象ele1,ele2消失,与它绑定的监听函数handler1和handler2 也会自动消失

    2. WeakMap 可用来部署类中的私有属性

    WeakMap 的语法

    1. 通过 new WeakMap 可创建 WeakMap 实例
    2. 没有clear()方法,只有四个方法:get(), set(), has(), delete()

    相关文章

      网友评论

          本文标题:WeakMap的学习与应用场景

          本文链接:https://www.haomeiwen.com/subject/vgfwqctx.html