代理和反射的应用

标签：代码   返回   避免   target   直接   包含   错误   error   出现   

1. 代理和反射

代理是什么？

通过调用 new Proxy() ，你可以创建一个代理用来替代另一个对象（被称之为目目标对象） ，这个代理对目标对象进行了虚拟，因此该代理与该目标对象表面上可以被当作同一个对象来对待。代理允许你拦截目标对象上的底层操作，而这本来是JS引擎的内部能力，拦截行为适用了一个能响应特定操作的函数（被称之为陷阱）；

反射是什么？

被Reflect对象所代表的反射接口，是给底层操作提供默认行为的方法的集合，这些操作是能够被代理重写的。每个代理陷阱都有一个对应的反射方法，每个方法都与对应的陷阱函数同名，并且接收的参数也与之一致。

创建一个简单的代理

使用Proxy构建可以创建一个简单的代理对象，需要传递两个参数：目标对象以及一个处理器，后者是定义一个或多个陷阱函数的对象。如果不定义陷阱函数，则依然使用目标对象的默认行为。

常用陷阱函数

1 基本陷阱函数

（1）.使用Set陷阱函数验证属性值

假如有这样一个场景，必须要求对象的属性值必须只能是数值，这就意味着该对象每个新增属性时都要被验证，并且在属性不为数值属性时就应该抛出错误。因此就需要使用set陷阱函数来重写set函数的默认行为，set陷阱函数接收四个参数：

1. trapTarget：代理的目标对象；
2. key：需要写入的属性的键；
3. value：被写入属性的值；
4. receiver：操作发生的对象（通常是代理对象）

Reflect.set()是set陷阱函数对应的反射方法，同时也是set操作的默认行为，Reflect.set()方法与set陷阱函数一样，能够接受四个参数。

示例代码：

//set陷阱函数

let target = {

    name:‘target‘

}

let proxy = new Proxy(target,{

    set(tarpTarget,key,value,receiver){

 

        if(!tarpTarget.hasOwnProperty(key)){

            if(isNaN(value)){

                throw new Error(‘property must be number‘);

            }

        }

        return Reflect.set(tarpTarget,key,value,receiver);

    }

});

proxy.msg=‘hello proxy‘; //Uncaught Error: property must be number

通过set陷阱函数就可以检测设置属性时属性值的类型，当属性值不是数字时，就会抛出错误。

（2）.使用get陷阱函数进行对象外形验证

对象外形（Object Shape）指的是对象已有的属性与方法的集合。能够使用代理很方便进行对象外形验证。由于使用属性验证只需要在读取属性时被触发，因此只需要使用get陷阱函数。该函数接受三个参数：

1. trapTarget：代理的目标对象；
2. key：需要读取的属性的键；
3. receiver：操作发生的对象（通常是代理对象）；

相应的Reflect.get()方法同样拥有这三个参数。进行对象外形验证的示例代码：

//get陷阱函数

 

let target={

    name:‘hello world‘

}

 

let proxy = new Proxy(target,{

        get(tarpTarget,key,receiver){

            if(!(key in tarpTarget)){

                throw new Error(‘不存在该对象‘);

            }

            return Reflect.get(tarpTarget,key,receiver);

        }

    });

console.log(proxy.name); //hello world

console.log(proxy.age); // Uncaught Error: 不存在该对象

使用get陷阱函数进行对象外形验证，由于target对象存在name属性，所以可以正常返回，当获取age属性时，由于该属性并不存在，所以会抛出错误。

（3）.使用has陷阱函数隐藏属性

in运算符用于判断指定对象中是否存在某个属性，如果对象的属性名与指定的字符串或符号值相匹配，那么in运算符就会返回true。无论该属性是对象自身的属性还是其原型的属性。

has陷阱函数会在使用in运算符的情况下被调用，控制in运算符返回不同的结果，has陷阱函数会传入两个参数：

1. trapTarget：代理的目标对象；
2. key：属性键；

Reflect.has()方法接收相同的参数，并向in运算符返回默认的响应结果，用于返回默认响应结果。

例如想要隐藏value属性：

//has陷阱函数

let target = {

    value:‘hello world‘

}

 

let proxy = new Proxy(target,{

    has(tarpTarget,key){

        if(Object.is(key,‘value‘)){

            return false;

        }

        Reflect.has(tarpTarget,key);

    }

})

 

console.log(‘value‘ in proxy); //false

使用has陷阱函数，能够控制in运算符的结果，value属性在target对象中存在，通过代理的has陷阱函数使得在检查value属性时返回false，达到隐藏属性的效果。

（4）.使用deleteProperty陷阱函数避免属性被删除

deleteProperty 陷阱函数会在使用delete 运算符删除对象属性时被调用，该方法接收两个参数：

1. trapTarget：代理的目标对象；
2. key：需要删除的键；

