ES6学习笔记（十）代理器Proxy

谁借莪１个温暖的怀抱￠ 2021-09-30 10:26 274阅读 0赞

Java可以使用面向切面（AOP）的方法来实现某些统一的操作，比如某个操作的前置通知，后置通知等等，这种操作非常方便，其本质便是动态代理，JS的代理Proxy代理该如何使用呢？

某位大神的实现如下：

1 var objectProxy={
     2         create:function(target,methodHandler){
     3             if(!(target instanceof Object)){
     4                 throw new Error("target argument is not object type!");
     5             }
     6             var isFunction = function(o){
     7                 return (o instanceof Function);
     8             }
     9             if(!(methodHandler instanceof Object)){
    10                 throw new Error("methodHandler is not a valid object!");
    11             }
    12             //前置 后置 错误 返回 四个处理器
    13             if(!methodHandler.before && !methodHandler.after && !methodHandler.error && !methodHandler.returing){
    14                 return target;
    15             }
    16             var proxy = {};
    17             for(var i in target){
        //获取对象属性方法
    18                 var targetPrototype = target[i];
    19                 if(isFunction(targetPrototype)){
    20                     var process = true;
    21                     if(methodHandler.filter)
    22                         process = methodHandler.filter(i);
    23                     if(process){
    24                         proxy[i] = function(){
    25                             var args = {name:i,args:arguments};
    26                             if(methodHandler.before)methodHandler.before.call(target,args);//执行前置处理
    27                             var result = null;
    28                             try{
    29                                 result = targetPrototype(arguments);
    30                                 args["result"] = result;//设置返回值
    31                                 if(methodHandler.after)methodHandler.after.call(target,args);//执行后置处理
    32                             }catch(e){
    33                                 args["error"] = e;//设置异常信息
    34                                 if(methodHandler.error)methodHandler.error.call(target,args);//执行异常处理
    35                             }
    36                             if(methodHandler.returing)
    37                                 result = methodHandler.returing.call(target,args);//执行返回处理
    38                             return result;
    39                         }
    40                     }
    41                 }
    42             }
    43             return proxy;
    44         }
    45 };
    46 window.οnlοad=function(){
    47     var proxy = {prop:"prop name!",func:function(){
    48         alert("process ...!");
    49         return "test proxy!";
    50     }};
    51     var methodHandler = {
    52             filter:function(name){
        //过滤方法 (true|false) false 表示不处理
    53                return true;
    54             },
    55             before:function(args){
        //前置
    56                 alert("before methodHandler name : "+args.name);
    57             },
    58             after:function(args){
        //后置
    59                 alert("after methodHandler name : "+args.name+",return : "+args.result);
    60             },
    61             error:function(args){
        //错误
    62                 alert("error methodHandler name : "+args.name+",error : "+args.error);
    63             },
    64             returing:function(args){
        //返回
    65                 alert("returing methodHandler name : "+args.name+",error : "+(args.error?args.error:null)+",return : "+args.result);
    66                 return "changed : "+args.result;
    67             }
    68         };
    69     proxy = objectProxy.create(proxy,methodHandler);
    70     proxy.func();
    71 }

然后开始学习Proxy

# 1.概述 #

Proxy 用于修改某些操作的默认行为，等同于在语言层面做出修改，所以属于一种“元编程”（meta programming），即对编程语言进行编程。

Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。Proxy 这个词的原意是代理，用在这里表示由它来“代理”某些操作，可以译为“代理器”。

1 var obj = new Proxy({}, {
     2     get: function (target, key, receiver) {
     3         console.log(`getting ${key}!`);
     4         return Reflect.get(target, key, receiver);
     5     },
     6     set: function (target, key, value, receiver) {  
     7         console.log(`setting ${key}!`);
     8         return Reflect.set(target, key, value, receiver);
     9     }
    10 });
    11 
    12 obj.count = 1;//setting count!
    13 
    14 ++ obj.count;//getting count!, setting count!

上面代码定义了一个空对象\{ \}的代理对象obj，在代理对象上重定义了属性的读取（`get`）和设置（`set`）行为。这里暂时先不解释具体的语法，只看运行结果。对设置了拦截行为的对象`obj`，去读写它的属性，就会触发定义的拦截操作。

