es6 javascript 的WeakMap结构+WeakSet数据结构

一,WeakSet

1.含义

WeakSet 结构与 Set 类似, 也是不重复的值的集合。 

2. 它与 Set 有两个区别

首先, WeakSet 的成员只能是对象, 而不能是其他类型的值。

其次, WeakSet 中的对象都是弱引用, 即垃圾回收机制不考虑 WeakSet 对该对象的引用, 也就是说, 如果其他对象都不再引用该对象, 那么垃圾回收机制会自动回收该对象所占用的内存, 不考虑该对象还存在于 WeakSet 之中。 这个特点意味着, 无法引用 WeakSet 的成员, 因此 WeakSet 是不可遍历的。

var ws = new WeakSet();  
ws.add(1)  
// TypeError: Invalid value used in weak set  
ws.add(Symbol())  
// TypeError: invalid value used in weak set  

上面代码试图向 WeakSet 添加一个数值和Symbol值, 结果报错, 因为 WeakSet 只能放置对象。

3.语法

WeakSet 是一个构造函数, 可以使用new命令, 创建 WeakSet 数据结构

const ws = new WeakSet();
作为构造函数, WeakSet 可以接受一个数组或类似数组的对象作为参数。( 实际上, 任何具有 iterable 接口的对象, 都可以作为 WeakSet 的参数。) 该数组的所有成员, 都会自动成为 WeakSet 实例对象的成员。
var a = [  
    [1, 2],  
    [3, 4]  
];  
var ws = new WeakSet(a);  
上面代码中, a是一个数组, 它有两个成员, 也都是数组。 将a作为 WeakSet 构造函数的参数, a的成员会自动成为 WeakSet 的成员。

注意, 是a数组的成员成为 WeakSet 的成员, 而不是a数组本身。 这意味着, 数组的成员只能是对象

var b = [3, 4];  
var ws = new WeakSet(b);  
// Uncaught TypeError: Invalid value used in weak set(…)  
上面代码中, 数组b的成员不是对象, 加入 WeaKSet 就会报错。


4.WeakSet 结构有以下三个方法

WeakSet 结构有以下三个方法。
WeakSet.prototype.add(value): 向 WeakSet 实例添加一个新成员。
WeakSet.prototype.delete(value): 清除 WeakSet 实例的指定成员。
WeakSet.prototype.has(value): 返回一个布尔值, 表示某个值是否在 WeakSet 实例之中。

下面是一个例子。

var ws = new WeakSet();  
var obj = {};  
var foo = {};  
ws.add(window);  
ws.add(obj);  
ws.has(window); // true  
ws.has(foo); // false  
ws.delete(window);  
ws.has(window); // false  
WeakSet 没有size属性, 没有办法遍历它的成员。  
ws.size // undefined  
ws.forEach // undefined  
ws.forEach(function(item) {  
        console.log('WeakSet has ' + item)  
    })  
// TypeError: undefined is not a function  

上面代码试图获取size和forEach属性, 结果都不能成功。

        WeakSet 不能遍历, 是因为成员都是弱引用, 随时可能消失, 遍历机制无法保证成员的存在, 很可能刚刚遍历结束, 成员就取不到了。 WeakSet 的一个用处, 是储存 DOM 节点, 而不用担心这些节点从文档移除时, 会引发内存泄漏

下面是 WeakSet 的另一个例子。

const foos = new WeakSet()  
class Foo {  
    constructor() {  
        foos.add(this)  
    }  
    method() {  
        if(!foos.has(this)) {  
            throw new TypeError('Foo.prototype.method  只能在 Foo 的实例上调用! ');  
        }  
    }  
}  
上面代码保证了Foo的实例方法, 只能在Foo的实例上调用。 这里使用 WeakSet 的好处是, foos对实例的引用, 不会被计入内存回收机制, 所以删除实例的时候, 不用考虑foos, 也不会出现内存泄漏。


二,WeakMap

1.含义

WeakMap结构与Map结构基本类似,也是用于生成键值对的集合。

// WeakMap 可以使用 set 方法添加成员
const wm1 = new WeakMap();
const key = {foo: 1};
wm1.set(key, 2);
wm1.get(key) // 2