Reflect.deleteProperty() 方法也接受这两个参数，并提供了 deleteProperty 陷阱函数的默认实现。你可以结合 Reflect.deleteProperty()方法以及 deleteProperty 陷阱函数，来修改 delete 运算符的行为。例如，能确保 value 属性不被删除：

let target = {

    name: "target",

    value: 42

};

let proxy = new Proxy(target, {

    deleteProperty(trapTarget, key) {

        if (key === "value") {

            return false;

        } else {

            return Reflect.deleteProperty(trapTarget, key);

        }

    }

});

// 尝试删除 proxy.value

console.log("value" in proxy); // true

let result1 = delete proxy.value;

console.log(result1); // false

2. 原型代理上的陷阱函数

在调用Object.setPrototypeOf()和getPrototypeOf()方法时，可以使用setPrototypeOf和getPrototypeOf陷阱函数来影响Object上相应的两个方法的效果。setPrototypeOf陷阱函数接收两个参数：

1. trapTarget：代理的目标对象；
2. proto：需要被用作原型的对象；

setPrototypeOf()方法与Reflect.setPrototypeOf()传入相同的参数。另外，getPrototypeOf陷阱函数只接收trapTarget参数，Reflect.getPrototype也只接收一个参数。

例如，通过返回 null 隐藏了代理对象的原型，并且使得该原型不可被修改：

//原型代理上的陷阱函数

let target = {};

let proxy = new Proxy(target, {

    getPrototypeOf(trapTarget) {

        return null;

    },

    setPrototypeOf(trapTarget, proto) {

        return false;

    }

});

let targetProto = Object.getPrototypeOf(target);

let proxyProto = Object.getPrototypeOf(proxy);

console.log(targetProto === Object.prototype); // true

console.log(proxyProto === Object.prototype); // false

console.log(proxyProto); // null

// 成功

Object.setPrototypeOf(target, {});

// 抛出错误

Object.setPrototypeOf(proxy, {});

  使用 target 对象作为参数调用Object.getPrototypeOf() 会返回一个对象值；而使用 proxy 对象调用该方法则会返回null ，因为 getPrototypeOf 陷阱函数被调用了
。类似的，使用 target 去调用Object.setPrototypeOf() 会成功；而由于 setPrototypeOf 陷阱函数的存在，使用 proxy则会引发错误。

3 对象可扩展性的陷阱函数

ES5 通过Object.preventExtensions() 与 Object.isExtensible() 方法给对象增加了可扩展性。而 ES6 则通过 preventExtensions 与 isExtensible 陷阱函数允许代理拦截对于底层对象的方法调用。这两个陷阱函数都接受名为 trapTarget 的单个参数，此参数代表代理的目标对象。 isExtensible 陷阱函数必须返回一个布尔值用于表明目标对象是否可被扩展，而 preventExtensions 陷阱函数也需要返回一个布尔值，用于表明操作是否已成功。同时也存在Reflect.preventExtensions() 与Reflect.isExtensible() 方法，用于实现默认的行为。这两个方法都返回布尔值，因此它们可以在对应的陷阱函数内直接使用。

let target = {};

let proxy = new Proxy(target, {

    isExtensible(trapTarget) {

    return Reflect.isExtensible(trapTarget);

    },

    preventExtensions(trapTarget) {

    return false

    }

});

console.log(Object.isExtensible(target)); // true

console.log(Object.isExtensible(proxy)); // true

Object.preventExtensions(proxy);

console.log(Object.isExtensible(target)); // true

console.log(Object.isExtensible(proxy)); // true

4 属性描述符的陷阱函数

ES5 最重要的特征之一就是引入了Object.defineProperty()方法用于定义属性的特性。在JS 之前的版本中，没有方法可以定义一个访问器属性，也不能让属性变成只读或是不可枚举。而这些特性都能够利用 Object.defineProperty()方法来实现，并且你还可以利用Object.getOwnPropertyDescriptor()方法来检索这些特性。代理允许你使用 defineProperty 与 getOwnPropertyDescriptor 陷阱函数，来分别拦截对于Object.defineProperty() 与 Object.getOwnPropertyDescriptor() 的调用。 defineProperty
陷阱函数接受下列三个参数：

1. trapTarget ：需要被定义属性的对象（即代理的目标对象） ；
2. key ：属性的键（字符串类型或符号类型） ；
3. descriptor ：为该属性准备的描述符对象。

5 ownKeys陷阱函数

ownKeys 代理陷阱拦截了内部方法 [[OwnPropertyKeys]] ，并允许你返回一个数组用于重写该行为。返回的这个数组会被用于四个方法： Object.keys() 方法、Object.getOwnPropertyNames() 方法、Object.getOwnPropertySymbols()方法与Object.assign() 方法，其中 Object.assign() 方法会使用该数组来决定哪些属性会被复制。

