ES6 Proxy和Reflect

Posted 2023-05-10

参考技术A Proxy 与 Reflect 是 ES6 为了操作对象引入的 API 。Proxy 可以对目标对象的读取、函数调用等操作进行拦截，然后进行操作处理。它不直接操作对象，而是像代理模式，通过对象的代理对象进行操作，在进行这些操作时，可以添加一些需要的额外操作。

proxy，代理，使用代理，我们可以操作对象时，需要先经过代理，才能到达对象，这样就可以起到‘拦截’的作用。

一个例子：

使用new Proxy方法可以创建代理，该方法接收两个参数，分别是目标对象和代理中间对象。我们可以通过代理的实例对象再对目标对象操作时进行拦截。

has(target, prop) 用于拦截 HasProperty 操作，即在判断 target 对象是否存在 prop 属性时，会被这个方法拦截。此方法不判断一个属性是对象自身的属性，还是继承的属性。此方法不拦截 for ... in 循环。

construct(target, args) 用于拦截 new 命令。返回值必须为对象。

deleteProperty(target, prop)

拦截 delete 操作，如果这个方法抛出错误或者返回 false ，prop 属性就无法被 delete 命令删除。

defineProperty(target, prop, propDes) 拦截 Object.definePro若目标对象不可扩展，增加目标对象上不存在的属性会报错；若属性不可写或不可配置，则不能改变这些属性。

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

Reflect.get(target, name, receiver)方法

receiver对象

Reflect.set(target,name,value)

Reflect.has(obj, name)

@芥末的糖 ---------- ES6---Proxy与Reflect 实现重载(overload)

Proxy与Reflect实现重载（overload）

从语法角度讲JavaScript不支持重载。原因很简单，JS中函数可以传入任意类型、任意个数的参数，通通可以通过在函数内使用this.arguments获得。这样，就无法实现同名函数参数列表不同实现不同功能。当然，在实际使用过程中，可以人为去检测传入实参的个数及类型，来进行不同操作。但是，我认为这不能叫做重载。

ES6带来了Proxy和Reflect，配合使用可以实现重载。Proxy用于修改某些操作的默认行为，相当于对原始想进行的操作进行“包装”；Reflect对象的方法与Proxy对象的方法一一对应，这使得Proxy对象可以方便的调用对应的Reflect方法完成默认行为。我们可以这样使用它们：

 

function LogMessage( m ){
    this.m = m;
}
var message = new LogMessage( 1 );
var overload = new Proxy(message , {
    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);
    }
});
overload.m = 2; //setting m
var s = overload.m; //getti

 

 

对应对象内建的14个方法，handler也有14个方法可以覆盖，下面我们将会一一讲解。

 

 

//14个内建的方法地址
//https://blog.csdn.net/qq_28506819/article/details/71077788