ES6 中的Reflect和Proxy简单介绍

ES6 中的Reflect和Proxy

Reflect 反射Proxy 代理 Proxy 与 Reflect 是 ES6 为了操作对象引入的 API 。

Reflect 反射

Reflect 可以用于获取目标对象的行为，它与 Object 类似，但是更易读，为操作对象提供了一种更优雅的方式，函数式编程。它的方法与 Proxy 是对应的。

const obj ={ a:1, b:2 } // Reflect api方法

1.Refect.set(target,propertyKey,value) 给对象赋值

Reflect.set(obj,"a",10); console.log(obj);//{a: 10, b: 2}

2.Reflect.get(target,propertyKey)取值

console.log(Reflect.get(obj,"a"));//10 //没有该属性，则返回undefined。

3.Reflect.apply(target,this.argumebnts)调用函数

function fun(a,b){ return a+b } console.log(Reflect.apply(fun,null,[2,5]));//7

4.Reflect.defineProperty(target,propertyKey);用于为目标对象定义属性

Reflect.defineProperty(obj,"a",{ }) //Reflect.defineProperty方法的作用与Object.defineProperty一样,都是为对象定义一个属性 //不同如下 // 失败时抛出错误 Object.defineProperty(obj, name, desc); // 失败时返回false Reflect.defineProperty(obj, name, desc);

5.Reflect.deleteProperty(target,propertyKey)用于删除 obj 对象的 propertyKey属性

//等同于 delete obj.a Reflect.deleteProperty(obj,"a"); console.log(obj); //{b: 2}

6.Reflect.construct(target,arguments) 不使用new，来调用构造函数的方法。

function Test(a,b){ this.a =a; this.b=b; } const t = Reflect.construct(Test,[2,3]) console.log(t);//Test {a: 2, b: 3} //等同于new target(...args)，

7.Reflect.has(target,propertyKey)查找属性在对象中是否存在

console.log(Reflect.has(obj,'c')); // false //等同于 console.log('c' in obj); //false

Proxy 代理

Proxy 可以对目标对象的读取、函数调用等操作进行拦截，然后进行操作处理。它不直接操作对象，而是像代理模式，通过对象的代理对象进行操作，在进行这些操作时，可以添加一些需要的额外操作。

//提供了修改底层实现的方式 let proxy = new Proxy(target, handler); // target：目标对象 // handle: 一个普通对象，可以去重写第层方法 //会返回一个对象 let obj = { a : 1, b : 2 } let proxy = new Proxy(obj,{ set(target,propertyKey,value){ Reflect.set(target,propertyKey,value) }, get(target,propertyKey){ return Reflect.get(target,propertyKey) }, delete(target,property){ Reflect.deleteProperty(target,propertyKey) }, has(target,propertyKey){ Reflect.has(target,propertyKey) } }) proxy.a = 10; console.log(proxy);//Proxy {a: 10, b: 2}

this 问题 在 Proxy 代理的情况下，目标对象内部的this关键字会指向 Proxy 代理

const target = { m: function () { console.log(this === proxy); } }; const handler = {}; const proxy = new Proxy(target, handler); target.m() // false proxy.m() // true //一旦proxy代理target.m，后者内部的this就是指向proxy，而不是target。

由于this指向的变化，会导致 Proxy 无法代理目标对象 有些原生对象的内部属性，只有通过正确的this才能拿到，所以 Proxy 也无法代理这些原生对象的属性