Proxy
概述
Proxy在目标对象之前架设一层"拦截",外界对该对象访问必须先通过这层拦截.因此提供了一种极致,可以对外界的访问进行过滤和修改.
ES6原生提供Proxy构造函数
var proxy = new Proxy(target, handler);
var obj = new Proxy({}, {
get: function (target, key, receiver) {
console.log(`getting ${key}!`);
return Reflect.get(target, key, receiver);
},
set: function (target, key, value, receiver) {
console.log(`setting ${key}!`);
return Reflect.set(target, key, value, receiver);
}
});
target参数表示所要拦截的目标对象(如果是一个空对象,即没有Proxy的介入,操作原来要访问的就是这个对象)handler参数也是一个对象,用来定制拦截行为
注意,要使得Proxy起作用,必须针对Proxy实例进行操作,而不是针对目标对象进行操作(操作的不是target参数代表的对象)
Proxy实例可以作为其他对象的原型对象
Proxy支持的拦截操作:
get(target, propKey, receiver):拦截对象属性的读取
参数分别为目标对象,属性名和proxy实例本身,其中最后一个参数可选
get方法可以继承set(target,propKey,value,receiver):拦截对象属性的设置,返回一个布尔值
参数分别是目标对象,属性名,属性值和proxy实例本身,最后一个参数可选
注意:如果目标对象自身的某个属性,不可写或不可配置,那么set方法将不起作用has(target,propKey):拦截propKey in proxy的操作,返回一个布尔值
has方法用来拦截HasProperty操作,判断对象是否具有某个属性时,这个方法会生效
如果源对象不可配合或者禁止拓展,这时has拦截会报错deleteProperty(target,propKey):拦截delete proxy[propKey]的操作,返回一个布尔值
如果这个方法抛出错误或者返回false,当前属性就无法被delete命令删除
注意:目标对象自身的不可配置的属性,不能被deleteProperty方法删除,否则会报错-
ownKeys(target):拦截Object.getOwnPropertyNames(proxy),Object.getOwnPropertySymbols(proxy),Object.keys(proxy),返回一个数组.该方法返回目标对象所有自身的属性的属性名,二Object.keys()的返回结果仅包括目标对象自身的可遍历属性
使用该方法时,有三类属性会被自动过滤,不会返回- 目标对象上不存在的属性
- 属性名为Symbol值
- 不可遍历的属性
如果目标对象自身包含不可配置的属性,则该属性必须被返回不然会报错
另外,如果目标对象是不可拓展的,返回值中必须包含源对象的所有属性,且不能包含多余的属性
getOwnPropertyDescriptor(target,propKey):拦截Object.getOwnPropertyDescriptor(proxy,propKey),返回属性的描述对象defineProperty(target,propKey,propDesc):拦截Object.defineProperty(proxy,propKey,propDesc),Object.defineProperties(proxy,propDescs),返回一个布尔值
注意:如果目标对象不可拓展,则不能增加目标对象不存在的属性,否则会报错.另外如果目标对象的某个属性不可写或不可配置,则不得改变这两个设置preventExtensions(target):拦截Object,preventExtensions(proxy),返回一个布尔值
只有目标对象不可拓展时,才能返回true.为了防止报错,通常在返回true之前调用一次Object.preventExtensionsgetprototypeOf(target):拦截Object.getPrototypeOf(proxy),返回一个对象isExtensible(target):拦截Object.isExtensible(proxy),返回一个布尔值
这个方法有一个强限制,它的返回值必须与目标对象的isExtensible属性保持一致,否则就会抛出错误setPrototypeOf(target,proto):拦截Object.setPrototype(proxy,proto),返回一个布尔值.如果目标对象是函数,那么还有两种额外操作可以拦截.apply(target,object,args):拦截Proxy实例作为函数调用的操作,比如proxy(...args),proxy.call(object, ...args),proxy.apply(...)
apply方法拦截函数的调用,call和apply操作
参数分别是目标对象,目标对象的上下文对象(this)和目标对象的参数数组construct(target,args):拦截Proxy实例作为构造函数调用的操作,比如new Proxy(...args)
用于拦截new命令,参数分别为目标对象,构建函数的参数对象
construct方法返回的必须是一个对象,否则会报错
Proxy.revocable
返回一个对象,该对象的proxy属性是proxy实例,revoke属性是一个函数,可以取消proxy实例
const target = {
m: function () {
console.log(this === proxy);
}
};
const handler = {};
const proxy = new Proxy(target, handler);
target.m() // false
proxy.m() // true
Reflect
概述
Reflect对象与Proxy对象一样,是ES6为了操作对象而提供的新API.设计目的以下:
- 将Object对象的一些明显属于语言内部的方法,放到Reflect对象上
- 修改某些Object方法的返回结果,将其变得更合理
- 让Object操作都变成函数行为
- Reflect对象的方法和Proxy对象的方法一一对应,让Proxy对象可以方便的调用对应的Reflect方法,完全变成默认行为
<观察者模式指的事函数自动观察数据对象,一旦对象有变化,函数就会自动执行>