上面代码说明，Proxy 实际上重载（overload）了点运算符(...)，即用自己的定义覆盖了语言的原始定义。

ES6 原生提供 Proxy 构造函数，用来生成 Proxy 实例。

var proxy = new Proxy(target, handler);

Proxy 对象的所有用法，都是上面这种形式，不同的只是`handler`参数的写法。

其中，`new Proxy()`表示生成一个`Proxy`实例，`target`参数表示所要拦截的目标对象，`handler`参数也是一个对象，用来定制拦截行为。

下面是另一个拦截读取属性行为的例子。

var proxy = new Proxy({}, {
        get: function (target, property) { return 35; }
    });
    
    console.log(proxy.name); //35
    console.log(proxy.age); //35
    console.log(proxy.salary); //35

上面代码中，作为构造函数，`Proxy`接受两个参数。第一个参数是所要代理的目标对象（上例是一个空对象），即如果没有`Proxy`的介入，操作原来要访问的就是这个对象；

第二个参数是一个配置对象(不是回调函数)，对于每一个被代理的操作，需要提供一个对应的处理函数，该函数将拦截对应的操作。

上面代码中，配置对象有一个`get`方法，用来拦截对目标对象属性的访问请求。`get`方法的两个参数分别是目标对象和所要访问的属性。可以看到，由于拦截函数总是返回`35`，所以访问任何属性都得到`35`。

注意，要使得`Proxy`起作用，必须针对`Proxy`实例（上例是`proxy`对象）进行操作，而不是针对目标对象（上例是空对象）进行操作。

如果`handler`没有设置任何拦截，那就等同于直接通向原对象。

var target = {};
    var handler = {};
    var proxy = new Proxy(target, handler);
    target.a = 'b',
    console.log(target.a);//b

上面代码中，`handler`是一个空对象，没有任何拦截效果，访问`proxy`就等同于访问`target`。

一个技巧是将 Proxy 对象，设置到`object.proxy`属性，从而可以在`object`对象上调用。

var object = { proxy: new Proxy(target, handler) };

Proxy 实例也可以作为其他对象的原型对象。

var proxy = new Proxy({}, {
      get: function(target, property) {
        return 35;
      }
    });
    
    let obj = Object.create(proxy);
    obj.time // 35

上面代码中，`proxy`对象是`obj`对象的原型，`obj`对象本身并没有`time`属性，所以根据原型链，会在`proxy`对象上读取该属性，导致被拦截。

同一个拦截器函数，可以设置拦截多个操作。

1 var handler = {
     2     get: function (target, name) {
     3         if (name === 'prototype') {
     4             return Object.prototype;
     5         }
     6         return 'Hello, ' + name;
     7     },
     8 
     9     apply: function (target, thisBinding, args) {
    10         return args[0];
    11     },
    12 
    13     construct: function (target, args) {
    14         return {value: args[1]};
    15     }
    16 };
    17 
    18 //target是个代理对象，而函数也是对象，所以此处可以传入一个函数作为目标对象
    19 var fproxy = new Proxy(function (x, y) {
    20     return x + y;
    21 }, handler);
    22 
    23 console.log(fproxy(1, 2));//1，函数调用时执行apply方法，被拦截，只传入了第一个参数
    24 
    25 console.log(new fproxy(1, 2));//{ value: 2 }，new对象时执行construct构造方法，被拦截，只使用了第二个参数
    26 
    27 console.log(fproxy.prototype === Object.prototype);//获取prototype属性，被拦截，返回Object.prototype，所以相等
    28 console.log(fproxy.foo === 'Hello, foo');//获取foo属性，返回固定的'Hello, ' + 属性名

对于可以设置、但没有设置拦截的操作，则直接落在目标对象上，按照原先的方式产生结果。

下面是 Proxy 支持的拦截操作一览，一共 13 种。

