33.2、WeakMap与WeakSet、proxy与reflect

Map和WeekMap的区别

1. 弱引用为垃圾回收会忽略该引用值的引用。也就是，如果某个引用值被赋值给多个变量，当其他所有的变量都被清空时，弱引用的值会被垃圾回收机制回收。

2. WeakMap的key只能为引用值，并且key为弱引用。由于key为弱引用，key存在不确定性，因此WeakMap不能被遍历，如果能遍历会出现数据混乱。

3. 如果在Map中添加数据，又不想影响垃圾回收机制，可以考虑使用WeakMap。

4. 可以在node --expose-gc模式下，手动执行垃圾回收机制global.gc()，通过process.memoryUsage()查看WeakMap key被垃圾回收后，内存的变化。

let obj = { a: 1 };
let wm = new WeakMap();
wm.set(obj, 1);
obj = null; // wm 所引用的 { a: 1 } 将会被垃圾回收机制销毁。通过程序无法立马感知。可通过下面阮一峰老师的方法进行查看。

let obj = { a: 1 };
let m = new Map();
m.set( obj, 1 );
obj = null; // m 所引用的 { a: 1 } 不会被销毁。如果要销毁m所引用的{ a: 1 }，需要将m设置为null。

参见1MDN
参见2 阮老师讲解垃圾回收

5. Map内部是通过两个数组分别来维护key和value，通过key获取索引时，要遍历整个数组，每个key数组中的引用值为强引用。
6. WeakMap内部的key值，由于是弱引用，通过程序不确定垃圾回收会把key值回收掉，因此WeakMap不适合用来遍历或获取size。
7. WeakMap使用场景：当使用dom元素作为key值，适合用到WeakMap，因为当dom元素消失时，一般key所对应的value值也没有存在的意义。比如给dom元素添加监听事件时，可以把回调函数预设到WeakMap中，添加监听事件时，从weakMap中获取回调函数。

• WeakSet与WeakMap的特性基本一致

proxy

• proxy的作用是对目标对象属性的拦截，本质上是生成了一个代理对象，访问代理对象的属性时，可以通过代理对象的set、get等方法进行拦截，在set和get方法中可以对目标对象进行业务处理。

• proxy和definedProperty的区别：

  • proxy是对整个对象的监听，defineProperty是对单个属性的监听。
  • proxy比defineProperty的优势在于除了set、get方法以外，新增了很多其他方法，比如可以监听到新增、删除的属性，对数组的操作可以监听到。也可以通过apply对函数进行代理。

• 实用场景：

  • 监听数组，通过负数可以直接访问数组末尾的值。
  • 表单提交验证，给属性赋值时，进行验证是否合法。
  • 赋值身份证后，对其他地域、生日、性别等字段进行赋值。
  • Vue3中对于的观察者模式。
  • 总之基于属性的访问和赋值操作，需要业务处理时，都可以用到Proxy。

var tar = {};

var agent = new Proxy(tar, {
  set: function (target, key, value) { //对tar的赋值操作进行拦截
    if (key === 'phone') {
      return false;
    } else if ( key === 'leaveMsg' ) {
      if (typeof(value) === 'string') {
        target[key] = value;
        return true;
      } else {
        return false;
      }
    }
  },
  get: function ( target, key ) {
    if ( key in target ) {
      return target[key];
    } else {
      return '没有此属性';    
    }
  },
  has: function (target, key) { // ! 对于for in 此方法不起作用
    if ( key in target ) {
      return true;
    } else {
      return false;
    }
  },
  deleteProperty: function (target, key) {
    if(key.indexOf('_') !== 0) {
      delete target[key];
    }
  }
});

agent.phone = 1; // 静默失败
agent.x = 2; // 成功
agent.leaveMsg = 123; // 静默失败
agent.leaveMsg = 'mgs'; // 成功

agent.a; // '没有此属性'

agent.hasOwnProperty('x'); // true
agent.hasOwnProperty('y'); // false

• 通过agent直接赋值，可以直接转移到obj

var obj = {};
var agent = new Proxy( obj, {} );
agent.x = 1;
console.log(obj.x); //1

Reflect

• 提供了各种静态方法
• 等同于通过obj[]的方式操作和访问对象属性