ownKeys 陷阱函数接受单个参数，即目标对象，同时必须返回一个数组或者一个类数组对象。你可以使用 ownKeys 陷阱函数去过滤特定的属性，以避免这些属性被Object.keys() 方法、Object.getOwnPropertyNames() 方法、Object.getOwnPropertySymbols() 方法或 Object.assign() 方法使用。

6 apply与construct陷阱函数

只有 apply 与 construct 要求代理目标对象必须是一个函数。函数拥有两个内部方法：[[Call]] 与 [[Construct]] ，前者会在函数被直接调用时执行，而后者会在函数被使用 new 运算符调用时执行。 apply 与 construct陷阱函数对应着这两个内部方法，并允许你对其进行重写。apply 陷阱函数会接收到下列三个参数（ Reflect.apply() 也会接收这些参数） ：

1. trapTarget ：被执行的函数（即代理的目标对象） ；
2. thisArg ：调用过程中函数内部的 this 值；
3. argumentsList ：被传递给函数的参数数组。

当使用 new 去执行函数时， construct 陷阱函数会被调用并接收到下列两个参数：

1. trapTarget ：被执行的函数（即代理的目标对象） ；
2. argumentsList ：被传递给函数的参数数组。

Reflect.construct()方法同样会接收到这两个参数，还会收到可选的第三参数 newTarget，如果提供了此参数，则它就指定了函数内部的 new.target 值。

使用apply和construct陷阱函数有这样一些应用场景：

验证函数的参数

假如需要保证所有参数都是某个特定类型，可使用 apply 陷阱函数进行验证：

//apply和construct陷阱函数

 

let sum = function (arr=[]) {

    return arr.reduce((previous,current)=>previous+current);

}

 

let proxy = new Proxy(sum,{

    apply(trapTarget,thisArg,argumentList){

        argumentList[0].forEach((item)=>{

            if(typeof item != ‘number‘){

                throw new Error(‘不是数字类型‘);

            }

        })

        return Reflect.apply(trapTarget,thisArg,argumentList);

    },

 

    construct(trapTarget,argumentList){

        throw new Error(‘不能使用new‘);

    }

});

 

 

console.log(proxy([1,2,3,4])); // 10

console.log(proxy([1, "2", 3, 4]));//Uncaught Error: 不是数字类型Uncaught Error: 不是数字类型

let result = new proxy(); //Uncaught Error: 不能使用new

 可被撤销的代理

在被创建之后，代理通常就不能再从目标对象上被解绑。有的情况下你可能想撤销一个代理以便让它不能再被使用。当你想通过公共接口向外提供一个安全的对象，并且要求要随时都能切断对某些功能的访问，这种情况下可被撤销的代理就会非常有用。
你可以使用Proxy.revocable()方法来创建一个可被撤销的代理，该方法接受的参数与Proxy 构造器的相同：一个目标对象、一个代理处理器，而返回值是包含下列属性的一个对象：

1. proxy ：可被撤销的代理对象；
2. revoke ：用于撤销代理的函数；

当 revoke() 函数被调用后，就不能再对该 proxy 对象进行更多操作。例如：

let target = {

    name: "target"

};

let { proxy, revoke } = Proxy.revocable(target, {});

console.log(proxy.name); // "target"

revoke();

// 抛出错误

console.log(proxy.name);

总结

1. 在 ES6 之前，特定对象（例如数组） 会显示出一些非常规的、无法被开发者复制的行为，而代理的出现改变了这种情况。代理允许你为一些 JS 底层操作自行定义非常规行为，因此你就可以通过代理陷阱来复制 JS 内置对象的所有行为。在各种不同操作发生时（例如对于 in运算符的使用） ，这些代理陷阱会在后台被调用。
2. 反射接口也是在 ES6 中引入的，允许开发者为每个代理陷阱实现默认的行为。每个代理陷阱在 Reflect 对象（ES6 的另一个新特性） 上都有一个同名的对应方法。将代理陷阱与反射接口方法结合使用，就可以在特定条件下让一些操作有不同的表现，有别于默认的内置行为。
3. 可被撤销的代理是一种特殊的代理，可以使用 revoke() 函数去有效禁用。 revoke() 函数终结了代理的所有功能，因此在它被调用之后，所有与代理属性交互的意图都会导致抛出错误。
4. 尽管直接使用代理是最有力的使用方式，但你也可以把代理用作另一个对象的原型。但只有很少的代理陷阱能在作为原型的代理上被有效使用，包括 get 、 set 与 has 这几个，这让这方面的用例变得十分有限

代理和反射的应用

标签：代码   返回   避免   target   直接   包含   错误   error   出现   

原文地址：https://www.cnblogs.com/hjy-21/p/12381152.html