概述
Proxy 与 Reflect 是 ES6 为了操作对象引入的 API 。
Proxy 可以对目标对象的读取、函数调用等操作进行拦截，然后进行操作处理。它不直接操作对象，而是像代理模式，通过对象的代理对象进行操作，在进行这些操作时，可以添加一些需要的额外操作。
Reflect 可以用于获取目标对象的行为，它与 Object 类似，但是更易读，为操作对象提供了一种更优雅的方式。它的方法与 Proxy 是对应的。
基本用法
Proxy
一个 Proxy 对象由两个部分组成： target 、 handler 。在通过 Proxy 构造函数生成实例对象时，需要提供这两个参数。 target 即目标对象， handler 是一个对象，声明了代理 target 的指定行为。
let target = {
name: 'Tom',
age: 24
}
let handler = {
get: function(target, key) {
console.log('getting '+key);
return target[key];
},
set: function(target, key, value) {
console.log('setting '+key);
target[key] = value;
}
}
let proxy = new Proxy(target, handler)
proxy.name
proxy.age = 25
let targetEpt = {}
let proxyEpt = new Proxy(targetEpt, handler)
proxyEpt.name
proxyEpt.name = 'Tom'
proxyEpt.name
targetEpt
let targetEmpty = {}
let proxyEmpty = new Proxy(targetEmpty,{})
proxyEmpty.name = "Tom"
targetEmpty
实例方法
get(target, propKey, receiver)
用于 target 对象上 propKey 的读取操作。
let exam ={
name: "Tom",
age: 24
}
let proxy = new Proxy(exam, {
get(target, propKey, receiver) {
console.log('Getting ' + propKey);
return target[propKey];
}
})
proxy.name
get() 方法可以继承。
let proxy = new Proxy({}, {
get(target, propKey, receiver) {
if(propKey[0] === '_'){
throw new Erro(`Invalid attempt to get private "${propKey}"`);
}
console.log('Getting ' + propKey);
return target[propKey];
}
});
let obj = Object.create(proxy);
obj.name
set(target, propKey, value, receiver)
用于拦截 target 对象上的 propKey 的赋值操作。如果目标对象自身的某个属性，不可写且不可配置，那么set方法将不起作用。
let validator = {
set: function(obj, prop, value) {
if (prop === 'age') {
if (!Number.isInteger(value)) {
throw new TypeError('The age is not an integer');
}
if (value > 200) {
throw new RangeError('The age seems invalid');
}
}
obj[prop] = value;
}
};
let proxy= new Proxy({}, validator)
proxy.age = 100;
proxy.age
proxy.age = 'oppps'
proxy.age = 300
第四个参数 receiver 表示原始操作行为所在对象，一般是 Proxy 实例本身。
const handler = {
set: function(obj, prop, value, receiver) {
obj[prop] = receiver;
}
};
const proxy = new Proxy({}, handler);
proxy.name= 'Tom';
proxy.name=== proxy
const exam = {}
Object.setPrototypeOf(exam, proxy)
exam.name = "Tom"
exam.name === exam
注意，严格模式下，set代理如果没有返回true，就会报错。
apply(target, ctx, args)
用于拦截函数的调用、call 和 reply 操作。target 表示目标对象，ctx 表示目标对象上下文，args 表示目标对象的参数数组。
function sub(a, b){
return a - b;
}
let handler = {
apply: function(target, ctx, args){
console.log('handle apply');
return Reflect.apply(...arguments);
}
}
let proxy = new Proxy(sub, handler)
proxy(2, 1)
has(target, propKey)
用于拦截 HasProperty 操作，即在判断 target 对象是否存在 propKey 属性时，会被这个方法拦截。此方法不判断一个属性是对象自身的属性，还是继承的属性。
let handler = {
has: function(target, propKey){
console.log("handle has");
return propKey in target;
}
}
let exam = {name: "Tom"}
let proxy = new Proxy(exam, handler)
'name' in proxy
注意：此方法不拦截 for ... in 循环。
construct(target, args)
用于拦截 new 命令。返回值必须为对象。
let handler = {
construct: function (target, args, newTarget) {
console.log('handle construct')
return Reflect.construct(target, args, newTarget)
}
}
class Exam {
constructor (name) {
this.name = name
}
}
let ExamProxy = new Proxy(Exam, handler)
let proxyObj = new ExamProxy('Tom')
console.log(proxyObj)
deleteProperty(target, propKey)
用于拦截 delete 操作，如果这个方法抛出错误或者返回 false ，propKey 属性就无法被 delete 命令删除。
defineProperty(target, propKey, propDesc)
用于拦截 Object.definePro若目标对象不可扩展，增加目标对象上不存在的属性会报错；若属性不可写或不可配置，则不能改变这些属性。
let handler = {
defineProperty: function(target, propKey, propDesc){
console.log("handle defineProperty");
return true;
}
}
let target = {}
let proxy = new Proxy(target, handler)
proxy.name = "Tom"
target
let handler1 = {
defineProperty: function(target, propKey, propDesc){
console.log("handle defineProperty");
return false;
}
}
let target1 = {}
let proxy1 = new Proxy(target1, handler1)
proxy1.name = "Jerry"
target1
erty 操作
getOwnPropertyDescriptor(target, propKey)
用于拦截 Object.getOwnPropertyD() 返回值为属性描述对象或者 undefined 。
let handler = {
getOwnPropertyDescriptor: function(target, propKey){
return Object.getOwnPropertyDescriptor(target, propKey);
}
}
let target = {name: "Tom"}
let proxy = new Proxy(target, handler)
Object.getOwnPropertyDescriptor(proxy, 'name')
ptor 属性
getPrototypeOf(target)
主要用于拦截获取对象原型的操作。包括以下操作：
- Object.prototype._proto_
- Object.prototype.isPrototypeOf()
- Object.getPrototypeOf()
- Reflect.getPrototypeOf()
- instanceof
let exam = {}
let proxy = new Proxy({},{
getPrototypeOf: function(target){
return exam;
}
})
Object.getPrototypeOf(proxy)
注意，返回值必须是对象或者 null ，否则报错。另外，如果目标对象不可扩展（non-extensible），getPrototypeOf 方法必须返回目标对象的原型对象。
let proxy = new Proxy({},{
getPrototypeOf: function(target){
return true;
}
})
Object.getPrototypeOf(proxy)
isExtensible(target)
用于拦截 Object.isExtensible 操作。
该方法只能返回布尔值，否则返回值会被自动转为布尔值。
let proxy = new Proxy({},{
isExtensible:function(target){
return true;
}
})
Object.isExtensible(proxy)
注意：它的返回值必须与目标对象的isExtensible属性保持一致，否则会抛出错误。
let proxy = new Proxy({},{
isExtensible:function(target){
return false;
}
})
Object.isExtensible(proxy)
ownKeys(target)
用于拦截对象自身属性的读取操作。主要包括以下操作：
- Object.getOwnPropertyNames()
- Object.getOwnPropertySymbols()
- Object.keys()
- or...in
方法返回的数组成员，只能是字符串或 Symbol 值，否则会报错。
若目标对象中含有不可配置的属性，则必须将这些属性在结果中返回，否则就会报错。
若目标对象不可扩展，则必须全部返回且只能返回目标对象包含的所有属性，不能包含不存在的属性，否则也会报错。
let proxy = new Proxy( {
name: "Tom",
age: 24
}, {
ownKeys(target) {
return ['name'];
}
});
Object.keys(proxy)
let target = {
name: "Tom",
[Symbol.for('age')]: 24,
};
Object.defineProperty(target, 'gender', {
enumerable: false,
configurable: true,
writable: true,
value: 'male'
});
let handler = {
ownKeys(target) {
return ['name', 'parent', Symbol.for('age'), 'gender'];
}
};
let proxy = new Proxy(target, handler);
Object.keys(proxy)
preventExtensions(target)
拦截 Object.preventExtensions 操作。
该方法必须返回一个布尔值，否则会自动转为布尔值。
var proxy = new Proxy({}, {
preventExtensions: function(target) {
return true;
}
});
Object.preventExtensions(proxy) 被
var proxy = new Proxy({}, {
preventExtensions: function(target) {
Object.preventExtensions(target);
return true;
}
});
Object.preventExtensions(proxy)
setPrototypeOf
主要用来拦截 Object.setPrototypeOf 方法。
返回值必须为布尔值，否则会被自动转为布尔值。
若目标对象不可扩展，setPrototypeOf 方法不得改变目标对象的原型。
let proto = {}
let proxy = new Proxy(function () {}, {
setPrototypeOf: function(target, proto) {
console.log("setPrototypeOf");
return true;
}
}
);
Object.setPrototypeOf(proxy, proto);
Proxy.revocable()
用于返回一个可取消的 Proxy 实例。
let {proxy, revoke} = Proxy.revocable({}, {});
proxy.name = "Tom";
revoke();
proxy.name
Reflect
ES6 中将 Object 的一些明显属于语言内部的方法移植到了 Reflect 对象上（当前某些方法会同时存在于 Object 和 Reflect 对象上），未来的新方法会只部署在 Reflect 对象上。
Reflect 对象对某些方法的返回结果进行了修改，使其更合理。
Reflect 对象使用函数的方式实现了 Object 的命令式操作。
静态方法
Reflect.get(target, name, receiver)
查找并返回 target 对象的 name 属性。
let exam = {
name: "Tom",
age: 24,
get info(){
return this.name + this.age;
}
}
Reflect.get(exam, 'name');
let receiver = {
name: "Jerry",
age: 20
}
Reflect.get(exam, 'info', receiver);
Reflect.get(exam, 'birth');
Reflect.get(1, 'name');
Reflect.set(target, name, value, receiver)
将 target 的 name 属性设置为 value。返回值为 boolean ，true 表示修改成功，false 表示失败。当 target 为不存在的对象时，会报错。
let exam = {
name: "Tom",
age: 24,
set info(value){
return this.age = value;
}
}
exam.age;
Reflect.set(exam, 'age', 25);
exam.age;
Reflect.set(exam, 'age', );
exam.age;
let receiver = {
age: 18
}
Reflect.set(exam, 'info', 1, receiver);
receiver.age;
let receiver1 = {
name: 'oppps'
}
Reflect.set(exam, 'info', 1, receiver1);
receiver1.age;
Reflect.has(obj, name)
是 name in obj 指令的函数化，用于查找 name 属性在 obj 对象中是否存在。返回值为 boolean。如果 obj 不是对象则会报错 TypeError。
let exam = {
name: "Tom",
age: 24
}
Reflect.has(exam, 'name');
Reflect.deleteProperty(obj, property)
是 delete obj[property] 的函数化，用于删除 obj 对象的 property 属性，返回值为 boolean。如果 obj 不是对象则会报错 TypeError。
let exam = {
name: "Tom",
age: 24
}
Reflect.deleteProperty(exam , 'name');
exam
Reflect.deleteProperty(exam , 'name');
Reflect.construct(obj, args)
等同于 new target(...args)。
function exam(name){
this.name = name;
}
Reflect.construct(exam, ['Tom']);
Reflect.getPrototypeOf(obj)
用于读取 obj 的 _proto_ 属性。在 obj 不是对象时不会像 Object 一样把 obj 转为对象，而是会报错。
class Exam{}
let obj = new Exam()
Reflect.getPrototypeOf(obj) === Exam.prototype
Reflect.setPrototypeOf(obj, newProto)
用于设置目标对象的 prototype。
let obj ={}
Reflect.setPrototypeOf(obj, Array.prototype);
Reflect.apply(func, thisArg, args)
等同于 Function.prototype.apply.call(func, thisArg, args) 。func 表示目标函数；thisArg 表示目标函数绑定的 this 对象；args 表示目标函数调用时传入的参数列表，可以是数组或类似数组的对象。若目标函数无法调用，会抛出 TypeError 。
Reflect.apply(Math.max, Math, [1, 3, 5, 3, 1]);
Reflect.defineProperty(target, propertyKey, attributes)
用于为目标对象定义属性。如果 target 不是对象，会抛出错误。
let myDate= {}
Reflect.defineProperty(MyDate, 'now', {
value: () => Date.now()
});
const student = {};
Reflect.defineProperty(student, "name", {value: "Mike"});
student.name;
Reflect.getOwnPropertyDescriptor(target, propertyKey)
用于得到 target 对象的 propertyKey 属性的描述对象。在 target 不是对象时，会抛出错误表示参数非法，不会将非对象转换为对象。
var exam = {}
Reflect.defineProperty(exam, 'name', {
value: true,
enumerable: false,
})
Reflect.getOwnPropertyDescriptor(exam, 'name')
Reflect.getOwnPropertyDescriptor(exam, 'age')
Reflect.isExtensible(target)
用于判断 target 对象是否可扩展。返回值为 boolean 。如果 target 参数不是对象，会抛出错误。
let exam = {}
Reflect.isExtensible(exam)
Reflect.preventExtensions(target)
用于让 target 对象变为不可扩展。如果 target 参数不是对象，会抛出错误。
let exam = {}
Reflect.preventExtensions(exam)
Reflect.ownKeys(target)
用于返回 target 对象的所有属性，等同于 Object.getOwnPropertyNames 与Object.getOwnPropertySymbols 之和。
var exam = {
name: 1,
[Symbol.for('age')]: 4
}
Reflect.ownKeys(exam)
组合使用
Reflect 对象的方法与 Proxy 对象的方法是一一对应的。所以 Proxy 对象的方法可以通过调用 Reflect 对象的方法获取默认行为，然后进行额外操作。
let exam = {
name: "Tom",
age: 24
}
let handler = {
get: function(target, key){
console.log("getting "+key);
return Reflect.get(target,key);
},
set: function(target, key, value){
console.log("setting "+key+" to "+value)
Reflect.set(target, key, value);
}
}
let proxy = new Proxy(exam, handler)
proxy.name = "Jerry"
proxy.name
使用场景拓展
实现观察者模式
const queuedObservers = new Set();
const observe = fn => queuedObservers.add(fn);
const observable = obj => new Proxy(obj, {set});
function set(target, key, value, receiver) {
const result = Reflect.set(target, key, value, receiver);
queuedObservers.forEach(observer => observer());
return result;
}
wusq
wus***an@aliyun.com
等于：
function(fn){ return queuedObservers.add(fn) ; };obj => new Proxy(obj, {set})等于：
function(obj){ return new Proxy(obj, {set}); }等于：function(observer ){ return observer() }wusq
wus***an@aliyun.com