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对象变得更加干净;