// WeakMap 也可以接受一个数组,
// 作为构造函数的参数
const k1 = [1, 2, 3];
const k2 = [4, 5, 6];
const wm2 = new WeakMap([[k1, 'foo'], [k2, 'bar']]);
wm2.get(k2) // "bar"

2.与map结构的区别

唯一的区别是它只接受对象作为键名( null除外), 不接受其他类型的值作为键名, 而且键名所指向的对象, 不计入垃圾回收机制

const map = new WeakMap();
map.set(1, 2)
// TypeError: 1 is not an object!
map.set(Symbol(), 2)
// TypeError: Invalid value used as weak map key
map.set(null, 2)
// TypeError: Invalid value used as weak map key

上面代码中, 如果将1和Symbol作为 WeakMap 的键名, 都会报错。

      WeakMap的设计目的在于, 键名是对象的弱引用( 垃圾回收机制不将该引用考虑在内), 所以其所对应的对象可能会被自动回收。 当对象被回收后, WeakMap自动移除对应的键值对。 典型应用是, 一个对应 DOM 元素的WeakMap结构, 当某个 DOM 元素被清除, 其所对应的WeakMap记录就会自动被移除。 基本上, WeakMap的专用场合就是, 它的键所对应的对象, 可能会在将来消失。 WeakMap结构有助于防止内存泄漏。

下面是WeakMap结构的一个例子, 可以看到用法上与Map几乎一样。

var wm = new WeakMap();  
var element = document.querySelector(".element");  
wm.set(element, "Original");  
wm.get(element) // "Original"  
element.parentNode.removeChild(element);  
element = null;  
wm.get(element) // undefined  

上面代码中, 变量wm是一个WeakMap实例, 我们将一个DOM节点element作为键名, 然后销毁这个节点, element对应的键就自动消失了, 再引用这个键名就返回undefined。

3.weakMap语法

WeakMap 与 Map 在 API 上的区别主要是两个, 一是没有遍历操作( 即没有key()、 values() 和entries() 方法), 也没有size属性; 二是无法清空, 即不支持clear方法。 这与WeakMap的键不被计入引用、 被垃圾回收机制忽略有关。 因此, WeakMap只有四个方法可用: get()、 set()、 has()、 delete()。

var wm = new WeakMap();  
wm.size  
// undefined  
wm.forEach  
// undefined  

4.weakMap用途

 WeakMap 应用的典型场合就是 DOM 节点作为键名。 

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

上面代码中, myElement是一个 DOM 节点, 每当发生 click 事件, 就更新一下状态。 我们将这个状态作为键值放在 WeakMap 里, 对应的键名就是myElement。 一旦这个 DOM 节点删除, 该状态就会自动消失, 不存在内存泄漏风险。

WeakMap 的另一个用处是部署私有属性。

let _counter = new WeakMap();  
let _action = new WeakMap();  
class Countdown {  
    constructor(counter, action) {  
        _counter.set(this, counter);  
        _action.set(this, action);  
    }  
    dec() {  
        let counter = _counter.get(this);  
        if(counter < 1) return;  
        counter--;  
        _counter.set(this, counter);  
        if(counter === 0) {  
            _action.get(this)();  
        }  
    }  
}  
let c = new Countdown(2, () => console.log('DONE'));  
c.dec()  
c.dec()  
// DONE  

上面代码中, Countdown 类的两个内部属性_counter和_action, 是实例的弱引用, 所以如果删除实例, 它们也就随之消失, 不会造成内存泄漏。

三.总结

弱引用集合WeakSet和WeakMap

Map和Set都为内部的每个键或值保持了强引用,也就是说,如果一个对象被移除了,回收机制无法取回它占用的内存 ,除非在Map或者Set中删除它。

WeakSet并不对其中对象保持强引用。当WeakSet中的一个对象被回收时,它会简单地被从WeakSet中移除。WeakMap也类似地不为它的键保持强引用。如果一个键仍被使用,相应的值也就仍被使用 。
下面是弱引用集合的一些限制:
  • WeakMap只支持new、has、get、set 和delete。 
  • WeakSet只支持new、has、add和delete 。
  • WeakSet的值和WeakMap的键必须是对象。
  • 都不可迭代, 除非专门查询或给出你感兴趣的键,否则不能获得一个弱集合中的项 。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值