ES6中的Proxy 代理器

521 阅读2分钟

proxy

proxy的基本概念

proxy用于修改某些默认行为,ES6提供构造函数来对目标对象进行一些拦截操作,proxy其实就是一个代理器,外部所有的操作都需要经过这层拦截;

proxy基本使用

new Proxy(target, handler);

target是我们要操作的目标对象,handler也是一个对象;可以在handler中包含多种拦截行为;

const proxy = new Proxy({}, {
  get: function(target, propKey) {
    return 35;
  }
});

注意点

  • 目前Proxy支持多种拦截操作;要使得Proxy起作用,必须针对Proxy实例(上例是proxy对象)进行操作,而不是针对目标对象(上例是空对象)进行操作。

proxy使用场景;

js弱类型语言,没有的属性就直接赋值了undefined; 可以用withZeroValue对proxy进行一个封装,对一些属性没有设置的属性默认设置零值;

const withZeroValue = (target,zeroValue) => {
    return new Proxy(target, {
        get: function(obj,prop) {
            return (prop in obj) ? obj[prop]: zeroValue;
        }
    
    })
}
const c = {
    name: 1
}
const pos = withZeroValue(c, 0);

vue中proxy的使用;

MVVM框架,数据是双向绑定的,当数据发现变化,需要同步到模板,双向数据绑定的实现方法中,vue中使用的是数据劫持。vue中使用的Object.defineProperty或者proxy对数据的所有属性进行劫持,

Object.defineProperty和proxy的一个比较

  • Object.defineProperty无法劫持数组的一个变化;
  • 只能劫持对象属性的一个信息,如果是对象是一个深度对象或者属性很多,需要对每个属性进行劫持;
  • proxy可以监听数组的变化,和整个对象的变化

Reflect:

抽象出一个新的Reflect,类似于Object对象的一个扩展,将一些属于语言层面上面的属性和方法,放到了Reflect,使得Object对象变得更加干净;