*  **get(target, propKey, receiver)**：拦截对象属性的读取，比如`proxy.foo`和`proxy['foo']`。
 *  **set(target, propKey, value, receiver)**：拦截对象属性的设置，比如`proxy.foo = v`或`proxy['foo'] = v`，返回一个布尔值。
 *  **has(target, propKey)**：拦截`propKey in proxy`的操作，返回一个布尔值。
 *  **deleteProperty(target, propKey)**：拦截`delete proxy[propKey]`的操作，返回一个布尔值。
 *  **ownKeys(target)**：拦截`Object.getOwnPropertyNames(proxy)`、`Object.getOwnPropertySymbols(proxy)`、`Object.keys(proxy)`、`for...in`循环，返回一个数组。该方法返回目标对象所有自身的属性的属性名，而`Object.keys()`的返回结果仅包括目标对象自身的可遍历属性。
 *  **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)`，返回一个布尔值。
 *  **getPrototypeOf(target)**：拦截`Object.getPrototypeOf(proxy)`，返回一个对象。
 *  **isExtensible(target)**：拦截`Object.isExtensible(proxy)`，返回一个布尔值。
 *  **setPrototypeOf(target, proto)**：拦截`Object.setPrototypeOf(proxy, proto)`，返回一个布尔值。如果目标对象是函数，那么还有两种额外操作可以拦截。
 *  **apply(target, object, args)**：拦截 Proxy 实例作为函数调用的操作，比如`proxy(...args)`、`proxy.call(object, ...args)`、`proxy.apply(...)`。
 *  **construct(target, args)**：拦截 Proxy 实例作为构造函数调用的操作，比如`new proxy(...args)`。

# 2.Proxy 实例的方法 #

下面是上面这些拦截方法的详细介绍。

## get() ##

`get()`方法用于拦截某个属性的读取操作，可以接受三个参数，依次为目标对象、属性名和 proxy 实例本身（严格地说，是操作行为所针对的对象），其中最后一个参数可选。

1 var person = {
     2     name:'aaa',
     3 }
     4 
     5 var porxy = new Proxy(person, {
     6     get: function (target, property) {
     7         if (property in target) {
     8             return target[property];
     9         } else {
    10             throw new ReferenceError(`${property} not exsist as person`);
    11         }
    12     }
    13 });
    14 
    15 console.log(porxy.name);//aaa
    16 console.log(porxy.age);//ReferenceError: age not exsist as person

上面代码表示，如果访问目标对象不存在的属性，会抛出一个错误。如果没有这个拦截函数，访问不存在的属性，只会返回`undefined`。

`get`方法可以继承，也就是说可以放在原型上。

上面代码中，get的拦截操作定义在原型对象上，所以调用实例继承了proxy的obj实例时，拦截生效。

下面的例子使用`get`拦截，实现数组读取负数的索引。

1 function CreateArray(...elements) {
     2     let handler = {
     3         get(target, propKey, receiver){
     4             let index = Number(propKey);
     5             if (index < 0) {
     6                 propKey = String(target.length + index);//把传入的复数转为对应的正数下标 
     7             }
     8             return Reflect.get(target, propKey, receiver);//返回当前get函数
     9         }
    10     };
    11 
    12     let target = [];
    13     target.push(...elements);//数组对象数据填充
    14     return new Proxy(target, handler);//返回一个数组代理对象
    15 }
    16 
    17 let arr = new CreateArray(1,2,3,4,5);
    18 console.log(arr[-2]);//4

上面是一个自定义的数组构造函数，获取值时，数组的位置参数是`-2`，就会输出数组的倒数第二个成员。

下面是一个`get`方法的第三个参数的例子，它总是指向原始的读操作所在的那个对象，一般情况下就是 Proxy 实例。

const proxy = new Proxy({}, {
      get: function(target, property, receiver) {
        return receiver;
      }
    });
    proxy.getReceiver === proxy // true

上面代码中，`proxy`对象的`getReceiver`属性是由`proxy`对象提供的，所以`receiver`指向`proxy`对象。

const proxy = new Proxy({}, {
      get: function(target, property, receiver) {
        return receiver;
      }
    });
    
    const d = Object.create(proxy);
    d.a === d // true

上面代码中，`d`对象本身没有`a`属性，所以读取`d.a`的时候，会去`d`的原型`proxy`对象找。这时，`receiver`就指向`d`，代表原始的读操作所在的那个对象。

如果一个属性不可配置（configurable）且不可写（writable），则 Proxy 不能修改该属性，否则通过 Proxy 对象访问该属性会报错。

## set() ##

`set`方法用来拦截某个属性的赋值操作，可以接受四个参数，依次为目标对象、属性名、属性值和 Proxy 实例本身，其中最后一个参数可选。

1 //定义一个set处理函数
     2 let validator = {
     3     set(target, prop, value){
     4         if (prop === 'age') {
     5             if (!Number.isInteger(value)) {
     6                 throw new TypeError('The age is not an integer');
     7             }
     8             if (value > 200) {
     9                 throw new RangeError('The age seems invalid');
    10             }
    11         }
    12         target[prop] = value;//对于满足条件的age及其他属性，直接赋值
    13     }
    14 }
    15 
    16 let person = new Proxy({}, validator);
    17 
    18 person.name = 'aaa';
    19 person.age = 'cbd';
    20 person.age = '201';

上面代码中，由于设置了存值函数`set`，任何不符合要求的`age`属性赋值，都会抛出一个错误，这是数据验证的一种实现方法。利用`set`方法，还可以数据绑定，即每当对象发生变化时，会自动更新 DOM。

有时，我们会在对象上面设置内部属性，属性名的第一个字符使用下划线开头，表示这些属性不应该被外部使用。结合`get`和`set`方法，就可以做到防止这些内部属性被外部读写。

1 //get/set处理操作
     2 const handler = {
     3     get(target, key){
     4         invariant(key, 'get');
     5         return target[key];
     6     },
     7     set(target, key,  value){
     8         invariant(key, 'set');
     9         target[key] = value;
    10         return true;
    11     }
    12 };
    13 
    14 //属性名-get/set校验方法
    15 function invariant(key, action) {
    16     if (key[0] === '_') {
    17         throw new Error(`Invalid attemp to ${action} private "${key}" property`);
    18     }
    19 }
    20 
    21 const target = {};
    22 const proxy =  new Proxy(target, handler);
    23 // proxy._proto;//Error: Invalid attemp to get private "_proto" property
    24 
    25 proxy._proto = 5;//Error: Invalid attemp to set private "_proto" property

上面代码中，只要读写的属性名的第一个字符是下划线，一律抛错，从而达到禁止读写内部属性的目的。

为了达到一个类似Java的private效果，不，这已经是finally效果了，可谓煞费苦心，这便是JS在封装上的短板吧。

到目前为止发现，target对象 可以是某个对象，对象原型或者方法，而handler对象常用的几个代理方法却是不变的，所以代理的核心思想应该是需要改变的，做的处理过程---handler，并且这个处理对象是可以被重用的。

`set`方法的第四个参数`receiver`，指的是原始的操作行为所在的那个对象，一般情况下是`proxy`实例本身；

1 const handler = {
     2   set: function(obj, prop, value, receiver) {
     3     obj[prop] = receiver;
     4   }
     5 };
     6 const proxy = new Proxy({}, handler);
     7 const myObj = {};
     8 Object.setPrototypeOf(myObj, proxy);
     9 
    10 myObj.foo = 'bar';
    11 myObj.foo === myObj // true

上面代码中，设置`myObj.foo`属性的值时，`myObj`并没有`foo`属性，因此引擎会到`myObj`的原型链去找`foo`属性。`myObj`的原型对象`proxy`是一个 Proxy 实例，设置它的`foo`属性会触发`set`方法。这时，第四个参数`receiver`就指向原始赋值行为所在的对象`myObj`。

注意，如果目标对象自身的某个属性，不可写且不可配置，那么`set`方法将不起作用。

注意，严格模式下，`set`代理如果没有返回`true`，就会报错。

1 'use strict';
     2 const handler = {
     3   set: function(obj, prop, value, receiver) {
     4     obj[prop] = receiver;
     5     // 无论有没有下面这一行，都会报错
     6     return false;
     7   }
     8 };
     9 const proxy = new Proxy({}, handler);
    10 proxy.foo = 'bar';
    11 // TypeError: 'set' on proxy: trap returned falsish for property 'foo'

上面代码中，严格模式下，`set`代理返回`false`或者`undefined`，都会报错。

## apply() ##

`apply`方法拦截函数的调用、`call`和`apply`操作。按照动态代理来说，这个拦截操作才是重点。

`apply`方法可以接受三个参数，分别是目标对象、目标对象的上下文对象（`this`）和目标对象的参数数组。

const handler = {
        apply(target, ctx, args){
            return Reflect.apply(...arguments); //Reflect:反射，下一节学到，相当于另一个Object
        }
    };

无参数的简单例子

1 //目标对象是一个函数的时候，apply调用拦截才有用武之地
     2 const target = function () {
     3     return 'I am the target';
     4 }
     5 
     6 const handler = {
     7     apply(){
     8         return 'I am the proxy'
     9     }
    10 }
    11 
    12 //对象的代理是个对象，函数的代理是个函数
    13 var proxy = new Proxy(target, handler);
    14 
    15 console.log(proxy());//I am the proxy

再一个例子

1 const twice = {
     2     apply(target, ctx, args){
     3         return Reflect.apply(...arguments) * 2;
     4     }
     5 };
     6 
     7 function sum(left, right) {
     8     return left + right;
     9 }
    10 
    11 var proxy = new Proxy(sum, twice);
    12 
    13 console.log(proxy(1,2));//6
    14 console.log(proxy.call(null,3,4));//14
    15 console.log(proxy.apply(null,[5,6]));//22
    16 //call和apply的第一个参数都是需要调用的函数对象，在函数体内这个参数就是this的值，剩余的参数是需要传递给函数的值，
    17 //call与apply的不同就是call传的值可以是任意的，而apply传的剩余值必须为数组

发现apply的三个参数：目标对象，目标对象的上下文this，参数args没有被使用，他们应该在需要使用的地方才用。

上面代码中，每当执行`proxy`函数（直接调用或`call`和`apply`调用），就会被`apply`方法拦截。

另外，直接调用`Reflect.apply`方法，也会被拦截。

## has() ##

`has`方法用来拦截`HasProperty`操作，即判断对象是否具有某个属性时，这个方法会生效。典型的操作就是`in`运算符。这个拦截应该不常用。

`has`方法可以接受两个参数，分别是目标对象、需查询的属性名。

1 var handler = {
     2   has (target, key) {
     3     if (key[0] === '_') {
     4       return false;
     5     }
     6     return key in target;
     7   }
     8 };
     9 var target = { _prop: 'foo', prop: 'foo' };
    10 var proxy = new Proxy(target, handler);
    11 '_prop' in proxy // false

上面代码中，如果原对象的属性名的第一个字符是下划线，`proxy.has`就会返回`false`，从而不会被`in`运算符发现。

注意：如果原对象不可配置或者禁止扩展，使用`has`拦截就会报错，也就是说，如果某个属性不可配置（或者目标对象不可扩展），则`has`方法就不得“隐藏”（即返回`false`）目标对象的该属性。

注意：`has`方法拦截的是`HasProperty`操作，而不是`HasOwnProperty`操作，即`has`方法不判断一个属性是对象自身的属性，还是继承的属性。

另外，虽然`for...in`循环也用到了`in`运算符，但是`has`拦截对`for...in`循环不生效。

## construct() ##

`construct`方法表示构造函数被调用，用于拦截`new`命令，下面是拦截对象的写法。

var handler = {
        construct(target, args, newTarget){
            return new target(...args);
        }
    };

`construct`方法可以接受三个参数。

*  `target`：目标对象
 *  `args`：构造函数的参数对象
 *  `newTarget`：创造实例对象时，`new`命令作用的构造函数（下面例子的`p`），可选参数

1 var p = new Proxy(function () {}, {
     2     construct(target, args){
     3         console.log('called: ' + args.join(','));
     4         return {value: args[0] * 10};
     5     }
     6 });
     7 
     8 console.log((new p(1)).value);
     9 
    10 // called: 1
    11 // 10

构造函数的目标函数是一个匿名空函数，就像空对象一样。

`construct`方法返回的必须是一个对象，否则会报错，因为是构造函数。

## deleteProperty() ##

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

1 var handler = {
     2   deleteProperty (target, key) {
     3     invariant(key, 'delete');
     4     delete target[key];
     5     return true;
     6   }
     7 };
     8 function invariant (key, action) {
     9   if (key[0] === '_') {
    10     throw new Error(`Invalid attempt to ${action} private "${key}" property`);
    11   }
    12 }
    13 
    14 var target = { _prop: 'foo' };
    15 var proxy = new Proxy(target, handler);
    16 delete proxy._prop
    17 // Error: Invalid attempt to delete private "_prop" property

上面代码中，`deleteProperty`方法拦截了`delete`操作符，删除第一个字符为下划线的属性会报错。

注意，目标对象自身的不可配置（configurable）的属性，不能被`deleteProperty`方法删除，否则报错。

关于对象的代理操作符在AOP中应该不常用。在OOP中使用应该较多。

## 其他方法 ##

`defineProperty`方法拦截了`Object.defineProperty`操作。

`getOwnPropertyDescriptor`方法拦截`Object.getOwnPropertyDescriptor()`，返回一个属性描述对象或者`undefined`。

`getPrototypeOf`方法主要用来拦截获取对象原型。具体来说，拦截下面这些操作。

*  `Object.prototype.__proto__`
 *  `Object.prototype.isPrototypeOf()`
 *  `Object.getPrototypeOf()`
 *  `Reflect.getPrototypeOf()`
 *  `instanceof`

`isExtensible`方法拦截`Object.isExtensible`操作。

`ownKeys`方法用来拦截对象自身属性的读取操作。具体来说，拦截以下操作。

*  `Object.getOwnPropertyNames()`
 *  `Object.getOwnPropertySymbols()`
 *  `Object.keys()`
 *  `for...in`循环

`preventExtensions`方法拦截`Object.preventExtensions()`。该方法必须返回一个布尔值，否则会被自动转为布尔值。

这个方法有一个限制，只有目标对象不可扩展时（即`Object.isExtensible(proxy)`为`false`），`proxy.preventExtensions`才能返回`true`，否则会报错。

`setPrototypeOf`方法主要用来拦截`Object.setPrototypeOf`方法。

# 3.Proxy.revocable() #

`Proxy.revocable`方法返回一个可取消的 Proxy 实例。用于一次性限制的代理对象。

1 let target = {};
     2 let handler = {};
     3 
     4 let {proxy, revoke} = Proxy.revocable(target, handler);
     5 
     6 proxy.foo = 123;
     7 proxy.foo // 123
     8 
     9 revoke();
    10 proxy.foo // TypeError: Revoked

`Proxy.revocable`方法返回一个对象，该对象的`proxy`属性是`Proxy`实例，`revoke`属性是一个函数，可以取消`Proxy`实例。上面代码中，当执行`revoke`函数之后，再访问`Proxy`实例，就会抛出一个错误。

`Proxy.revocable`的一个使用场景是，目标对象不允许直接访问，必须通过代理访问，一旦访问结束，就收回代理权，不允许再次访问。

# 4.this 问题 #

虽然 Proxy 可以代理针对目标对象的访问，但它不是目标对象的透明代理，即不做任何拦截的情况下，也无法保证与目标对象的行为一致。主要原因就是在 Proxy 代理的情况下，目标对象内部的`this`关键字会指向 Proxy 代理。

此外，有些原生对象的内部属性，只有通过正确的`this`才能拿到，所以 Proxy 也无法代理这些原生对象的属性。

const target = new Date();
    const handler = {};
    const proxy = new Proxy(target, handler);
    
    proxy.getDate();
    // TypeError: this is not a Date object.

上面代码中，`getDate`方法只能在`Date`对象实例上面拿到，如果`this`不是`Date`对象实例就会报错。这时，`this`绑定原始对象，就可以解决这个问题。

所谓bind绑定，就是把某个属性或方法挂在到目标对象上。

# 5.实例：Web 服务的客户端 #

Proxy 对象可以拦截目标对象的任意属性，这使得它很合适用来写 Web 服务的客户端。

const service = createWebService('http://example.com/data');
    
    service.employees().then(json => {
      const employees = JSON.parse(json);
      // ···
    });

上面代码新建了一个 Web 服务的接口，这个接口返回各种数据。Proxy 可以拦截这个对象的任意属性，所以不用为每一种数据写一个适配方法，只要写一个 Proxy 拦截就可以了。这便是AOP的思想。

function createWebService(baseUrl) {
      return new Proxy({}, {
        get(target, propKey, receiver) {
          return () => httpGet(baseUrl+'/' + propKey);
        }
      });
    }

同理，Proxy 也可以用来实现数据库的 ORM 层。

总结：Proxy的应用：极顶的接口对象和极底的ORM数据库对象。

转载于:https://www.cnblogs.com/jixiaohua/p/10562607.html